Likebox de Facebook flotante... y deslizante

Este likebox dejará de funcionar.  Facebook lo reemplazará por este nuevo Plugin

Esta caja la vi en El balcón de Jaime, pero era con una lista de enlaces, y  aunque le he puesto el likebox de Facebook y modificado apenas una milésima para mis propósitos, este truco se adapta muy fácilmente a cualquier artilugio que queramos ponerle dentro, y su efecto deslizante es ideal para quienes deseen ahorrar espacio en el blog.

Puedes ver el likebox de Facebook funcionando en esta misma entrada en la parte inferior izquierda. 

Para ponerlo solo entra en Diseño, Añadir gadget, Html Javascript y dentro pega el siguiente 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 #ffffff;border:7px solid #273f83;height:auto;left:0;position:fixed;top:300px;width:auto;

z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px; }

#blsidebarflt_main img {text-align: center; padding:4px; border: none;}

#blsidebarflt_lat img{border:none;}

#blsidebarflt_main{float:left;height:260px;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;">

<div id="blsidebarflt_links">

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="https://www.facebook.com/pages/tu-cuenta" data-width="200" data-height="260" data-show-faces="true" data-stream="false" data-header="false"></div></div></div>

    

<a id="blsidebarflt_lat"><img alt="Abrir sidebar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHYO4_82f7g_h5LWAiqPtmNwyJeZZnrxB9U91W4h4Fhlnfe1JGL7r5-6BvnqiPYjGmgMYj899TpVaGmj_s8bK0wIjzjUiaK1aFo58bofYSIXfjl5HkS02xr2EwoxhGQeF13V8JY20sSXc/s140/boton-facebook.jpg" /></a></div>

Si la caja contenedora te queda muy abajo, combia top:300px; por un número más bajo hasta que quede a la altura que quieres. Dode pone tu cuenta cambia por tu cuenta de Facebook  y listo. La caja se abrirá al dar clic en ella, y se cerrará con otro clic.