Fanbox Twitter flotante y con efecto deslizante

Fanbox Twitter flotante y con efecto deslizante

En la entrada anterior vimos, como poner en Fanbox de Facebook, en un costado de forma flotante y con un lindo efecto deslizante, ahora haremos lo mismo pero con un fanbox de la red social Twitter.

Para añadir el fanbox de Twitter ve a la Edición de HTML y antes de </head>  pega lo siguiente:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’ type=’text/javascript’/>

<script type=’text/javascript’>
jQuery.noConflict();
jQuery(function (){
jQuery(&quot;.slide_likebox_twitter&quot;).hover(function(){
jQuery(&quot;.slide_likebox_twitter&quot;).stop(true, false).animate({right:&quot;0&quot;},&quot;medium&quot;);
},function(){
jQuery(&quot;.slide_likebox_twitter&quot;).stop(true, false).animate({right:&quot;-250&quot;},&quot;medium&quot;);
},500);
return false;
});
</script>

Ahora antes de ]]></b:skin> agrega:

.slide_likebox_twitter {
float:right;
width:288px;
height:345px;
background: url(http://4.bp.blogspot.com/-1Bwy7Br6OeQ/TuqLoITm9UI/AAAAAAAAAoE/TXulC2hQoo0/s1600/tw_ag.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 65px;
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_twitter”> <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 @,y ya deberías ver funcionar el truco en tu blog.

¿Tienes alguna Duda?, o necesitas Ayudas no dudes en Comentar

Leave a comment

Your email address will not be published.


*


Follow

Get every new post delivered to your Inbox

Join other followers