Tutorial: Gadget flutuante e com efeito deslizante

Olá! Como sempre, boas vindas a todos os seguidores que inclusive, agora estão em área reservada com layout personalizado e tudo hein ^-^
Notaram ali no cantinho a aba flutuante dos amigos? Eu sempre tive vontade de personalizar essa área, afinal, são os amigos que fazem toda a diferença! São vcs que dão um brilho a mais a um site!!! Nada mais justo do que, para demonstrar o quanto são importantes, além das palavras de agradecimento e de estarem dentro do meu coração, vcs tenham um espaço beeem fofo e em destaque para que mais pessoas os conheçam e saibam o quanto são especiais.
O Blogger oferece a personalização desse gadget através o Google Friend Connect, em que vc muda as cores, letras...mas não dá por exemplo, para colocar um background, bem, não que eu saiba.
Acessando o Ciudad Blogger (site recomendadissíssimo!), vi um tutorial para colocar aquela Fanbox do Facebook em aba flutuante e deslizante. Aí pensei:"Hummmm...mas será que dá para colocar outras coisas também?" A resposta é: SIM! rsrsrsrs... e o melhor é que dá para colocar códigos html, tipo o da C-box, como jah vi em muitos blogs - mas não sei se usaram esses códigos - e o dos seguidores! Vamos lá...
A primeira coisa a ser feita é ir em 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 segundo código, destacado de vermelho é:
Width e heigth = tamanho da sua imagem de fundo.
URL da Imagem = endereço da sua imagem de fundo.Caso queira, vou deixar a minha imagenzinha como modelinho para vcs:
rigth=-250px = quanto para direita ou esquerda a imagem vai ficar; o número negativo faz com que a imagem fique mais para a direita, só mostrando uma partezinha; 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 para ver o que é melhor para vc.
top=130px = ao posicionamento da imagem, mas para cima, mas para baixo...é só ir modificando também.
Destacado em rosa:
Width e heigth = se referem ao tamanho do fundo do gadget ou outro que for add;
Background-color = a cor de fundo do gadget ou outro que for add.

Agora que vc organizou essa parte, vá em Layout/Design - Elementos da Página, Adicionar Gadget, Html/Javascript, e adicione esse código aqui:
<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> 
 Caso queira add sua Fanbox, faça isso agora ^ ^
Mas, caso queira adicionar um código html, faça isso:
<div class="slide_likebox"> <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'>
AQUI VC ADICIONA O 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>

Pronto! Para adicionar seus seguidores, acesse o Google Friend Connect e personalize sua caixinha de seguidores, adicione o código alí onde está indicado no código acima e visualize. Eu não uso a C-box, mas acho que funciona com ela também.
Por ser deslizante, assim que vc pausa o mouse sobre a aba ela mostra o gadget.
É isso!
Espero que gostem e que tenham gostado da área que fiz reservada para vcs :3
beijus<3






Postar um comentário

16 Comentários

  1. oi flor tentei colocar mais a caixa não desliza
    o que sera que aconteceu??
    http://karenbarbiepink.blogspot.com/

    ResponderExcluir
  2. Muito legal o tutorial, quando eu tiver tempo eu faço no meu blog, fica super lindo.
    Beeijos ♥
    umagarotanaotaoigual.blogspot.com

    ResponderExcluir
  3. Hummm...não deu certo?
    Bem, vou verificar aqui novamente ok.
    Beijinhos e obrigada pela visita ^^

    ResponderExcluir
  4. Karen: Verifiquei aqui no modelo Travel do blogger e deu certo; talvez seja o modelo do blog...de qualquer forma, tente novamente. Não estou encontrando problemas aqui.
    XoxoPinkie: Que bom que gostou ^^ beijinhos e obrigada!!!

    ResponderExcluir
  5. Karen, estive em seu site e vi que sua caixinha jah está funcionando e deslizando ^^
    beijinhos

    ResponderExcluir
  6. ah que lindo! muiiito interessante! ^-^
    e eu ali seguindo! ;)

    ResponderExcluir
  7. Eu vi Chris ^^
    Agradeço muito mesmo!!!!
    beijinhus

    ResponderExcluir
  8. Muito boa a dica, aqui no seu blog ficou perfeito !

    Beijinhos,
    http://coisasdegarotasoficial.blogspot.com

    ResponderExcluir
  9. o meu nun deu certoo nuun !! deixei a sua imagem como exemplo ( mas vou tirar ) ... aonde foi qe eu errei vs pode me explicar rolar ela rola so nao aparece os meus amigoos !!!
    seguindo aqui bjoo ta lindo .

    ResponderExcluir
  10. Oi ^^
    Pode usar a imagem caso vc goste dela ou pode editar também :D
    Bem, dê uma olhada no código dos seguidores; tente atualizá-lo, gerando novamente o código no Google Friend Connect e adicione no local indicado naquele último código do post.
    Pode ser que não funcione em alguns modelos ou sofra interferência de outros scripts.
    Espero que dê certo e que eu tenha te ajudado.
    beijinhus e muito obrigada por estar aqui!

    ResponderExcluir
  11. Anônimo22 abril

    Oi!! Vc poderia fazer um tutorial de como podemos colocar esse sistema de comentarios personalizados porque eu ja procurei em varios sites e não consegui ainda colocar nos meus blogs!!

    ResponderExcluir
    Respostas
    1. Esse estilo de comentario foi personalizado pela Giza Veiga do site Candyland.net
      Ela disponibiliza varios estilos com codigos prontos; basta add acima de /b:skin
      Beijus e obrigada<3

      Excluir
  12. Amor, estou tentando deixar facebbok e goople + como o seu, mais não consigo. Só encontro tutorias que vem com o twitter junto, mais a aba do twitter está com problema. Pode me ajudar?
    Beujinhos
    Rubia

    ResponderExcluir
    Respostas
    1. Eh, a minha fan box do twitter falhou ai removi do codigo.
      Assim que retornar aos posts aqui no blog irei postar o tutorial, que jah estava ate preparado antes de ter que me ausentar :)
      Em breve ok?
      Super beijus...

      Excluir
  13. Olá!

    Como faço para pegar o código dos seguidores do Google Friend Connect? Eu não entendi muito bem essa parte.

    obriogada^^

    ResponderExcluir
    Respostas
    1. O friend connect acabou, apenas o widget dele ficou no blogger :/

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up