Barra flotante de post con desplazamiento 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVxDSs1HpEAifpUAGGjv4us0axWj7GwrbRp0OFfgqNfjwPCtCHU7Ot5qKRabAMF8w0kAL4rkScM_ef7VesOVX0KnUI2pi9qfBD_HqMVUoLtpICB1Tca2_7cE4C8Vz4XXIT5cl82NX393oz/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga6jtTglvqH-BHCl2wqwjLhzaCVOQDQwhvc8IT98bjXQEKV9NOp3HHTTjIb9P_IzbXI8AurCWNPutaudfY6a4i47Vu4xrMESH1TRXbhwfuxFvm1ht-9VEBxyCHwBHIzugXi6CBDQ8TBltu/s1600/cancel.png"/></a></div id='md-stickybar'>

Se puede optar por agregar la barra flotante a la parte lateral del blog como barra lateral o en la parte superior de la página como la barra superior. De cualquier manera, sólo hay que asegurarse 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: Cambiar #000000 con el código de color que nos guste.

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

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 deseamos.

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".