Gadget flutuante com efeito deslizante

Konnichiwa minna-san, como vai o final de semana de vocês? Um amigo meu de longa data faleceu ontem... motivo de não ter aparecido aqui no blog. Realmente difícil perder alguém querido... então gomenasai, não ter aparecido. Hoje devido a um pedido decidi postar como colar gadget flutuante de seguidores, como se encontra no blog. É bem fácil de fazer é só ter um pouquinho de paciência, tem várias formas de fazer, mas vou ensinar a minha maneira. Se estiver interessado é só continuar lendo.

Na  primeira vez que realizei esse tutorial havia dado erro, então precisa de um pouco de paciência. Se ocorrer erro tente novamente se ainda assim persistir basta deixar um comentário que darei uma ajudinha. O que irei ensinar é deixar o gadget de seguidores em um pequeno box, com uma aba para fora assim quando o leitor ou visitante passar o mouse, ele desliza para fora. Fica muito fofo é diferente, acho importante dar atenção a cada pedacinho do blog, então porque não aos seguidores onde fica nosso amigos? Também tem como colocar outras coisinhas nesse gadget flutuante como:Chat, Cbox do Facebook etc... basta ter um código para adicionar. Então vamos, lá?

1. Primeiramente vá ate seu Modelo/Design, Editar Html. Procure por </head> e acima disso cole este 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>

2. Agora procure por ]]></b:skin> e acima disso cole:

.slide_likebox {
float:right;
width:288px;
height:345px;
background: url(URL DA SUA IMAGEM) 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}

◤Entendendo o código◥

• Width e heigth - tamanho da sua imagem de fundo.

• URL da Imagem - endereço da sua imagem de fundo.| Imagem para o fundo:  www

• rigth | (-250px) - posição da imagem; o número negativo faz com que a imagem fique mais para a direita, só mostrando uma partezinha dela; se vc retirar o sinal de menos, por exemplo, a imagem ficará bem ao centro do seu blog. Aí é só ir modificando o número ate ficar ao seu agrado.

• top | (130px) -  posicionamento da imagem, mas para cima ou para baixo. É só ir modificando também, assim como o de cima.

• Width e heigth = se referem ao tamanho do fundo do gadget.

• Background-color = a cor de fundo do gadget.

3. Agora salve e vá ate o Layout/Design, adicione um novo Gadget, Html/Javascript, e dentro dele cole esse 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>

Isso para adicionar uma  Fanbox, agora se quiser adicionar outro código HTML use esse aqui:

<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>CÓDIGO HTML &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"></div></span></div></div>

Se não souber como pegar o código dos seguidores, acesse esse tutorial e faça ate o terceiro passo: www Agora cole o código na parte que indicada em vermelho. Prontinho seus gadget flutuante e deslizante esta pronto. 

Todos os créditos do tutorial vão para:  Reino Kawaii e Ciudad Blogger