Fanbox Facebook flotante y con efecto deslizante

Fanbox Facebook flotante y con efecto deslizante

Este truco es una adaptacion de Joomla pasada a Blogger, es un gadget que se muestra en el extremo de nuestros blog, donde al pasar el cursos sobre el aparece el fanbox de nuestra pagina, con el mencionado efecto deslizante. Un ejemplo lo pueden ver en este blog de futbol.

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 ir a Diseño | Edición de HTML y antes de 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 agregan antes de ]]></b:skin>

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

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=238&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:228px; 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.

¿Tienes alguna Duda?, o necesitas Ayudas no dudes en Comentar

1 Trackbacks & Pingbacks

  1. Fanbox Twitter flotante y con efecto deslizante

Leave a comment

Your email address will not be published.


*


Follow

Get every new post delivered to your Inbox

Join other followers