El Fanbox de Facebook, flotante y con efecto deslizante
Pasando por el blog de el genio de Blogger El Potro me he encontrado con este gran truco y es 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.
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 pega arriba de ]]></b:skin> lo siguiente:
.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://lh6.googleusercontent.com/-VW_GzzYnZJ0/TkiZQFcBc2I/AAAAAAAABmg/fa9_qWV8Cu4/fb_bg.png) 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}
Ahora guardas y vas a 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:8px5px0pt50px;><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&width=238&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style=border:none;overflow:hidden;width:228px;height:320px; allowtransparency="true"></iframe></div></span></div></div>
Por ultimo cambia el nombre de tu pagina donde se indica y listo.