:::: MENU ::::
  • Desarrollo Web - Responsive Design

  • Easy to Customize

  • Customizable fonts.

lunes, 5 de agosto de 2013



Hoy les traigo un nuevo gadget para que puedan mostrar redes sociales en su blog de blogger, en esta ocasion es un estilo parecido al metro de windows 8 y cuenta con las redes sociales de Facebook, Twitter, Google+, y Fedd Rss.

El estilo es igual al de la imagen pero tambien puedes ver un ejemplo y verlo funcionar en este blog de prueba:


  • Para agrega este gadget solo debes ir a Diseño > agregamos un nuevo gadget de tipo HTML/JAVASCRIPT y pegamos el siguiente codigo:

<style> #WG-social { width:305px; float:left; margin-top:10px; } #WG-social li { position:relative; cursor:pointer; padding:0!important; } #WG-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; } #WG-social .fb { width:150px; height:152px; background:url(//goo.gl/6xmUk) no-repeat center center #3b5998; } #WG-social .tw { width:150px; height:74px; background:url(//goo.gl/oyiFK) no-repeat center center #3b5998; } #WG-social .gp { width:150px; height:74px; background:url(//goo.gl/oT0kF) no-repeat center center #3b5998; } #WG-social .fd { width:302px; height:74px; background:url(//goo.gl/ncoLY) no-repeat center center #3b5998; } #WG-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; } #WG-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; } #WG-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; } #WG-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> <br /> <div class="WG" id="WG"> <ul id="WG-social"> <br /><a href="http://www.tutoriales2010.blogspot.mx/"></a> <li><a class="fb" href="http://www.blogger.com/URL-FACEBOOK" target="_blank"></a></li> <li><a class="tw" href="http://www.blogger.com/URL-TWITTER" target="_blank"></a></li> <li><a class="gp" href="http://www.blogger.com/URL-GOOGLE-+" target="_blank"></a></li> <li> <a class="fd" href="http://feeds.feedburner.com/TU-FEED" target="_blank"></a></li> </ul> </div> <br /> <a href="http://www.tutoriales2010.blogspot.mx/"></a>


  • Ahora solo basta con modificar las partes en color ROJO por cada uno de los links de nuestras redes sociales y listo! guardamos nuestro trabajo. 
Si tienes alguna duda no dudes en dejarme un comentario. También puedes visitar los siguientes enlaces que también contienen gadgets de redes sociales...



4 comentarios:

Publicar un comentario

¿Necesitas una pagina web? Contáctanos