Magazine

Iconos de Redes Sociales con efecto zoom para blogger

Publicado el 13 febrero 2013 por Amorsevillista @amorsevillista
iconos de redes sociales
Anteriormente vimos como colocar unos Iconos de Redes Sociales en blanco y negro y ahora os muestro otros con efecto zoom.
Al igual que el anterior este gadget muestra una lista de íconos sociales que enlazan hacia cada uno de vuestros perfiles, pero a su vez estos íconos, ya colocados en el gadget, cambian cuando alguien pasa el cursor sobre ellos creando un efecto zoom, siendo muy atractivos para curiosos que no están acostumbrados a este tipo de diseños.
Para instalar estos íconos tendrás que seguir los siguientes pasos:
.- Entra al panel de control de tu blog, y luego a Diseño-añadir un gadget-HTML/Javascript, copia y pega el código de abajo.

Iconos de Redes Sociales con efecto zoom para blogger

<style>.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px;
height: 60px;
border:0;
margin-right: 12px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
} </style>
<div class='bubblewrap'>
<ul>
<li><a href='mailto:tuemail'><img src='https://lh6.googleusercontent.com/-n6jKMgYOMc8/URvdgAiS3dI/AAAAAAAAKL8/HU09XAlI3Cc/s165/digg_thumb%255B2%255D.png' title='Enviar Email'/></a></li>
<li><a href='dirección perfil google'><img src='https://lh5.googleusercontent.com/-WXbZTOObMx0/URvdinin59I/AAAAAAAAKMI/kauwmGDehPA/s165/goo.png' title='Síguenos en Google+'/></a></li>
<li><a href='dirección perfil facebook'><img src='http://lh4.ggpht.com/_7Y9pl24WpQY/TKYkLgpPqKI/AAAAAAAAEpE/MoiG31eV3gg/facebook_thumb%5B2%5D.png' title='Síguenos en Facebook'/></a></li>
<li><a href='dirección perfil twitter'><img src='http://lh6.ggpht.com/_7Y9pl24WpQY/TKYkGo-lIBI/AAAAAAAAEo0/v8uQduCj814/twitter_thumb%5B2%5D.png' title='Síguenos en Twitter'/></a></li>
<li><a href='dirección del feed '><img src='http://lh5.ggpht.com/_7Y9pl24WpQY/TKYkOKs2gnI/AAAAAAAAEpM/atV8KDhqKcI/rss_thumb%5B2%5D.png' title='Ver RSS'/></a></li>
</ul>
</div>


Configuración:
EMAIL: cambiar donde pone "tuemail"
GOOGLE+: cambiar donde pone "dirección perfil google"
FACEBOOK: cambiar donde pone "dirección perfil facebook"
TWITTER: cambiar donde pone "dirección perfil  twitter"
RSS: cambiar donde pone "dirección del feed"


Volver a la Portada de Logo Paperblog

Sobre el autor


Amorsevillista 438 veces
compartido
ver su blog

El autor no ha compartido todavía su cuenta

Dossier Paperblog