Redes Sociais com Efeito Hover

Um gadget simples com um efeito bem legal para seu blog.

Normal

Hover

Vá em Layout => Adicionar um Gadget => HTML/JavaScript

<style>
/* menu hover--------------------------------------------- */
#menuhover {
display: inline;
}
#menuhover li {
list-style-type:none;padding: 0 2px;
}
#facebook1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh53-M04kYbsxE4cxn6kMCfW6ZKiZPZ7p-00FZku04RC8-CGKXbkA3y6dJjybJKCZ9jzenZ9CSp7bIwyFIj35tjm3yJXxbPjZfi4MoaMPpT7DVh2g_9uc94YXRq1jx40IgiJABRddY_es/s1600/rsf1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#twitter1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Fw5kxDhgXunljIeTHbINf-Iz3BKOuwC4FTweSulmMmX6I6CAjUvY202ClkPwdgSS_oUd9PzTxR9PnkwcvkjZ7aD6mSmrn3us7p7pLh-RPdn6Hx7r5g2H8OLF6Coc-OEMYjsiIai1NAo/s1600/rst1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#G1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhzk3ae8mZhtFgIfPzyEIhQbYzKPbIrLWRWadZP0E4tNWM1Pqf6GdUgBrB0LnrAgz3LDZiugTERot9zDFGUP9vbGAmItGk8oFc4NwjnYdSeIhhcT9DDy0AZ68SSGs9Wrntb59c1aPgGc/s1600/rsg1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#Instagram1 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVA5wdOy7mjrD9jkUsVLXs8wShbRnJ1y8-GIn3nOom8GQRhFOMMQNpM7S3R7DInUmZGeP0Du2NZIiBi5ja5QCsomyqSXncskbn0rK87RlVvCidwihamooP_lr6XADz1krtZf-ZD7O2FI4/s1600/rsi1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
#youtube1{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBYiFeX-oaMTFxfD1c4S1GOPodn6xILgM3w4Z-m5hJ4cgoDNBGcbE5c77NkaImx8hSWYQbLlHF5uyFHsr96K2zchXz-GyOzVIbcJTcCeR0CMeRbBKOKyJkAvZL_7i3cdVOIbhEUkx4C5E/s1600/rsy1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
clear: right;
}
/*hover*/
#facebook1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6R10TCdqi6V4nKBhlaBzwJBk_jITKwTYkVq0Dc0ACO62bw3EnZLJr3SwmP2b2qUb-88YOi__UgQcgppZIAlUbvAXU3tLrZ0QFXeyIgeXyhjgn_L9ohMmr9FY2wloCNM36mzcyNkWzzs/s1600/rsf.png)  0 0 no-repeat;
}
#twitter1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia6OiTmFGNoj03rAM2z1Qk9I8ABVrdhoXUG-65gdqmeEn46EHHupj9Bhu6jLWMhOTyQzYTp9qQWURyGHQLGXcWzBbHMFNo_sAvdJGsqPoknq64-kZ_XSTdicnkBv5yuxFlaXLyrco1ehM/s1600/rst.png)  0 0 no-repeat;
}
#G1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMwcWS8RTcadKmvqgzQur8jEd7asftIej2I0lNyRN1QfRpgZrdQsgT8fqTT8oxAkEyPAfQnQLm3ijnl18hLi2YYhkg_zAufhAokxlXjXJjtKTDIfaVrDnqEV4amKHO6CcUZ-1kA0YeaFo/s1600/rsg.png) 0 0 no-repeat;
}
#Instagram1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZgrOXZEmYxBnJ6YIrtFQ_gv2d4LEu2h27q-ceQij4vi68CJ0dWc-vlB9zoUip8Jgx-6_rA6wmRKPyihCB8WnXvQdIaj6b2s2tNbJYhH2oUSE5dtOKLAOcVnMRoEHl51TdfyeF2nAW24/s1600/rsi.png) 0 0 no-repeat;
}
#youtube1:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNvoPgcA_DzmnTgDp0Xn4ZYTEKXHzl8cDJxiT9TNl2XvG4avsXvNolzRutIdVS9blw9qhfuUDM2rpkt1iaIspolPQAKJkZj2CzTF9eoSJ2fx1CQGURFeb8z-53FPmAGD4RsTQbfh5onmM/s1600/rsy.png) 0 0 no-repeat;
}
</style>
<div id="menuhover">
<ul>
<li><a href="ENDEREÇO DO FACEBOOK" id="facebook1" target="_blank" title="Facebook"></a></li>
<li><a href="ENDEREÇO DO TWITTER" id="twitter1" target="_blank" title="Twitter"></a></li>
<li><a href="ENDEREÇO DO G+" id="G1" target="_blank" title="Siga-me no G+"></a></li>
<li><a href="ENDEREÇO DO INSTAGRAM" id="Instagram1" target="_blank" title="Instagram"></a></li>
<li><a href="ENDEREÇO DO YOU TUBE" id="youtube1" target="_blank" title="You Tube"></a></li>
</ul>
</div>

***Para centralizar use: margin:left ou margin:right.
      Em negrito : coloque o endereço do seu perfil
      Se quiser mudar as imagens: faça as modificações nas partes que estão de             vermelho