Barra flotante "Ultimas Entradas" con desplazamiento horizontal

Las barras flotantes son maneras impresionantes para mantener a sus lectores informados acerca de las recientes publicaciones en tu blog o promocionar alguna entrada o pagina en concreto.

Hoy os traigo una nueva forma de añadir sus ultimos posts con despalzamiento horizontal que se desplazará una vez con su página mientras se mueve hacia arriba o hacia abajo.


 Aqui puedes ver como funciona la barra flotante: Click aqui

Vamos a ver como agregar esta impresionante barra flotante con desplazamiento horizontal, que ademas viene con un botón de cancelación en caso de que a sus visitantes no les gusta o lo quieren eliminar. 

Aquí les dejo los pasos a seguir y el codigo para poder agregar las ultimas entradas en tu blog de una nueva y impresionante forma con despalzamiento horizontal:
  
Ir a Blogger> Diseño 

Añadir un gadget HTML / JavaScript
 

Pega el siguiente código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script style="" src="https://ugwoke-charles-jsfiles.googlecode.com/svn/trunk/stickybar.js"></script><script src="https://ugwoke-charles-jsfiles.googlecode.com/svn/trunk/stickybar2.js"></script><style>#md-stickybar{background:#000000 url('http://1.bp.blogspot.com/-TAUA592d0XY/Ut21zR3_D8I/AAAAAAAAA-o/xoYyLFV7gNM/s1600/etstickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#md-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#md-stickybar a:hover{text-decoration:underline;}#md-stickybar p{margin:0;list-style:none;}#md-stickybar img{vertical-align:middle;margin-right:6px;}#mdclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style><div id='md-stickybar'><script>var nMaxPosts = 15;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style="" src="http://www.urldetublog.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=15 " ></script><a href="#" id="mdclose" onclick="return false;"><img src="http://3.bp.blogspot.com/-G6e8JYBXc1c/Ut21zKC9ZOI/AAAAAAAAA-k/_2wSICnpIok/s1600/cancel.png"/></a></div id='md-stickybar'>

Tambien puedes optar por agregar la barra flotante a la parte lateral de su blog como barra lateral o en la parte superior de la página como la barra superior. De cualquier manera, sólo asegúrese de que no interfiere con el diseño del blog.

 Personalizar la Barra de la manera deseada:  

Cambiar Url: Para que la barra flotante muestra tus ultimas entradas hay que cambiar " http://www.urldetublog.blogspot.com" por el url de tu blog. 

Color de Fondo: Cambie o cambiar #000000 con el código de color a su gusto.

Color del enlace: También puedes cambiar el color de los enlaces (entradas) mediante la sustitución de #FFFFFF con su código de color deseado.

Cantidad de Mensajes: Por defecto, la barra está configurado para mostrar 15 entradas recientes. Puedes cambiar el número de entradas recientes para mostrar reemplazando el 15 con el número de mensajes recientes que desea.

Dirección de desplazamiento: Para cambiar la dirección de desplazamiento que se desplaza por defecto a la izquierda, en lugar de la izquierda en sDirection var = "left"; cambia con
"right".


Bueno, esto seria todo para hoy, si te encuentras con alguna problema en agregar la barra flotanta en tu blog, deja tu comentario y te ayudo a solucionarlo.

Si quieres recibir mas tutoriales y gadgets por correo electronico, suscribete gratis a nuestro blog, visita nuestra pagina de facebook o añade nuestro feed Rss.



Compartelo!:

13 comentarios:

  1. No se que me quedo mal, pero no me sale la barra, será que demora? mi blog es hecchoamano.blogspot.com, gracias

    ResponderEliminar
  2. No puedo dar una opinión porque, aun siguiendo paso a paso las instrucciones, bien sencillas, la barra flotante no aparece. Saludos.

    ResponderEliminar
  3. Hola estimado Armando, la barra sale, pero lo que pasa es que hay otra problema, es decir no en todas las plantillas la barra funciona igual, por ejemplo en algunos blogs la barra baja y sube una vez con el cursor, pero en otros blogs nos, en el blog de ejemplo queda estupendo. Ahora mismo estamos trabajando para solucionar esta problema, muchas gracias por avisanos, si la barra no te sale intenta copiar y pegar de nuevo el codigo. Saludos

    ResponderEliminar
  4. Gracias, lo he intentado un par de veces más sin éxito. Es una lástima, queda muy bien en el blog de ejemplo, y no he visto nada parecido en la red. Un saludo.

    ResponderEliminar
  5. ¨¨¨¨..¨¨¨8"=,,88,¨¨¨_.
    ¨¨¨¨¨8""=""8'¨¨"88a88'
    ..¨.;88m¨a8¨¨¨,8""¨"8
    ¨"8"'¨¨"88"¨¨A"¨¨¨¨¨8;
    ¨¨¨"8,¨¨"8¨¨¨8¨¨¨¨¨¨¨"8,
    ¨¨¨¨"8¨¨¨8,¨¨8,¨¨¨¨¨¨¨"8
    ¨¨¨¨¨8,¨¨"8,¨"8,¨¨¨¨___8,
    ¨¨¨¨¨"8,¨¨"8,¨"8mm""""""8m.
    ¨¨¨¨¨¨"8,am888i"'¨¨¨,mm"
    ¨¨¨¨¨¨,8"¨¨_8"¨¨.m888"
    ¨¨¨¨¨,88P"""""I888888
    ¨¨¨¨¨"'¨¨¨¨¨¨¨¨¨"I888
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨"I8
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨I8_
    ¨¨¨¨¨¨¨¨¨¨¨¨,mmeem.m""i,¨I8""¨¨,mmmmm,'.
    ¨¨¨¨¨¨¨¨¨¨¨m""¨¨¨¨.¨"8.8 I8¨¨,8"¨¨¨.¨¨"88
    ¨¨¨¨¨¨¨¨¨¨i8¨¨.¨'¨¨,mi""8I8¨,8¨.¨'¨¨,8"
    ¨¨¨¨¨¨¨¨¨¨88.'¨,mm""¨¨¨¨"8I88"m,,mm'"
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨"I8¨¨¨"
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18
    ¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨¨18

    En nombre de todos los administradores que formamos acompáñame, te deseamos que pases un lindo fín de semana, y nunca olvides que cuando por las mañanas abrimos los ojos no solo es un nuevo despertar, es renacer, porque cada día puede ser el comienzo de algo increible. Cada día es único e irrepetible, la vida es maravillosa, ama, ríe y sobretodo nunca dejes de soñar.

    ResponderEliminar
  6. En mi blog la barra se desplaza con el cursor.
    y ¿sería posible quitar la parte final de get this widget-easy tins?
    Gracias un saludo

    ResponderEliminar
  7. Gracias me sirvio bastante!

    ResponderEliminar
  8. Muchas gracias, me sirvio de mucho para mi blog

    ResponderEliminar
  9. buena la barra... http://poepart3.blogspot.com.ar/

    ResponderEliminar
  10. pero ... no puedes haces que se queda fija ?

    ResponderEliminar
  11. para otra ves indica en que parte del codigo debemos pegar el codigo de la barra flotante por que las cosas no se pueden pegar así por que si vale

    ResponderEliminar
  12. En vez de que aparezcan las entradas de tu blog, como se puede hacer para que aparezca un texto que tú edites.

    ResponderEliminar
  13. Buenas tardes,

    He instalado la barra pero me gustaría fijarla encima de la cabecera del blog. Cómo lo podría hacer? Y otra cosa ¿Cómo se puede eliminar el widget-easy tins?

    Gracias de antemano!

    ResponderEliminar

- Antes de hacer una consulta (pregunta), por favor utiliza el Buscador.

- Por favor, cualquier otra pregunta que tengas, la puedes hacer en la entrada correspondiente.

- Haremos todo lo posible por responderte o acusarte recibo antes de 24 horas. A veces, podremos hacerlo, otras veces no será posible, y nos tomará un poco más… ten paciencia.

- Los comentarios que a mi criterio se escriban solo para dejar un enlace o un link seran eliminados.

- ¡Muchas gracias por comentar o por preguntar!