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 🙂
Hayder Juvinao · julio 20, 2014 a las 5:11 pm
José que bueno que te haya gustado.
Saludos
Mar Mildred · julio 21, 2014 a las 10:18 pm
¡Hola! ¿Puedo cambiar el icono y la red social?
Saludod
Hayder Juvinao · julio 22, 2014 a las 10:01 pm
Mildred, para cambiar los iconos de las redes sociales debes buscar lo siguiente:
Para la de Facebook:
http://3.bp.blogspot.com/-nxlC405RKps/U8WOWnERXLI/AAAAAAAAENQ/790EqkrkHNE/s1600/redes+sociales+1.png
Para el de Twitter
http://1.bp.blogspot.com/-SxPOAKaf4WE/U8WOVeIIqiI/AAAAAAAAENA/Jdu_W1JHLGE/s1600/redes+sociales+002.png
Para el de Youtube
http://2.bp.blogspot.com/-ArIZkIi7bEg/U8WOVhkTtEI/AAAAAAAAENc/pfnczxNOX_w/s1600/redes+sociales+003.png
Para el de RSS
http://1.bp.blogspot.com/-QQTmQUgDjxc/U8WOVrG2tJI/AAAAAAAAENE/jj4YTZ6DsrM/s1600/redes+sociales+004.png
Para el de correo electrónico
http://4.bp.blogspot.com/-T7VCUA_TLvs/U8WOWgQ8WsI/AAAAAAAAENU/nD6rxhkd5Ks/s1600/redes+sociales+005.png
Reemplazas las URL que te indiqué por las URL de tus imágenes.
Postdata: Tienes el mismo nombre de una amiga 🙂
Saludos
jackaos · agosto 22, 2014 a las 5:06 am
Muy buena pagina, Gracias,