Redes Sociais com Efeito Rollover

Veja o Demo: http://demo2ub.blogspot.com

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7xSZOL8QTethqdWf8i5VCATvd8ireYeUU_Pd8aL4b7QheFHdfV4Bp5sHdj9lECnQPyH7oHNwDveARIy4CEPf1OD-QEYteLuauEVwpMcFrve5dex2U3TYvfXGsbqbRUFz6gAbBCA66Yc/s1600/social-facebook-box-blue-icon.png';" onmouseout= "if (document.images) document.facebook.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95Gj2xCx9KUjDrZXdVUlsrJPnGpVSoLbf8oYJ0lOcc1XdJu-lL6nn5T9EicyshcZMurk_6SHFd7cOALdHsxhAKNAzQO80n-VQW6mBUQGzDlU2YTXURNRQozf5sFHIjupFm5p0xxVgy_w/s1600/social-facebook-box-white-icon.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj95Gj2xCx9KUjDrZXdVUlsrJPnGpVSoLbf8oYJ0lOcc1XdJu-lL6nn5T9EicyshcZMurk_6SHFd7cOALdHsxhAKNAzQO80n-VQW6mBUQGzDlU2YTXURNRQozf5sFHIjupFm5p0xxVgy_w/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=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv3UgzvTycb4mhC3O2LHoVPORIGfGctzDLmDa6WjiEKEslnCZV4R5c4ZpKWCS8KvRyoivr7SWSa2vUWDLjjj5LFYhiqgjF_1rLMZlantnuNK9Houi0vQvpKWyE86acTNO5gf9crtLi7r0/s1600/social-twitter-box-blue-icon.png';" onmouseout= "if (document.images) document.twitter.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaa1VFXRHxHiW2TwJDIOHFOJIAyFXyM03y1i63xqbHcPFUgUtEn7Tr2JR27nqDoUMkC34GGa3ztjKJM1pD2jfwsBIDzqj_lpiUW-wn1slFrm-PEKjh7SzWTm6pyFdFkY0KRe_Aghs1NzY/s1600/social-twitter-box-white-icon.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaa1VFXRHxHiW2TwJDIOHFOJIAyFXyM03y1i63xqbHcPFUgUtEn7Tr2JR27nqDoUMkC34GGa3ztjKJM1pD2jfwsBIDzqj_lpiUW-wn1slFrm-PEKjh7SzWTm6pyFdFkY0KRe_Aghs1NzY/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=  'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDyfRgEFeRXLCsT9rZf9TrlIK0N0_gv2zL8jS3-bXzOKNNtMpQrdWYp8RFY15Tsozqv_sflam4dctAOsqdb6L44G2s4A3gwgOAJ9mOSSyweAgHbCVWbvAfc30E4LB12yRLQ96XVGSxNQ/s1600/social-rss-box-orange-icon.png';" onmouseout= "if (document.images) document.rss.src= 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEC6CVAKrFVRNFVGShT0WIZcq-f3HNVQXecdp6ZXt3eOSqtqNvQS-nPMShbIYDBdeqi3qVBnzA2cwVagCWdohTchwBVn5Ksblm_P_EQjYXKbQp2AU-kuHO6UgA347IWCy1_iZafRhYaY/s1600/social-rss-box-white-icon.png';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIEC6CVAKrFVRNFVGShT0WIZcq-f3HNVQXecdp6ZXt3eOSqtqNvQS-nPMShbIYDBdeqi3qVBnzA2cwVagCWdohTchwBVn5Ksblm_P_EQjYXKbQp2AU-kuHO6UgA347IWCy1_iZafRhYaY/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.