En esta ocasión he creado un espectacular truco para tu blog, con el cual agregaras un pack de iconos de suscripción con efecto Zoom al pasar el cursor sobre ellos, el efecto zoom en los iconos es logrado gracias a CSS, mas exactamente por la propiedad hovergallery.

Los iconos sociales se ven de la siguiente manera:

Para agregar este truco a tu blog ve a Diseño, Añadir Gadget, HTML/JavaScript y pega lo siguiente:
<div class="separator" style="clear: both; text-align: center;">
<a class="hovergallery" href="URL de tu cuenta de Google Plus" target="_blank">
<img src="http://4.bp.blogspot.com/-J6FGCxIRNxs/Uy8F_DZ3N9I/AAAAAAAAD0M/lD7cMz_fq_4/s1600/googleplus-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="http://3.bp.blogspot.com/-eyCg8VyhqQI/Uy8F9r60xCI/AAAAAAAAD0E/sQ82sCRQc3Y/s1600/facebook-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Pinterest" target="_blank">
<img src="http://1.bp.blogspot.com/-xD2NvtM-cQ4/Uy8GBUTOXbI/AAAAAAAAD0U/dkh4Io8w3lA/s1600/pinterest-64.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Twitter" target="_blank">
<img src="http://2.bp.blogspot.com/-JtCjmiY5Jl8/Uy8GGiqq9sI/AAAAAAAAD0k/WIXtHNHxOw0/s1600/twitter-64.png" /></a> <a class="hovergallery" href="URL de tu RSS" target="_blank">
<img src="http://1.bp.blogspot.com/-f5sHdCUrFdw/Uy8GDIkqF1I/AAAAAAAAD0c/_-XucshKxIY/s1600/rss-64.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 reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso y guarda los cambios.

Esperamos que te haya gustado este espectacular truco para tu blog y si quieres encontrar los mejores recursos no dudes en volver a visitar Mil Trucos Blogger


9 comentarios

ObeBlog · marzo 23, 2014 a las 5:39 pm

Compartido en Twitter y puestos en mi blog ¡gracias!

VICTOR · abril 24, 2014 a las 9:34 am

Para colocar Youtube? Gracias!!

Luis Ignacio Rodríguez · junio 16, 2014 a las 2:36 pm

Tengo un problema. Resulta que sustituí las imágenes prefijadas por otras que hice yo, pero a la hora de permanecer estáticas se cortan por abajo y la derecha (son también redondas). El resto de movimientos los hacen perfectos.
¿Alguien sabe porqué ocurre eso?

Luis Ignacio Rodríguez · junio 16, 2014 a las 3:03 pm

Ya lo he solucionado. Lo digo por si acaso le ocurre lo mismo a otro: basta con añadir unos pocos píxeles de margen transparente a la imagen (en mi caso, 3).

Muchas gracias por la plantilla, va a las mil maravillas.

Óscar · agosto 14, 2014 a las 3:42 pm

Me encantan tus trucos!! Me van a resultar muy útiles para mi blog. Me gustaría poner estos símbolos pero únicamente facebook, twitter, google plus e instagram. ¿que debo hacer con el código? Mil gracias. Saludos.

Miguel · abril 13, 2015 a las 10:08 am

No me aparecen las imagenes de los iconos sociales, ¿Sigue funcionando?

Miguel · abril 15, 2015 a las 9:36 am

Hoy sorprendentemente funcionan todos.

Deja una respuesta

Marcador de posición del avatar

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