Agrega iconos sociales en tu blog

Tal vez los botones de redes sociales publicados anteriormente no te gustaron y estuviste buscando por iconos sociales más elegantes. Si no encontraste ninguna opción de iconos que te gustaran, aquí te dejaremos unos cuantos que podrás agregar a tu blog fácilmente.


Para agregar los botones, tienes que ir a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y después agregar lo que se indica en cada opción de icono que quieres.


Opción 1


Agrega en HTML/Javascript lo siguiente:

<style type="text/css">
ul#m-soc5{  margin:19px 0 0 10px; padding:0; width:220px;
height:60px}
ul#m-soc5 li{list-style:none; margin:4px; padding:0; float:left;
border:none}
ul#m-soc5 li
a{background:url(http://4.bp.blogspot.com/-X9oXk8iBWxc/T1Ozlf33ReI/AAAAAAAAAIo/aZiRS-V-H5w/s1600/Icono+1+-+Ayuda+B.png)
no-repeat 0 0; margin:0; padding:0; display:block;
position:relative; width:33px; height:33px; overflow:visible}
ul#m-soc5 li a.twitter{background-position:0 0}
ul#m-soc5 li a.facebook{background-position:-33px 0}
ul#m-soc5 li a.google{background-position:-66px 0}
ul#m-soc5 li a.youtube{background-position:-99px 0}
ul#m-soc5 li a.rss{background-position:-132px 0}
ul#m-soc5 li a span{background:#555; position:absolute; top:-5px; left:-10px;width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none;border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}
ul#m-soc5 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-28px}</style>
<ul id="m-soc5"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span>YouTube</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li>
</ul></ul>

Tienes que cambiar todos los # por el link indicado ahí. También puedes editar el texto del tooltip (los otros nombres en verde), pero no es necesario si no quieres.
Opción 2

Agrega en HTML/Javascript lo siguiente:

<style type="text/css">
ul#m-soc6{  margin:19px 0 0 10px; padding:0; width:190px; 
height:55px}
ul#m-soc6 li{list-style:none; margin:4px; padding:0; float:left; 
border:none}
ul#m-soc6 li a{background:url(http://1.bp.blogspot.com/-TQBpVoA_y0I/T1OzkRY7sYI/AAAAAAAAAIg/TPq-9Z8KpBQ/s1600/Icono+2+-+Ayuda+B.png) no-repeat 0 0; margin:0; padding:0;
display:block; position:relative; width:32px; height:32px;
overflow:visible}
ul#m-soc6 li a.twitter{background-position:0 0}
ul#m-soc6 li a.facebook{background-position:-32px 0}
ul#m-soc6 li a.google{background-position:-64px 0}
ul#m-soc6 li a.rss{background-position:-96px 0}ul#m-soc6 li a.twitter:hover{background-position: 0 -32px;}ul#m-soc6 li a.facebook:hover{background-position: -32px -32px;}ul#m-soc6 li a.google:hover{background-position:-64px -32px;}ul#m-soc6 li a.rss:hover{background-position:-96px -32px;}ul#m-soc6 li a span{background:#555; position:absolute; top:-5px; left:-10px; width:auto;opacity:0; padding:3px; text-align:left; color:#fff; filter:alpha(opacity=0); white-space:nowrap;text-decoration:none; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}ul#m-soc6 li a:hover span{opacity:.7; filter:alpha(opacity=70); top:-27px}</style>
<ul id="m-soc6"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="rss" href="#"><span>Suscríbete</span></a></li></ul>

Tienes que cambiar todos los # por el link indicado ahí. También puedes editar el texto del tooltip (los otros nombres en verde), pero no es necesario si no quieres.
Opción 3

Agrega en HTML/Javascript lo siguiente:

<style type="text/css">
ul#m-soc7{margin:18px 0 0 10px; padding:0; width:280px;
height:66px}
ul#m-soc7 li{list-style:none; margin:4px; padding:0; float:left;
border:none}
ul#m-soc7 li a{background:url(http://2.bp.blogspot.com/-pZrsElcp2oQ/T1OzmQABk0I/AAAAAAAAAIw/VU8br04jCZo/s1600/Icono+3+-+Ayuda+B.png) no-repeat 0 0; margin:0; padding:0;
display:block; position:relative; width:48px; height:48px;  
overflow:visible}
ul#m-soc7 li a.twitter{background-position:0 0
ul#m-soc7 li a.facebook{background-position:-48px 0}
ul#m-soc7 li a.google{background-position:-96px 0}
ul#m-soc7 li a.youtube{background-position:-144px 0}
ul#m-soc7 li a.rss{background-position:-192px 0}
ul#m-soc7 li a.twitter:hover{background-position:0 -48px}ul#m-soc7 li a.facebook:hover{background-position:-48px -48px}ul#m-soc7 li a.google:hover{background-position:-96px -48px}ul#m-soc7 li a.youtube:hover{background-position:-144px -48px}ul#m-soc7 li a.rss:hover{background-position:-192px -48px}ul#m-soc7 li a span{background:#555; position:absolute; top:-10px; width:auto; left:0;opacity:0; padding:3px; text-align:left;text-decoration:none; color:#fff; filter:alpha(opacity=0); white-space:nowrap; border-radius:3px; font-size:12px; -webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}ul#m-soc7 li a:hover span{opacity:.8; filter:alpha(opacity=80); top:-24px}</style>
<ul id="m-soc7"><li><a class="twitter" href="#"><span>Twitter</span></a></li><li><a class="facebook" href="#"><span>Facebook</span></a></li><li><a class="google" href="#"><span>Google+</span></a></li><li><a class="youtube" href="#"><span style="border:0;">YouTube</span></a></li><li><a class="rss" href="#"><span style="border:0;">Suscripción</span></a></li></ul>

Tienes que cambiar todos los # por el link indicado ahí. También puedes editar el texto del tooltip (los otros nombres en verde), pero no es necesario si no quieres.
Esas son todas las opciones por ahora, luego se actualizará esta entrada y se pondrán más.