Instala botones simple para agregar en redes sociales

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Estos son unos botones muy sencillos pero muy prácticos para que nuestros lectores puedan seguirnos en las diferentes redes sociales. No es nada del otro mundo, sólo son iconos agrupados en una lista que tienen un efecto pushbutton al pasar el cursor sobre ellos.

Los botones son tres: Google +, Facebook, y Twitter, pero se pueden agregar más.

Puedes verlos en esta misma entrada.

• Agrégame en tus círculos
• Hazte fan en Facebook
• Sígueme en Twitter

Para poner estos botones de las redes sociales en tu blog sólo entra en Diseño | Edición de HTML y antes de ]]></b:skin> agrega los siguientes estilos:

/* 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;
}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pega esto:

<ul class="BotonesSociales">
< li><a href="https://plus.google.com/u/0/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVc0_l-onP7NQZAkOz8C7UjdsJz3-8rxC4EfYrGCsTH04n03hRM13KlwC9LxP86FAZnS3mo84cc98oYaVsRu3Xud_6lSgUr-Uj6MK3xmRJGwpmsYRYHFwgztrvvxXNt38_A1zn0blq_6A/" /> <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/AVvXsEhGjcZs1S0vQQ-fHHiahAreIlU55tlxznCwOcUSmWBs98lMfVrTnRIoCVNTMPBHsWgVnYciLDScmaWE6ooTtmbMOhAzaLY7lzD1J0HNI_QGgwMtADA7YAt2V1QBKr4t9AnltBPbv3m7HCQ/" /> <span>Hazte fan en Facebook</span></a></li>
< li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjImdffQa05S154iK8PVKk6TJO3QnxUVt7hhD1iUJbATSO9PTYj42goSEKy48abbnqLsdM8BBZMfH4KfrE3fNcsUOv-iIsoRl8UjU7IGrijts5qzq5yAZx2Q6yBVbC5FX5SnJqotxj-1VQ/" /> <span>Sígueme en Twitter</span></a></li>
< /ul>

Para finalizar cambia los nombres de usuario o ID donde se indica en color rojo y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están de color verde dentro del primer código.

Si quieres agrega más botones sólo añade antes de </ul> una línea como esta por cada botón extra 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>

Y ahora sí, es todo.