Sidebar flotante para tu blog

Hoy vamos a mostrar como podemos poner una barra flotante también llamada Sidebar en tu blog que se expande cuando la pulsamos.
Hemos puesto que permanezca fija a la izquierda pero la podemos cambiar a el lado derecho si lo deseamos.

Para poner simplemente tenemos que pegar este código en un gadget en nuestra plantilla de diseño.

Aquí te dejo el botón como se mostraría





 <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/AVvXsEh3TX3182bJJ1CzqSbTU0GJxpk0JkJBP741mLw1PACRaL5y-2UvMDfUcFXdpOEnqN3apsPbDZMwMol9z-h8JDg7wGvad2KYJH52J6_GbaMuaRZ9ynV_VRTR_Im3_33lvumMvxtkBlGI5gmP/s320/blget.png" /></a></div>
</div> </div>
<a id="blsidebarflt_lat" href="#"><img alt="Abrir sidebar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB7ZyxgAmnX9ySp7EN6dzIZktA4xDCn3CLWnmXX26Nwpfr10pxmptz-VMQe0U5ksuFhQoBnHzB9MeGldfFswcWtcPLM_dQECNbnxl9_HIzVLi-oZrPAj90CcXaPddLSHR9UC3icywQO6SH/s320/blsidebarimg.png" /></a>

</div>









ía