Aunque Facebook Slide Likebox es una extensión de Joomla también podemos usarlo en Blogger.
Se trata de 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. Puedes verlo en esta misma entrada, se encuentra en el lado derecho de la ventana.
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/AVvXsEgWNcwjtc3NoAjmgyxSae20GB57C-iP_U7I0FH6XCLvQ4yT0Qx5hDT9TXYU8B1-_vYfjhVXXxTOUwlshzL8KtTYaS9hEDI0yGJJ03sBU98eHldzkIdnCUTRKcZ0USsN-msj9YNc6Ox2-T8/) 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=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>
Si no Sabes Cual Es El Nombre De Tu Facebook Mira un ejemplo:
http://www.facebook.com/pages/DistritoUrbanoNeT/151864484850424
ese es el nombre de mi pagina de facebook
Ese código contiene el Fanbox, así que cambia donde se indica el nombre de tu página, y listo.
Puedes Ver Como Quedo Aqui
Blogdepruebas
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.
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.
http://www.facebook.com/pages/DistritoUrbanoNeT/151864484850424
ese es el nombre de mi pagina de facebook
Ese código contiene el Fanbox, así que cambia donde se indica el nombre de tu página, y listo.
Puedes Ver Como Quedo Aqui
Blogdepruebas
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.
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.
Comentarios por la pagina
Comentarios por facebook