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...
:-?
ResponderBorrar¿Alguna duda?
Borrarme puedes regalar el codigo de tu widget de google+ que tienes en tu blog? gracias amigo
ResponderBorrar:-) aqui lo tienes solo debes cambiar el id de tu cuenta ...
Borrar<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="255" data-href="//plus.google.com/TU ID" data-theme="dark" data-rel="publisher"></div>
<!-- Place this tag after the last widget tag.
<script type="text/javascript">
window.___gcfg = {lang: 'es-419'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script> -->