Agregar Boton de Redes Sociales a Blogger

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 HTMLy 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/AVvXsEiWcuZ08qRjjiI8uZ-6L97gNoj2-krFncrhsID59AcrgKoMf2rvqGkhvFKytobITRvmMd-BKWAxy5n2sSXU3YfMC-K6GosHp-ZZfH4npwAO9NjUP6k4MebKZ07L1LzH-GllG8nl5RLNZX8/" /> <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/AVvXsEgMC2EFaIdEsJT3zLkbJycgKqoOBvOywA06v0oIIsqqBmtq6SoIZc2Sq8qzhU4GBGyeRghMCSY9t9YHtW7HfQ5fih8oZuC789SqOudiiaxMlvyZq5LwoCiRjyFwnr39LOYEYwlpl5SYR8o/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD05ZCvxd3ADXNcil9kSnfUPkg9Um56IupWWYrzbSAAVFM17Y_LULeFMKGpEQaDuNeh790jfbZhV-qJgJISo6A9N3SMLMUp7fmaZz7L0JK1TbXme6fjujHPGpdglGAPqqS7NnwmhlTD9E/" /> <span>Sígueme en Twitter</span></a></li>
</ul>

Para finalizar cambia los nombres de usuario o ID  y listo. Puedes modificar la apariencia cambiando los estilos en las anotaciones que están 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.