Revista Informática

Barra flotante "Ultimas Entradas" con desplazamiento horizontal

Publicado el 01 abril 2014 por Danyca
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.
Barra flotante
 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.

Volver a la Portada de Logo Paperblog
Por  Jose Santacruz
publicado el 11 noviembre a las 18:15

buen dia, como puedo hacer para que la barra se muestre en la parte inferio de la web

Dossier Paperblog