Gadget flutuante com efeito deslizante

Oi oi meus amorecos ლ(╹◡╹ლ). Está tudo bem com vocês? Eu estou ótima. De agora em diante eu vou começar a organizar os temas aqui do blog, por exemplo: Dias de segunda,terça, e sábado temos posts relacionados á tutoriais, dias de quarta, quinta e domingo irei postar materiais, goodies e tudo relacionado á isso, assim não fica uma tag mais completa que a outra, ok? Só farei valer esse novo método a partir de semana que vem, então os assuntos por aqui vão estar bem diversificados e bagunçados.

Bom, o tutorial pode ser aplicado em várias questões, e não só para o gadget de seguidores, mas isso fica á sua escolha. Ele não é tão simples de se aplicar, então iremos precisar de um pouquinho de paciência. É bom para blogs que tem a sua sidebar lotada e que não quer colocar mais gadgets, acho diferente e muito fofo.

01- Vá no seu editor de HTML e procure por </head> e acima dele cole o seguinte código (não modifique nada)

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

02- Agora procure por ]]></b:skin> e cole acima dele o seguinte código:

.slide_likebox {
float:right;
width:288px; /*LARGURA DO WIDGET*/
height:345px; /*ALTURA DO WIDGET*/
background: url(URL DA SUA IMAGEM) no-repeat !important;
display:block;
right:-250px; /*POSIÇÃO DA IMAGEM*/
padding:0;
position:fixed;
top: 130px; /*POSIÇÃO DA IMAGEM*/
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; /*COR DO FUNDO DO GADGET*/
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.likeboxwrap iframe {margin:-1px}

Mude se preciso. Salve. Depois vá no layout do seu modelo e adicione um novo gadget JAVA/SCRIPT  e cole nele o seguinte código:

<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%2Fnome-de-sua-pagina-de-facebook&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe></div></span></div></div>

CRÉDITOS: WWW