En el día de hoy voy a compartir una espectacular caja de suscripciones en redes sociales para tu blog, esta hermosa caja viene con iconos que he diseñado yo, así como también con un espectacular efecto zoom al pasar el cursor sobre las imágenes.

Luego de pelearme un buen tiempo con Photoshop (no soy muy bueno en el manejo de este programa) y luego de uno que otro retoque con CSS, el resultado final ha sido esta hermosa caja de suscripción que les muestro a continuación:

Para agregar este majestuoso gadget en tu blog, debes ir a Diseño, Añadir gadget, HTML/JavaScript y pegar allí el siguiente código:

<div class="separator" style="clear: both; text-align: center;">
 <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="http://3.bp.blogspot.com/-nxlC405RKps/U8WOWnERXLI/AAAAAAAAENQ/790EqkrkHNE/s1600/redes+sociales+1.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Twiiter" target="_blank">
<img src="http://1.bp.blogspot.com/-SxPOAKaf4WE/U8WOVeIIqiI/AAAAAAAAENA/Jdu_W1JHLGE/s1600/redes+sociales+002.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Youtube" target="_blank">
<img src="http://2.bp.blogspot.com/-ArIZkIi7bEg/U8WOVhkTtEI/AAAAAAAAENc/pfnczxNOX_w/s1600/redes+sociales+003.png" /></a> <a class="hovergallery" href="URL de tu RSS FEED" target="_blank">
<img src="http://1.bp.blogspot.com/-QQTmQUgDjxc/U8WOVrG2tJI/AAAAAAAAENE/jj4YTZ6DsrM/s1600/redes+sociales+004.png" /></a>
<a class="hovergallery" href="mailto:TU CORREO ELECTRÓNICO:mailto" target="_blank">
<img src="http://4.bp.blogspot.com/-T7VCUA_TLvs/U8WOWgQ8WsI/AAAAAAAAENU/nD6rxhkd5Ks/s1600/redes+sociales+005.png" /></a></div>
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 1px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>

Ahora solo debes reemplazar lo que está resaltado en color azul por lo que se indica en cada caso y dar clic en guardar.

Espero que les haya gustado este tutorial, y no olvides compartirlo con tus amigos en las redes sociales.


5 comentarios

José Luis Lomas · julio 20, 2014 a las 9:05 am

Muchas gracias, me ha encantado 🙂

Mar Mildred · julio 21, 2014 a las 10:18 pm

¡Hola! ¿Puedo cambiar el icono y la red social?
Saludod

jackaos · agosto 22, 2014 a las 5:06 am

Muy buena pagina, Gracias,

Responder a Mar Mildred Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *