Follow Us @soratemplates

quarta-feira, 14 de setembro de 2011

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

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. 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 - Google+ - Deviantart