sábado, 20 de mayo de 2017

Leer más o Seguir leyendo automático con imágenes en miniatura en blogger


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta <data:post.body/> y elimínala para incluir esto en su lugar:


<b:if cond='data:blog.pageType == "item"'><data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/>
<b:if cond='data:post.hasJumpLink'><data:post.body/><b:else/>
<b:if cond='data:post.snippet'><b:if cond='data:post.thumbnailUrl'><div class='bljjteImgn'><img expr:src='data:post.thumbnailUrl'/></div></b:if> <data:post.snippet/><div class='blLeerjtems'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Leer post completo...</a></div>
<b:else/><data:post.body/></b:if></b:if></b:if></b:if>

 Puedes personalizar la frase que llevará el enlace editando el texto en color verde.

Ahora localiza la etiqueta </head> y justo antes añade esta línea:


<link href='https://sites.google.com/site/scriptsbalcon/b/bljLeermsjte.css' rel='stylesheet' type='text/css'/>

 Haz vista previa para comprobar el resultado y guarda la plantilla para terminar.




domingo, 14 de mayo de 2017

Fondo de noche estrellada para el blogger



Se trata de un código de css para nuestro blog blogger se caracteriza por background principal oscuro, podemos mostrar a modo simula torio unas estrelleras que centellean y parpadean sin parar como si el fondo de nuestro sitio se pareciera a un universo relajante.

Para poder ver un demo de este Fondo para su blog blogger solo ciclando aquí si te gusta si quieres colocarlo en tu blog aqui esta el codigo :


Modo de empleo en tu blog es facil solo buscar el siguiente codigo :

Copia el codigo de abajo y pegalo entre las etiquetas <body> de tu plantilla.


<div class="estrellas"></div>
<style>
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
.estrellas {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}
body {
  background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQpkMzhPuc2atAOw3rzpwWbpxj3l1-vRbhiX5qAsjRmR46XJQD1nuYx9TCa3HjN23ZM3-hY9R01w5lrSYPwc6Xt-ojXx_4RIP8i8nvSxItubqOHNPtjeeJTPFWXJPSbZ9WxCRsG59ojc/s1600/estrellas.png) repeat top center;
}
.estrellas{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxSIU0yCOhZi8JnX1Kxm4Q2DZMlMJ5s6or2pWVA3o2L5cb9KUKr1vSarQbfNWBhsLReimwLB1hDVGxVcdZXrmh97aRJsgYfyjmggF0CxST24z0b52SE-UtAlRUU9BnfKkiPHT0lpQtnLA/s1600/twinkling.png) repeat top center;
  z-index:-2;
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 100s linear infinite;
  animation:move-twink-back 100s linear infinite;
}
</style>

Proteger el contenido de tu bloggger y Textos e imágenes


Buenos días, tarde o noche blogueros , voy a compartir con ustedes un pequeño truco que recién aprendí para proteger nuestro contenido de blogger que funciona perfecto.


Características:
  • Desactiva Click derecho
  • Evita el copiar y pegar
  • Evita que arrastren tus imágenes a su computador
  1. Opción 1: Lo primero que debemos hacer es Ir a Plantillas>Edición HTML hay buscaremos la etiqueta:
<body>
Cuando la encuentren la Reemplazan por el siguiente codigo:

<body oncontextmenu='return false;' onmousedown='return false;' onselectstart='return false;'>

  1.  Opción 2: Si no encuentran la etiqueta <body> Busquen la siguiente:
</head>
 abajo de esa etiqueta te va a parecer la etiqueta <body> quzas un poco diferente, lo cual no importa simplemente la reemplazan por el codigo:


<body oncontextmenu='return false;' onmousedown='return false;' onselectstart='return false;'>

Y eso seria todo ya tendríamos el contenido protegido.



lunes, 29 de agosto de 2016

Colocar Mensaje de Bienvenida o Alerta Para Blogger



Esta Vez les vengo a traer este truco que suele estar en muchos blogs que visitas y quieres tener en tu blog que al entrar te puede decir que no olvides comentar o no  copies o algo que quiera informar sobre el blog pero resumido bueno sin mas nada que decir les explicare como colocar este pequeño truco para que lo tengas en tu blog blogger de Mensaje de Bienvenida para tu blogger


Simplemente vamos a agregar un gadget HTML/Javascript (sin ponerle título, no es necesario) y vamos a volcar dentro de él lo siguiente:


<script language="JavaScript" type="text/javascript">
alert("Acá coloca el mensaje que quieres que aparezca");
</script>

Ya Solo te toca cambiar lo que esta de color rojo porque que quieras que aparesca en el mensaje de entrar en tu blog blogger 

lunes, 15 de agosto de 2016

Colocar Borde de Colores a una Imagen

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:


Imagen a la izquierda :

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div>

Imagen a la derecha :

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div>

Imagen en el centro:

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div>


  • En URL ponemos la URL de la imagen correspondiente.
  • En COLOR ponemos el número correspondiente al código del color que se asigne al borde.

Blog para saber los códigos de colores HTML :  AQUI
 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑