Tutorial: Como poner el Fanbox de Facebook, flotante y con efecto deslizante

¡Comparte el tutorial!

Tweet

Facebook se ha convertido en un medio importante para los que tienen un blog.
Y este gadget seguro que te gustará.


Te mostramos como agregar el Fanbox de Facebook flotante y con efecto deslizante a tu blog.
Puedes ver el resultado en este blog de pruebas.

Dificultad:

Fácil

Paso 1:

Lo primero será ir a:

Escritorio de Blogger > Plantilla > Editar HTML

Ahora, antes de:

</head>

pega el siguiente código:

<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>

Paso 2:

Ahora antes de:

]]></b:skin>

agrega lo siguiente:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigOzYxpD_OIJtex6KvzeJkvPXQLtRREizsrIUJmW6v3SEZoQKjHdKoGjLHESJ-GsJdwJNKtMEvURiAff7tV2vmMCcCBRbwn5tM-jkK0tY5PEdDpl3VQV-vYpyISPb1CXwPrQ8h0NpkyGk/) 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}

Paso 3:

Ahora en un Gadget HTML/JavaScript pega lo siguiente:

<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%2Faqui-username-o-ulr-de-tu-pagina&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>

Sustituye lo de color rojo por el Username de tu página. Ejemplo:

TuTutorial.TutorialesParaTodo

Y si aún no tienen URL entonces colócalo así:

pages/Tu-tutorial-Tutoriales-para-todo/319278958191308

Guárdalo y listo. Ya puedes ver tu caja de seguidores en tu blog.

Fin del tutorial