miércoles, mayo 9

Cómo colocar un FanBox de Facebook flotante y deslizante para tus blogs

hola les traigo un tuto de como colocar lo sig:

ir a la configuración de plantilla de HTML de su blogger, ser muy cuidados@s y seguir los pasos }
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvlKucJEHQ__fJKC-ZGA70ulezNeTG15dG2X2kgKoRAf1NP4VK8II7p8mp1WS7s4Vu8IsT2YSXFH_TNXJhzmuwu8DsE7th3HayHkL311gYRlAJmSgt8vEtL_F5dWqauFK9tzpryksPpuQ/) 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 losgadget de blogger y agregamos uno que sea de HTML y colocamos ahí el siguiente código modificando lo que está en amarillo,  por el nombre de sus páginas de facebook, esto quiere decir lo que sale luego del "/", por ejemplo el de mikururuna   https://www.facebook.com/mikururunesan?ref=ts en nombre-de-tu-pagina-de-facebook o también si tu página no tiene nombre y es algo como page/mikururuna/1232433443, pega eso donde está rojo.


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

No hay comentarios:

Adopta y no compres salva la vida de un callejerito.adopts, saves the life of a stray dog.

ir arriba