Agregar botones de redes sociales en el blog

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/AVvXsEjYoFmtfKW-Qhpon3YZUi1O0tr0s43PeCrjKM-wLePEnd2z54mMjNtM48D8visegyFsLA2GFkKrgXNFShf3Hf7Gm0LRkTpCY3v3ZGxRMnVxPibVPguNqzDHKlyKoyYH_lAhuUoU7efS1Sg/" /> <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/AVvXsEg4g96mCEqQ2bO8W_2QcI1yHuWPcsZtcUH7spw0BbDjYjQt_VR7noAUzdAme1Hm0Nful_RmzIYxaB8w3UNxCTnUfzTMfVQayupMkOiq60xeHWx6SKBijkRn5BlRVhLqNiFDtEyspCe0Kw4/" /> <span>Hazte fan en Facebook</span></a></li>
<li><a href="http://twitter.com/usuario"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0TAuayuSaOWEWsKPwgwtqUFUHcAnRNg6b3P47bbljkRLBDhPYbMpu5Ko_M62uKJ8d43qMBK0X0kdlRGs10BI_rpDRS99ULC1tH0tvPKvXz3LDJSo0nusLl6eaabDnQRoc1uOxg7MZLk/" /> <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.