Sidebar lateral flotante

Konnichiwa otro tuto de esa pagina que me encanto .

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. 

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

<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="http://1.bp.blogspot.com/_gjBqKNTws4M/S-RHPxKrDtI/AAAAAAAACV4/1bWlh9HFqDY/s320/blget.png" /></a></div>
</div> </div>
<a id="blsidebarflt_lat" href="#"><img alt="Abrir sidebar" src="http://1.bp.blogspot.com/_gjBqKNTws4M/S-RCTMH6T0I/AAAAAAAACVw/jhjrxf0RfAE/s320/blsidebarimg.png" /></a>

</div> 

 A continuación te ofrezco cuatro botones por si deseas llevarte alguno: (ejemplo que dio el de como puedes hacer tus imagenes y su menu).