26/11/14

Caja de subscripcion redes sociales con efecto zoom

Imagen de http://www.miltrucosblogger.info


Estéticamente es muy bonita y como los demás trucos, muy sencillo de lograr.

 Diseño - Elementos de página - Añadir gadget - Html

Pegar 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuONithzqpnpQEkcguY1cG0PEqwN_QmVnZ9-WtDSB5VDYD5r9Lmy0-PG9mHjPYRLIoksecXmBv2NmeBfxpXq5NsPvJf771XCO2mPC1h3uE2RsWKYQ7gitF3mP4YIx-yzGuz0HoOtjKdIY/s1600/redes+sociales+1.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Twiiter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaBkEJ6qvJXPAExby4GRRweVuZSqw-snG_s48awy_hRJMNFrnEMiadEKAcR_mb6jFRwDpKZbKoZnVnrsLGadLs5OEKjGU3jYplDIpB-efS3RwdDclEIJTQTWkYXG_XLaHdXma-MkdHzgQ/s1600/redes+sociales+002.png" /></a><a class="hovergallery" href="URL de tu cuenta de Youtube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYNANaHBC0WlurBLG4xu75vIKGeGZXkhEjzjWipm39SAIbSHUUbExIU6O0agBe8uiljB-gr9ZsQQozQ6LefAyeJHTljYA9YSDTPjIoKSJT3Bz6HNrYEXyDap-xnuc1xE5QYKsPINw3nk/s1600/redes+sociales+003.png" /></a> <a class="hovergallery" href="URL de tu RSS FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiajBLE3_YLKvhyphenhyphentMfaT4gtEFVt9k3SZPDm4R9c7hx-cDh38DqyN0SZZW083cCEg44C0RgIn1JuqgPTr2Ox_VXVPu-dBbjggAMhgU1uhgSTnQe1np9280DvcJoMBTvaMwkLlyvNgkMk-Rg/s1600/redes+sociales+004.png" /></a><a class="hovergallery" href="mailto:TU CORREO ELECTRÓNICO:mailto" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFVcbKdNtYMTMRNzKsX4Zu4fX774N7rAakfIyjF2xig42Z_uAO4pBg-bvyrFwH8_JYSaxp6JNKywwAmHe9t_kCOsDaSgRKqs7EzZDbWKF8neg915jqNDpvOCEdAEaUmrta062kiONMItI/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 tenéis que reemplazar lo que está en azul por vuestros datos y guardar.
Espero que os guste :)

No hay comentarios:

Publicar un comentario