El Fanbox de Facebook, flotante y con efecto deslizante

Aunque Facebook Slide Likebox es una extensi?n de Joomla tambi�n podemos usarlo en Blogger.

Se trata de un gadget que muestra una pesta?a en un extremo del blog, y al pasar el cursor sobre ella aparece el fanbox de Facebook con un efecto deslizante. Puedes verlo en esta misma entrada, se encuentra en el lado derecho de la ventana.

El gadget funciona con jQuery que es el que le da ese efecto deslizante, as? que usaremos ese script, un poco de CSS y el FanBox de Facebook.

Lo primero es entrar en Dise?o | Edici?n de HTML y antes de </head> pega el script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".slide_likebox").hover(function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>

Ahora antes de ]]></b:skin> agrega los estilos:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5204T02l-WsfmG2PHQO2nXh10udjT8U3TqrOoWD6FZH_OLYn_Du25Aema8C1xRXpQQgDL3y5GdylUbRYsrzV8piCzz3ESRgxC9zvUojhJaHICi_l24tl3_ABm_LGz-xnJgpPH6IpkZU/) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap {
margin-top:2px;
margin-left:-5px;
width:238px;
height:325px;
background-color:#fff;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Por ?ltimo entra en Dise?o | Elementos de la p?gina | A?adir gadget | HTML/Javascript y ah? pega esto:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnombre-de-tu-pagina-de-facebook&amp;width=240&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

Ese c?digo contiene el Fanbox, as? que cambia donde se indica el nombre de tu p?gina, y listo.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.

La pesta?a, as? como el fondo del gadget es una imagen, as? que si deseas cambiarle el color o tama?o tendr?s que editar la imagen que se encuentra en el ?rea de los estilos.
Lo ideal ser?a no modificar el tama?o, pero en caso de que desees hacerlo deber?s -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pero adem?s mirar la entrada donde hablamos c?mo agregar el fanbox sin borde, pues ese mismo procedimiento hemos usado aqu? tambi�n, as? que ah? podr?s ver qu� se necesita restar en las medidas del Fanbox.

Pero claro, eso es s?lo si quieres modificar su tama?o, sino entonces no necesitar?s nada m?s que los tres primeros pasos y podr?s tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.