Por Lmm La Mujer Mutante
Hola lectores y lectoras, hoy, a pedido de Cristina Langares, una de nuestras seguidoras, traemos este útil tutorial para que puedan colocar el fans box de facebook flotando de manera que al tocarlo se deslice, como el que tenemos en nuestro blog.
Como siempre, ya saben que tienen que ir a la configuración de plantilla de html de su blogger, ser muy cuidados@s y seguir los pasos que les comentare a continuación...
Lo primero es buscar con las teclas Ctrl +F el código </head> y antes de éste coloquen el siguiente código.<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>
Luego buscan ]]></b:skin> y pegan antes de éste, lo siguiente.
.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}
Ahora la parte final consiste en ir a elementos de diseño, donde se agregan los gadget de blogger y agregamos uno que sea de HTML y colocamos ahí el siguiente código modificando lo que está en rojo, por el nombre de sus páginas de facebook, esto quiere decir lo que sale luego del "/", por ejemplo el bebloggera de https://www.facebook.com/bebloggera en nombre-de-tu-pagina-de-facebook
<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>
Ahora coloquen vista previa y si no sale ningún error guarden.
Entonces ya podrán disfrutar de su facebook box deslizante en sus blogs, si por casualidad tienen Wordpress pueden utilizar el widget de esta página facebooklikebox.net
Agradecemos a Ciudadblogger por este maravilloso código.
Me cuentan como les va