Nueva interfaz de Social Metro-Style para su Blogger

Hola Amigos! En este tutorial compartire el truco o widget de compartir en medios sociales  con un efecto de animacion.Este es un widget de la nueva generacion de widgets como los diseñados de Window8.Hara la apariencia de tu blog mas agradable y atractivo.Lo puedes andir atu blog de blogger siguiente estos cortos y simples pasos.

Ejemplo diseno:Puedes verlo en vivo en este sitio en barra lateral.

1. Entra en tu cuenta de Blogger
2.Selecciona la opcion diseño
3.Da Click en Añadir un Gadget
4.Selecciona HTML/JavaScript de la lista
5.Copia y pega el siguiente codigo en espacio provisto en HTML/Javascript.

<div class="MH" id="MH">
<ul id="MH-social">
<li><a class="fb" href="Tu Enlace De Pagina De-FACEBOOK-Aqui "></a></li>
<li><a class="tw" href="Tu-Enlace-De-TWITTER-LINK-Aqui"></a></li>
<li><a class="gp" href="Tu-Enlace-De-Profile-De-GOOGLE PLUS-Aqui"></a></li>
<li><a class="fd" href="Tu-Enlace-De-RSS-FEED-Aqui"></a></li>
</ul>
</div>
<style>
#MH-social{width:305px;float:left;margin-top:10px}#MH-social li{position:relative;cursor:pointer;padding:0!important}#MH-social .fb,.tw,.gp,.fd{position:relative;-moz-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;z-index:5;display:block;float:left;margin:1px}#MH-social .fb{width:150px;height:152px;background:url(//goo.gl/6xmUk) no-repeat center center #3b5998}#MH-social .tw{width:150px;height:74px;background:url(//goo.gl/oyiFK) no-repeat center center #3b5998}#MH-social .gp{width:150px;height:74px;background:url(//goo.gl/oT0kF) no-repeat center center #3b5998}#MH-social .fd{width:302px;height:74px;background:url(//goo.gl/ncoLY) no-repeat center center #3b5998}#MH-social li:hover .fb{-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out;background:url(//goo.gl/MH8AP) no-repeat center center #3468b6}#MH-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #4099ff;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #e44524;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}#MH-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #f60;-moz-transition:all .1s ease-in-out;-webkit-transition:all .1s ease-in-out}
</style>

Cambie todo lo que esta en color ROJO con tus enlaces Medio Sociales

Save It.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati