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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpmhSaVgnxHoINv0elU9_L0Zor7mn0S-CXG-L0_7wJIjU4GiE2KsQcXxN1XUJ6zWwdWVsjRCgtBPCfKAN4vBhjEB2f1LoQA-Oq5U2KAVQJvj6OmxGn31KW1DrhIDbRH7OxyUzXr8JpUEo/) 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: 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&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.