Simples botones sociales con CSS para Blogger

Hola, volviendo a escribir  después de un laaaaargo tiempo en Mil Trucos Blogger, les traigo un diseño espectacular de un de los elementos que núnca deben faltar en tu blog. Los Botones Sociales.

Este genial diseño se ha creado a baso de puro CSS, lo que significa que no afectará casi en nada la carga de tu blog.

Como podrás observar, estos botones están hecho con un efecto de degradado de abajo hacia arriba, algo simple y atractivo para los ojos de cualquiera.

Ideal para la cabecera o pie de página de tu blog.

Si quieres verlos en acción, deberás hacer clic en este enlace.

Ahora, para añadirlos, lo haremos de un solo paso ¿cómo?, insertando el código CSS junto con el HTML en un gadget. Para eso, nos dirigimos a Añadir Gadget, HTML/Javascript y pegamos lo siguiente:

<style type="text/css">

.boton{
margin: 8px;
width: 500px;
}

.boton a{
font-family: arial, sans-serif;
text-decoration:none;
font-size: 13px;
color: #777;
text-shadow: 1px 1px 0px withe;
background: #ffffff; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
padding: 6px 12px;
}

.button a:hover{
background: #ffffff; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #ffffff 0%, #eee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#eee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#eee 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#eee 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#eee 100%); /* W3C */
-moz-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px 0px rgba(0,0,0,0.4);
}

.boton a:active{
background: #dfdfdf; /* Navegadores antiguos */
background: -moz-linear-gradient(top, #dfdfdf 0%, #f1f1f1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dfdfdf 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dfdfdf 0%,#f1f1f1 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #dfdfdf 0%,#f1f1f1 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#f1f1f1',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #dfdfdf 0%,#f1f1f1 100%); /* W3C */

-webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.2) inset, 0px 1px 1px 0 rgba(255,255,255,1);
-moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.2) inset, 0px 1px 1px 0 rgba(255,255,255,1);
box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.2) inset, 0px 1px 1px 0 rgba(255,255,255,1);

}

.boton a > img{
padding-right: 8px;
position: relative;
top: 2px;
}

</style>

<div style="text-align:center"> <span class="boton facebook">
<a href="#"><img src="http://3.bp.blogspot.com/-jCJMhztj1wQ/VTBfrkKs0xI/AAAAAAAAFrk/mZv_5Vi4Ss8/s1600/facebook.png">Facebook</a>
</span>

<span class="boton twitter">
<a href="#"><img src="http://1.bp.blogspot.com/-nLptkLkHivQ/VTBfK-CVKtI/AAAAAAAAFrU/BcBiNId_dAA/s1600/1429251363_twitter-32.png">Twitter</a>
</span>

<span class="boton googleplus">
<a href="#"><img src="http://4.bp.blogspot.com/-v44h-SwVqH0/VTBfxSujKeI/AAAAAAAAFrs/Pscn6pjI7HY/s1600/1429251599_google-plus-32.png" >Google+</a>
</span>

<span class="boton youtube">
<a href="#"><img src="http://1.bp.blogspot.com/-CgUdMeEUs80/VTGXpIgSJ_I/AAAAAAAAFsE/gmTVov6G8mQ/s1600/1429331435_678098-social-youtube-32.png">Youtube</a>
</span>

<span class="boton pinterest">
<a href="#"><img src="http://2.bp.blogspot.com/-Yb-65Rst8v0/VTGoNxgpJMI/AAAAAAAAFsc/RuBzIqhB728/s1600/1429335444_pinterest-32-red.png44_pinterest-32-red.png">Pinterest</a>
</span></div>

Ya sabes que el «#», lo tendrás que reemplazar por la URL  de la red social a la que le corresponde. Si quieres eliminar una red social, tendrás que borrar lo que se encuentra entre <span class… y </span>. En caso de querer agregar más redes sociales, añade lo siguiente antes de la última etiqueta (</div>).

<span class="boton ">
<a href="#"><img src=" URL DE LA RED SOCIAL ">Nombre de la red social</a>
</span>

Tan solo reemplaza lo que se encuentra en negrita por lo que indica, y todo está «ok».

Con esto, finalizo este tutorial, espero que les haya gustado y que no tengan problemas en aplicar los pasos. Hasta el siguiente artículo.