Redes Sociales con efecto color para Blogger

Hoy en día la mayoría de Blogger tratan de aumentar el tráfico de sus blog basándose en las Redes Sociales, por ello recientemente mostré dos entradas Iconos de Redes Sociales en blanco y negro e Iconos de Redes Sociales con efecto zoom.
Ahora os muestro otro gadget de Redes para añadirlo a vuestra sidebar con un efecto hover con los colores característicos de cada una de ellas. Cuenta con cinco botones sociales que incluye Twitter, Facebook, Google Plus,Pinterest y RSS.
Para instalarlo en vuestros blogs tan solo se nesecitaréis 5 minutos siguiendo estos pasos:
1.- Ir a Blogger >> Diseño >> Añadir un gadget.
2.- Seleccione HTML/JavaScript.
3.- Ahora en el cuadro de texto introduzca el siguiente código.

<div id="amor-social-hover">
<div id="links"><a href="http://twitter.com/usuario de twitter" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-GVPx4HMrNDY/UK9uv3rA0iI/AAAAAAAAIO4/yfuiRGXLeVU/s1600/twitter.png" /></div></a>
<a href="http://www.facebook.com/usuario de facebook" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-DX-Bx5WR6zE/UK9whE-OCzI/AAAAAAAAIPg/9k_zjlDPF8s/s1600/FB.png" /></div></a>
<a href="https://plus.google.com/u/0/números del perfil de google+" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-eP0U9g8fm0Q/UK9wYNQ4CmI/AAAAAAAAIPY/UWYbc7e9-go/s1600/google.png" /></div></a>
<a href="http://pinterest.com/nombre usuario de pinterest/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-nEZw_TpzSoU/UK-TOH8OEEI/AAAAAAAAISg/bDcBgt2yEe4/s1600/pin.png" /></div></a>
<a href="http://feeds.feedburner.com/nombre usuario feedburner" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-yOEZQT7it74/UK9wClCPwpI/AAAAAAAAIPQ/EK4CB92xQ98/s1600/rss.png" /></div></a>
</div></div>
<style>.tota { margin-top:7px; }#amor-social-hover{position:relative;width:200px;height:210px;background:#554e4c url("http://4.bp.blogspot.com/-CNgQWNU8Sg4/UK91PeHlvjI/AAAAAAAAIRM/56SruW6DBQ0/s1600/vintage.png");}#amor-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#amor-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#amor-social-hover #links{position:absolute;bottom:0;width:100%;}#amor-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#amor-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#amor-social-hover a.twitter:hover{background:#79dbff;}#amor-social-hover a.facebook:hover{background:#6e9bee;}#amor-social-hover a.google:hover{background:#00be00;}#amor-social-hover a.pinterest:hover{background:#cb2027;}#amor-social-hover a.rss:hover{background:#ffae42;}#amor-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}</style>

Personalización:
1.- Reemplace http://twitter.com/usuario de twitter -con tu nombre de usuario.
2.- Reemplace http://www.facebook.com/usuario de facebook -con tu nombre de usuario.
3.- Reemplace https://plus.google.com/u/0/números del perfil de google+ -con los números de tu perfil.
4.- Reemplace http://pinterest.com/nombre usuario de pinterest -con tu nombre de usuario.
5.- Reemplace http://feeds.feedburner.com/nombre usuario feedburner -con tu nombre de usuario
Todo Listo: Después de la personalización, guarde la plantilla.