Como instalar una sidebar lateral flotante, recomendación por El Balcón de Jaime

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.´


Sidebar o barra lateral flotante y desplegable para tu blog

Supongo que conocerás bien la sidebar o barra lateral que prácticamente todas las plantillas de blogger -al no ser que haya sido modificada- tienen y lo que en ella puedes agregar, ya sea una imagen, una frase (o varias), una lista de enlaces, tus blogs favoritos...

Hoy quiero presentarte una nueva forma de ofrecer a tus lectores información, herramientas o entretenimiento en una sidebar flotante que permanece fija en la esquina izquierda del blog y puede desplegarse o recogerse.



Aunque puede parecer algo complicado de instalar, debo decir que es un truco sencillísimo y que únicamente tendrás que añadir el contenido. Puedes ver el truco en funcionamiento para comprobar si realmente deseas aplicarlo.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega el código:

<script src="http://sites.google.com/site/scriptsbalcon/b/blprototype.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/scriptsbalcon/b/blsidebarefecto.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/scriptsbalcon/b/blsidebarflotante.js" type="text/javascript"></script>
<style>
#blsidebar_flotante{text-align:left;}
#blsidebar_flotante h2 {color:#000000;font-family:arial;font-size:14px;font-weight:normal;margin:10px;}
#blsidebar_flotante ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
#blsidebar_flotante li a{width:100%;}
#blsidebar_flotante li a:link,
#blsidebar_flotante li a:visited{color:#000000;display:block;list-style-type:none;}
#blsidebar_flotante li {color:#000000;display:block;list-style-type:none;margin:0 20px 4px;padding:2px;width:120px;}
#blsidebar_flotante li a:hover{padding-left: 2px;text-decoration:none;}
#blsidebar_flotante {background:none repeat scroll 0 0 #E0DDD6;border:1px solid #B4B4B4;height:auto;left:0;position:fixed;top:80px;width:auto;}
#blsidebarflt_main img {text-align: center; padding:4px; border: none;}
#blsidebarflt_lat img{border:none;}
#blsidebarflt_main{float:left;height:320px;overflow:auto;padding:4px;width:200px;}
#blsidebarflt_lat {float:left;height:137px;width:35px;}
#credit {float:right;}
body{font-size:75%;}
a{outline: none;}
a:active{outline: none;}
#blsidebarflt_links{width:200px;}</style>
<div id="blsidebar_flotante">
<div id="blsidebarflt_main" style="display:none;">

AQUI MAS CONTENIDO

<div id="blsidebarflt_links">
<h2>Lista de enlaces</h2>
<ul>
<li><a href="URL ENLACE 1">TITULO ENLACE 1</a></li>

<li><a href="URL ENLACE 2">TITULO ENLACE 2</a></li>

<li><a href="URL ENLACE 3">TITULO ENLACE 3</a></li>

<li><a href="URL ENLACE 4">TITULO ENLACE 4</a></li>
</ul>
<div id="credit"><a href="http://goo.gl/4xVx"><img title="Conseguir widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwJhlNhPcbtIJrJE9hNz6XBmUkN5oKTtXU_25A20BZ38k4x59HVW5at2zNrEmdaPv3-YEWe8VgxoZe1ogj_3_2Clt634jkrZZSgkkAb09PtV6dcREH2Aj-00riTMDzMfQSa1XJvGEhyqYK/s320/blget.png" /></a></div>
</div> </div>
<a id="blsidebarflt_lat" href="#"><img alt="Abrir sidebar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Z6eyklEIKSbSMlk5by3Hd_YuXP9Mi7w_xAr2y3phQwUVCiy-jZhAMxwX71TIoYRe8nYAVGI6Siafzaj4QglXSsYAj9f9z9ZqE1f6d1nRIZtLHpCg6LiRzpbDM-C11WSDWiWmkjKA_O8o/s320/blsidebarimg.png" /></a>

</div>

Ahora simplemente necesitas rellenar tu barra lateral.

Reemplaza AQUI MAS CONTENIDO en el código, por una frase, un párrafo, una imagen ^[+]...

En URL ENLACE debes escribir la dirección de tu enlace (ya sea el de tu blog, el de un sitio web, un foro...)

En TITULO ENLACE escribe el texto que tendrá el enlace.

Para agregar más enlaces en la lista de enlaces inserta líneas como esta:

<li><a href="URL ENLACE 4">TITULO ENLACE 4</a></li>

Asegúrate de que siempre las introduces antes del cierre </ul>.

Si por el contrario, deseas menos enlaces, borra alguna de las líneas.

Notas:

- La sidebar flotante "crecerá" junto al contenido, por lo que si agregas mucho texto o una lista de enlaces demasiado extensa, no debes preocuparte: aparecerá una barra para desplazarse.

- Si quieres cambiar la imagen que actúa como botón para abrir la sidebar, borra la siguiente línea en el código:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Z6eyklEIKSbSMlk5by3Hd_YuXP9Mi7w_xAr2y3phQwUVCiy-jZhAMxwX71TIoYRe8nYAVGI6Siafzaj4QglXSsYAj9f9z9ZqE1f6d1nRIZtLHpCg6LiRzpbDM-C11WSDWiWmkjKA_O8o/s320/blsidebarimg.png

Inserta en su lugar, la dirección de la imagen o el icono que hayas escogido ^[+].

A continuación te ofrezco cuatro botones por si deseas llevarte alguno: