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.