Mil Trucos Blogger

Iconos Sociales con efecto de bordes redondeados

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hola amigos de Mil Trucos Blogger, en el día de hoy vamos a ver como añadir hermosos iconos sociales con efecto de bordes redondeados, perfectos para añadir allí los enlaces de los sitios y perfiles sociales de tu web.

Iconos Sociales con efecto de bordes redondeados

Los iconos son los siguientes:

 




Para añadir estos iconos en tu sitio web solo debes ir a Diseño, Añadir gadget, HTML/JavaScript y pegar el siguiente código:

<div class="ads">
 <a href="URL DE TU FACEBOOK" target="_blank" title="¡Facebook!"><img class="redondeado" src="http://3.bp.blogspot.com/-VfVwQR4F62c/ViP-eC8_75I/AAAAAAAAGSk/kh7Wr9AkHWc/s1600/Facebook_64x64x32.png" /></a>
 <a href="URL DE TU TWITTER" target="_blank" title="¡Twitter!"><img class="redondeado" src="http://4.bp.blogspot.com/-cOpUNJcBdxM/ViP-lksCQkI/AAAAAAAAGS0/V1_cM6GUvtE/s1600/Twitter_64x64x32.png" /></a>
 <a href="URL DE TU PINTEREST" target="_blank" title="¡Pinterest!"><img class="redondeado" src="http://1.bp.blogspot.com/-DZWjuPcYS2s/ViP-ppmr2uI/AAAAAAAAGS8/g60M3Vhctfw/s1600/Pinterest_64x64x32.png" /></a>
 <a href="URL DE TU GOOGLE+" target="_blank" title="¡Google +!"><img class="redondeado" src="http://2.bp.blogspot.com/-rsiT9ByQTbo/ViP-i_0h7mI/AAAAAAAAGSs/prsdkfqsELM/s1600/GooglePlus_64x64x32.png" /></a>
 </div>
 <style type='text/css'>
 .redondeado {
 border-radius: 50%; /* Borde redondeado */
 box-shadow: 0px 0px 15px #000; /* Sombra */
 padding:0;
 border:0;
 -moz-transition: all 1s;
 -webkit-transition: all 1s;
 -o-transition: all 1s;
 }
 .redondeado:hover {
 box-shadow: 0; /* Con esto eliminamos la sombra */
 border-radius: 0; /* Con esto eliminamos el borde redondeado */
 -moz-transition: all 1s;
 -webkit-transition: all 1s;
 -o-transition: all 1s;
 cursor:pointer;
 }
 </style>

Ahora reemplaza lo resaltado en color azul por lo que se indica en cada caso, ya solo queda guardar los cambios.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo