Colocar Fanbox de facebook flotante y con efecto deslizante

Bien veamos como colocar un Fanbox de facebook como el que tenemos en este Blogg a la entrada, sabemos que facebook slide likebox es una extensión para Joomla y que vamos a poder utilizar dentro de Blogger.

Este Gadget que nos muestra una pestaña vistosa en un extremo del blog y que cuando pasamos el cursor por ella lo que hace es aparecer el Fanbox con efecto deslizante, el cual lo podemos verla en esta entrada: Blogg Ayuda.

Este Gadget esta funcionando bajo jQuery que es el proporciona un efecto deslizante y estará también creado con un poco de CSS.

Bien para empezar a crear este Fanbox haremos los siguientes pasos:

el primer paso sera entrar a la pestaña de Diseño, después vamos a  edición de HTML

Buscamos dentro del editor de plantilla lo siguiente: </head> y antes de eso pegamos 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>

Después Vamos a buscar: ]]></b:skin> y antes de el agregamos lo siguiente:

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

Ya para poder finalizar con exito este manual vamos a reliazar los siguientes pasos:

Vamos a la pestaña de Diseño | Elementos de la página | Añadir Gadget | HTML/Javascrip , y dentro de ese bloque pegaremos 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%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>

Este código que acabamos de ver contiene el Fanbox que acabamos de colocar,bien para configura lo que pusimos haremos lo siguiente:

En color rojo se encuentra lo que vamos a editar en este caso dice nombre de pagina, es donde colocaremos el nombre que tenemos nosotros, como vemos no se necesita de mucho para poder hacerlo pero si queremos modificar la plantilla habrá que modificar lo que ya colocamos, recordando que siempre hay que guardar nuestros datos por si algo sale mal.

Posted in: Blogger, Facebook, jQuery