14 de janeiro de 2012

1

Redes Sociais com Efeito Rollover


Olá Pessoal, hoje iremo aprender a como colocar um gadget de redes sociais com efeito rollover em seu blog. Mas o que é um efeito rollover? É bem simples, ao passarmo o mouse por cima de uma imagem aparece outra. Esse efeito fica muito elegante para qualquer tipo e estilo de blog, você pode trocar as imagens de acordo com o seu gosto, também pode mudar o tamanho de imagens.

Vamos ao Tutorial:
1º - Entre no Painel de Controle de seu blog e clique na Aba Layout.
2º - Clique em "Adicionar um gadget" e selecione  a opção HTML/JavaScript.
3º - Se preferir coloque um título e nai caixa de baio (a maior), cole o código abaixo:

<a href=URL-DE-SEU-FACEBOOK-AQUI onmouseover= "if (document.images) document.facebook.src='http://4.bp.blogspot.com/-cDTKopC5dKU/TvXIIzNNcVI/AAAAAAAAA9Y/qgMBLS7YM9Q/s1600/social-facebook-box-blue-icon.png';" onmouseout= "if (document.images) document.facebook.src= 'http://4.bp.blogspot.com/-lh3Fzglbw-g/TvXIJYS61yI/AAAAAAAAA9g/MaMVDZE1GLI/s1600/social-facebook-box-white-icon.png';"><img src="http://4.bp.blogspot.com/-lh3Fzglbw-g/TvXIJYS61yI/AAAAAAAAA9g/MaMVDZE1GLI/s1600/social-facebook-box-white-icon.png " name="facebook" border="0" width="64" height="82"/></a>
<a href=URL-DE-SEU-TWITTER-AQUI onmouseover= "if (document.images) document.twitter.src=' http://3.bp.blogspot.com/-W0igB22R5Fg/TvXIK3ASCiI/AAAAAAAAA94/nkT69ndcsPo/s1600/social-twitter-box-blue-icon.png';" onmouseout= "if (document.images) document.twitter.src= 'http://1.bp.blogspot.com/-xCDxra0Rxm0/TvXILUv9Q2I/AAAAAAAAA-A/9Myhh_zPekA/s1600/social-twitter-box-white-icon.png';"><img src="http://1.bp.blogspot.com/-xCDxra0Rxm0/TvXILUv9Q2I/AAAAAAAAA-A/9Myhh_zPekA/s1600/social-twitter-box-white-icon.png" name="twitter" border="0" width="64" height="82"/></a>
<a href=URL-DE-SEU-FEED-AQUI onmouseover= "if (document.images) document.rss.src=  'http://1.bp.blogspot.com/-loN59kfrbvM/TvXIJoLTjzI/AAAAAAAAA9o/kJwErX388AE/s1600/social-rss-box-orange-icon.png';" onmouseout= "if (document.images) document.rss.src= 'http://4.bp.blogspot.com/-FluBZbxECzU/TvXIKIrTRsI/AAAAAAAAA9w/xVwM-QLFte0/s1600/social-rss-box-white-icon.png';"><img src="http://4.bp.blogspot.com/-FluBZbxECzU/TvXIKIrTRsI/AAAAAAAAA9w/xVwM-QLFte0/s1600/social-rss-box-white-icon.png " name="rss" border="0" width="64" height="82"/></a><br/>
Lembre-se de Modificar:

  • URL-DE-SEU-FACEBOOK-AQUI: Coloque neste local o URL do seu perfil no Facebook.
  • URL-DE-SEU-TWITTER-AQUI: Coloque neste local o URL do seu perfil no Twitter.
  • URL-DE-SEU-FEED-AQUI: Coloque neste local o URL do feed de seu blog.

4º - Clique em Salvar.

Pronto! Seu gadget de Redes Sociais com Efeito Rollover, já esta adicionado. Se você quiser trocar as imagens, recomendo usar o IconFinder .

Este código pertence ao blog Spice Up You Blog mas tendo algumas modificações pelo UB.

1 Comentário:

Kelleany disse... [Responder Comentário]

posso colocar no meu blog Bruna?? com os créditos e claro

Postar um comentário

Parcerias são feitos em suas respectivas páginas.
- Se deseja falar com nossos autores, criticar ou sugerir, solicite nosso
Formulário de Contato
- Evite divulgar o seu blog nos comentários para que ele não seja excluído por nosso autor.
- Não utilize linguagem vulgar e tente falar sobre algo que esteja ligado ao artigo.

Licença Creative Commons
Free Page Rank Tool