Hola taringueros hoy les vengo a enseñar a poner un gadget para Blogger con botones para que te sigan en las redes sociales como Facebook , Twitter y mas.
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.
Si tenes un blog unite