miércoles, 18 de abril de 2012

El Fanbox de Twitter, flotante y con efecto deslizante

Estos dias he recibido varias consultas de personas que me han pedido la version para Twitter del fanbox flotante,pues bien basandome en la creacion del Potro El Fanbox de Facebook Flotante,he creado una adaptacion de dicho fanbox para Twitter.

Para añadir dicho fanbox ve a la Edición de HTML y antes de </head> pega lo siguiente:
 <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>
 Ahora antes de ]]></b:skin> agrega los estilos:
 .slide_likebox {
float:right;
width:288px;
height:345px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCfKvV1IGQPb06ZrCJgmPMK0iYTdOSclsd-6gReHhbSzdkwUxBPoR0ePLTyK3AH2ByKNECSoutPnWD_dxmYCqcWeAEV2woBtVixIoIt2cyjalsk8E7B6Wk46lykCSbGXZuxI3oGIxFE_E/s1600/tw_ag.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}
Guardas los cambios y ahora vas a  Diseño| Añadir gadget | HTML/Javascript,alli pegas lo siguiente:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script><div id="twitterfanbox">
<script type="text/javascript">fanbox_init("Tu Usuario");</script></div></div></span></div></div>
Reemplazas Tu Usuario por el nombre de tu usuario en Twitter sin @,el resultado final lo pueden ver en el siguiente blog de pruebas.



1 comentario:

Related Posts Plugin for WordPress, Blogger...