Widget de Redes Sociales con efectos de color para Blogger

lunes, 25 de febrero de 2013

Enviar
print this page
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ó?
Comparte:

0 comentarios:

Publicar un comentario

Deja tus dudas o recomendaciones por aquí.

Addthis

 
Design by Herdiansyah Hamzah | Published by Borneo Templates | Powered by Blogger.com. Traducido al español por Blogarizate
© Copyright 2011-2013 Blogarizate Todos los derechos reservados.