Widget de Redes Sociales con efectos de color para Blogger

Esta vez les traemos un widget que fue compartido por Amor Sevillista, y que muestra las redes sociales con atractivos efectos de colores, tal como se muestra abajo:

Para agregarlo en Blogger es muy sencillo:

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp7K5PGFDHZBy_NpSh1uY2nYoizWRN1782GyzSZCAxU4XJKMS5gcRE37kVhOUKfPw2cedORUxjtpnbVCMQ0uOn5jwuFMol8KwHVSAbUKpAu2zzI7klqENq8y0kPMPbjRhRMX1dL5TiDOY/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCK8m_A9mvM0H1j5BAkyqtztP_jAYlmAZ66Mmol56idnKtUUU0SXp7JttGmsxP65zHeDhHZw5aiiQUwNtR-ve5uBQ_EUpry4arXcqLZyqBIRgJeK3EZ9ce63jWlI0dX0nkzKePAhHpaGs/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilSUFDSHktFZHshkDjcVrWbduqTMS5_5C3bFAJp-EgPQQ7XGkMTkvgqhcDIdT2SuPjndQaBbUwKbdvbCrsLNXx6QyBFBzlFXBMdf1RGm0UAIyy4MV9-rAnKOWH_0HyAOOjamxLlIbMhN4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LzKOvYC3GnjaMKBOO6DQRwpYiCfdslygGHMfuDvyfEGucWcEDumFSOIzhvPmTkz5vnoT4eITlnyXDV-JjFsa9-znZv8m7_IXhn4RC5nMrfLpI9rBOLXEsoWIyaP3um9VY5-1lNFIPTw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oLYw2LqCstMrA7n0qO_40R4HY-mkqP_sHNZ76bwDJqpGnW-RA1gwL9r8ZTEiBVVVjTgc8gtxNtjuqo-7qxAynfZMv6oJHsx0aKspsUIGmUOqsdKF-w4t03yewV46zvwdPv7Ucgbn5mU/s1600/rss.png" /></div></a>
</div></div>
<style>.tota { margin-top:7px; }#amor-social-hover{position:relative;width:200px;height:210px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZR4qniwpqm4Ebj0b6zXsgnUdTydfCYraRlTC_pBrPbdFT_-fouN1LKHswPqLYQZ1UdyntyC-_wAXLMHF4lQiDDhje6sn5v2M6TyClg1MA1ofkFpr3KTjV2GaGHez4E_y2UoGV12FQdk/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>

4. Reemplazar con tu nombre de usuario las palabras que se encuentran marcadas en color.
5. Guardar y listo.

¿Les gustó?

Comparte:

Tweet