Añadir botones a redes sociales

Han sido varias las preguntas sobre la forma de añadir los iconos de redes sociales en la sidebar y no es ningún misterio todo lo contrario, de forma muy simple los añadiremos paso a paso.

Lo primero que haremos será crear una clase para los botones y añadir los estilos a esa clase, para ello nos situamos antes de ]]></b:skin> y añadimos:

#redes-sociales {

text-align: center;

padding:15px;

border: 1.9px dashed #C0C0C0;

}

Con eso estamos diciendo que el contenido dentro del bloque llamado redes-sociales se posicionará centrado y tendrá a su alrededor un espacio de separación con el borde 25px. Para saber si está centrado añadimos un borde que luego podemos quitarle.

Ahora vamos a plantilla de diseño y editamos un nuevo gadget de HTML en su interior añadimos:

<div id="redes-sociales">

<a target="_blank" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" title="Suscribirse" type="application/rss+xml"><img alt="rss" style="border:0" src="url-imagen-Feed" /></a>

<a target="_blank" href="http://twitter.com/tu-nombre-twitter" title="Twitter">

<img alt="en Twitter" src="url-imagen-Twitter" />

</a>

<a target="_blank" href="http://www.facebook.com/profile.tu-perfil-facebook" title="Facebook">

<img alt="en Facebook" src="url-imagen-Facebook" />

</a>

<a target="_blank" href="http://www.youtube.com/user/tu-nombre" title="YouTube">

<img alt="YouTube" src="url-imagen-YouTube" />

</a>

</div>

Donde href es la dirección que sustituimos por cada url que corresponda o copiamos la url de la barra del navegador de la página que vamos a enlazar y reemplazamos la que tenemos por la que copiamos.

En url-imagen añadimos cada imagen en relación con el sitio que vamos a enlazar.

Si queremos que muestre opacidad y al pasar el cursor desaparezca en la hoja de estilos añadimos entonces:

#redes-sociales {

text-align: center;

padding:15px;

border: 1.9px dashed #C0C0C0;

}

a.redes-sociales img {

filter:alpha(opacity=40);

opacity: 0.4;

}

a.redes-sociales:hover img {

filter:alpha(opacity=100);

opacity: 1.0;

}

Y en el gadget los enlaces.

<div id="redes-sociales">

<a class="redes-sociales" href="http://feeds2.feedburner.com/tu-nombre-feedburner" rel="alternate" target="_blank" title="Suscribirse" type="application/rss+xml"><img alt="rss" border:0="" border="0" src="url-imagen-Feed" /></a>

<a class="redes-sociales" href="http://twitter.com/tu-nombre-twitter" target="_blank" title="Twitter"> <img alt="en Twitter" border:0="" border="0" src="url-imagen-Twitter" /></a>

<a class="redes-sociales" href="http://www.facebook.com/profile.tu-perfil-facebook" target="_blank" title="Facebook"> <img alt="en Facebook" border:0="" border="0" src="url-imagen-Facebook" /></a>

<a class="redes-sociales" href="http://www.youtube.com/user/tu-nombre" target="_blank" title="YouTube"> <img alt="YouTube" border:0="" border="0" src="url-imagen-YouTube" /></a>

</div>

Aumentando o disminuyendo el valor de opacity conseguiremos más o menos opacidad.

De esa forma le estamos diciendo que la imagen tiene de opacidad 40 pero al pasar el cursor esa opacidad desaparece porque aumentamos a 100.

Para que los botones salgan en horizontal y no vertical debemos añadirlos en ese orden, es decir un código de enlace seguido de otro y separado por un espacio.