En esta oportunidad te dejare un menu animado de social media para tu blog de blogger.Este integrado con codigo de estilo CSS3 con efecto Hover- que significa que cuando pones el cursor sobre los mismos este se expande.Los colores de estos iconos son atractivos y modernos lo que resalta el diseño de tu plantilla de tu sitio o blog.
Articulo Como añadir iconos sociales con estilo metro
Los elementos envueltos en este tiene caracteristicas que son compatibles con la mayoria de los navegadores de la internet como Safari, Chrome, Mozilla 3.5+, and Opera 9.5+ en una variedad de grados.
Ejemplo:Puedes verlo en Ver Demo
Es simple de añadir a tu blog de blogger solo sigue las siguientes instrucciones.
1.Entra en tu cuenta de Blogger2.Ve a Plantilla>>Editar Html y busca la siguienta etiqueta ]]</b:skin>
3.Copia y pega el siguiente codigo de Css antes de la etiqueta ]]</b:skin>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.freshdesignweb.com/style/ */
body{padding:50px; }
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.freshdesignweb.com/style/ */
body{padding:50px; }
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
4.Ve a Diseño y da click en Añadir un Gadget y luego selecciona Html-Javascript y pega el siguiente codigo.
<ul class="bubblewrap">
<li><a href="#"><img src="http://i41.tinypic.com/mcukoh.png" title="twitter" /></a></li>
<li><a href="#"><img src="http://i40.tinypic.com/k3njf4.png" title="Stmbleupon" /></a></li>
<li><a href="#"><img src="http://i43.tinypic.com/9qb6s9.png" title="myspace" /></a></li>
<li><a href="#"><img src="http://i41.tinypic.com/2zgyj4x.png" title="facebook" /></a></li>
<li><a href="#"><img src="http://i41.tinypic.com/14ac00.png" title="digg" /></a></li>
</ul>
Nota:Luego cambia # por el enlace de tu pagina de estas red sociales y listo.
Chequea Como Añadir Iconos Sociales Giratorios
