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="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>
4. Reemplazar con tu nombre de usuario las palabras que se encuentran marcadas en color.
5. Guardar y listo.

¿Les gustó?

Publicar un comentario

0 Comentarios