Agregar botones de redes sociales

Son unos botones muy sencillos, fáciles de modificar y realmente prácticos para que los lectores de tu blog te puedan encontrar en las diferentes redes sociales. Son sencillos y no son nada de otro mundo, simplemente son iconos agrupados en una lista que tienen el efecto pushbutton al pasar el cursor sobre ellos.

Los botones son de tres diferentes redes sociales, las cuales son: Google+, Facebook y Twitter, pero se pueden agregar más.

 

Para poner los botones en el blog, sólo entra a Diseño > Edición de HTML y antes de ]]></b:skin> agrega lo siguiente:

/* Botones de Redes Sociales
----------------------------------------------- */
.BotonesSociales li {
border:1px solid #6E6E6E !important; /* Color del borde */
padding:5px !important;
margin:0 5px 6px 5px;
background:#ccc; /* Color de fondo */
list-style:none;
}
.BotonesSociales li a {
font-weight:bold; /* Texto en negrita */
text-decoration:none;
color:#1C1C1C !important; /* Color del texto */
}
.BotonesSociales li a:hover {
color:#2E9AFE !important; /* Color del texto al pasar el cursor */
position:relative;
top:1px;
left:1px;
}
.BotonesSociales span {
padding-left:10px;
}
.BotonesSociales img {
vertical-align:middle;
border:0;
}

Después de agregar lo anterior, entra a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y ahí pega lo siguiente:

<ul class="BotonesSociales">
<li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVhqz63UeTiQi7SWxj5cbsqKuuf0MCq-_fCNUhyvwpwAQwwzzKCuDSvEq9mP0CwRCBoGnFR6m-waAx1CiMZOE-Yiol1rikdslpuXYFm0GRNGZMkneLeHnWL5gA2pS7gaccxVkJAeFFq3c/" /> <span>Agrégame en tus círculos</span></a></li>
<li><a href="http://www.facebook.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5j17hzOWuZpHvnq6ptXpAHL3Yj5_ZEBZBl9DnKGFArF-TCT8OTuI1crwoH5wry8XmRjeZDwalkEPrZ_VgjJbguP1RZfzKD7VWnE86aOoF7yKFwMRfYIE1_eS97JobrDm51eLGxFh6udY/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4m2IUoAhvpsDVbl7UqCDNSVg5pEFCs9wrJPCWHDNLR9oULMXjUTdSVWcSP3U_OwttK9l_j9A6GI7gT1s9F-EqvHQt797WLDRX6WId9mgT7775m5Z7hRaLnSPZm1dxXAKyfIFpXr5fTVg/" /> <span>Sígueme en Twitter</span></a></li>
</ul>

Para finalizar, cambie el nombre de usuario donde corresponde y listo. También puedes modificar su apariencia cambiando los estilos en las anotaciones en color verde en el primer código.

Si quieres añadir otra red social, sólo añade antes de </ul> el siguiente código cambiando la url del enlace, la url de la imagen y el texto:

<li><a href="URL del enlace"><img src="URL de la imagen" /> <span>Texto</span></a></li>