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>Ahora antes de ]]></b:skin> agrega los estilos:
<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>
.slide_likebox {Por último entra en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pega esto:
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMU9iMtVNkfVdeSLB_uqEFEdC5NQjcqwlzc8Y7yKumXD2fh0d4RdddwNCXkkfzPWrKp54OSdc8uQoKZSVqD9rxrENHRo-oiPm8OdLCI7ZqrUy1Tb-UTbp6AUxyk985dWUnyu7FYa26Fnc/) 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}
<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=240&colorscheme=light&connections=15&stream=false&header=false&height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; 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.
La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendrás que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pero además mirar la entrada donde hablamos cómo agregar el fanbox sin borde, pues ese mismo procedimiento hemos usado aquí también, así que ahí podrás ver qué se necesita restar en las medidas del Fanbox.
Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitarás nada más que los tres primeros pasos y podrás tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.
No requiere muchos pasos ni mayor trabajo, a menos que quieras hacerle modificaciones.
La pestaña, así como el fondo del gadget es una imagen, así que si deseas cambiarle el color o tamaño tendrás que editar la imagen que se encuentra en el área de los estilos.
Lo ideal sería no modificar el tamaño, pero en caso de que desees hacerlo deberás -como dije- editar la imagen, cambiar las medidas tanto en los estilos como en el Fanbox, pero además mirar la entrada donde hablamos cómo agregar el fanbox sin borde, pues ese mismo procedimiento hemos usado aquí también, así que ahí podrás ver qué se necesita restar en las medidas del Fanbox.
Pero claro, eso es sólo si quieres modificar su tamaño, sino entonces no necesitarás nada más que los tres primeros pasos y podrás tener este Fanbox de Facebook, flotante y con efecto deslizante en tu blog.
0 comentarios: