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>
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}
Nesse código as partes destacadas em vermelho e rosa são:
Width e heigth - tamanho da sua imagem de fundo.
URL da Imagem - endereço da sua imagem de fundo.| Imagem para o fundo: www
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.
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.
Background-color = a cor de fundo do gadget.
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&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>
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 &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"></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: Bunny crazy
Nenhum comentário:
Postar um comentário