En este tutorial te enseñare el super truco de deslizador de entradas recientes en tu blog de blogger.Digamos que tienes un numero considerable de entradas en tu blog o si desea mostrar una lista de tus libros favoritos ,pero tienes poco espacio en la barra del lado.Este widget sera de gran ayuda parea ti. Este articulo explicacomo anadir un auto deslizador (marquee) de las entradas recientes.Este Widget lucira muy bien en tu blogspot.
Este es similar a la muestra de tus entradas recientes en tu barra del lado en tu plantilla,pero este widget tendra en particular un efecto marquee .Ahora si deseas mostrarlo en tu plantilla de blog arriba o abajo en tu blog.Sigue las siguientes instrucciones.
Para verlo en vivo de el siguiente boton:
DEMO
Como Instalar este Widget De Auto Desplazamiento De Entradas Recientes.
1.Entra en tu Blogger >>Diseño >> Añadir un Gadget >> Selecciona HTML/JavaScript
2.Copie el siguiente codigoy peguelo dentro de HTML/JavaScript
<script type='text/javascript'>
var w2bWidth="100";
var w2bScrollAmount="10";
var w2bScrollDelay="50";
var w2bDirection="left";
var w2btargetlink="yes";
var w2bnumPosts="10";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="http://s24.postimg.org/uua6yc4z5/bola.gif";
var w2bfontsize="16";
var w2bbgcolor="ffffff";
var w2blinkcolor="161cde";
var w2blinkhovercolor="db21b3";
</script>
<a href="http://ciudadblogger.info/" target="_blank" title="Super Trucos de Blogger"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://ciudadblogger.info/" target="_blank" title="Super Trucos de Blogger"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a href="http://ciudadblogger.info/" target="_blank" title="Enlace Retroceso Gratis"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script type='text/javascript' src='http://24work.ucoz.com/24work-blogspot/scrolling-rece/test/24work-rpscroller.js' ></script>
<script type='text/javascript' src="http://ciudadblogger.info/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>
var w2bWidth="100";
var w2bScrollAmount="10";
var w2bScrollDelay="50";
var w2bDirection="left";
var w2btargetlink="yes";
var w2bnumPosts="10";
var w2bBulletchar =">>>";
var w2bimagebullet="yes";
var w2bimgurl="http://s24.postimg.org/uua6yc4z5/bola.gif";
var w2bfontsize="16";
var w2bbgcolor="ffffff";
var w2blinkcolor="161cde";
var w2blinkhovercolor="db21b3";
</script>
<a href="http://ciudadblogger.info/" target="_blank" title="Super Trucos de Blogger"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
<a href="http://ciudadblogger.info/" target="_blank" title="Super Trucos de Blogger"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<a href="http://ciudadblogger.info/" target="_blank" title="Enlace Retroceso Gratis"><img src="http://s23.postimg.org/b28y1w6qv/ciudad.png" alt="Enlace Retroceso Gratis" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<script type='text/javascript' src='http://24work.ucoz.com/24work-blogspot/scrolling-rece/test/24work-rpscroller.js' ></script>
<script type='text/javascript' src="http://ciudadblogger.info/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>
Ahora Reemplace la direccion url http://ciudadblogger.info con la direccion o Url de tu blog.
Ahora da click en Guardar
Nota:- Selecciona imagen Image Bullet o Icon que sea transparente de Fondo y pequeña en tamano.
Pudes solamente modificar el codigo de color rojo (variables)de acuerdo a tus especificaciones, por ej. en el caso de "var w2bScrollDelay", baja el numero, o aumenta la velocidad.
0 comentarios:
Publicar un comentario