Breaking

martes, 6 de mayo de 2014

Barra Flotante 'últimas entradas" en Blogger


Barra flotante "Ultimas entradas" con 
desplazamiento horizontal

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




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 visitantesno 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4R1ZyAnfGft0Bylzpjj6CvEtVFxZkQT1s36xwgIefmlntmmm4UGy1esY8u75h6AQnMUUClk-PxmBGkrhk4E1iRSVNE1B1W7tK0xg0UZo7mcCO9FdM9n7wkb-9oRst-UCAXdZdudDJZ_YF/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://tutorialescomofunciona.blogspot.com.es/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/AVvXsEg9vzWEL2-wfszz5_4HpHs9knC2YwPFY33JCz5sIgi5ZL5ujJmMH4hO7gFMVSnb8-JaUdAQeNjZPmTJw6cZH755ITxpNs5GjGobSvUZrjL8qXbuNRVRHXJu2esTQdU5Xs6drs11r1xprR-s/s1600/cancel.png"/></a></div id='md-stickybar'
Personalizar la Barra de la manera deseada:  

Cambiar Url: Para que la barra flotante muestra tus ultimas entradas hay que cambiar "http://tutorialescomofunciona.blogspot.com.es" 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 el15 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 izquierdaen lugar de la izquierda en sDirection var = "left";cambia con 
"right".



No hay comentarios:

Publicar un comentario

Adbox