Iconos sociales con Hover efecto Fade Para tu blog

Les traigo unos iconos Sociales bien coloridos para que los pongan en su Blog es muy sencillo de configurar y no requiere mucha experiencia Les dejo con algo de Javascript, echando mano de la librería jQuery.

Para ponerlo en tu blog, tan solo tienes que copiar el siguiente código y añadirlo donde tú quieras mostrarlo. Donde están las descripciones, pones las direcciones de tus cuentas en redes sociales y la de tu feed. Para modificar el tamaño de los iconos, hazlo en los números que están en (height="100") y ( width="100") . Si quieres poner otras imágenes, puedes añadir las urls de estas donde está la función

ESTE ES EL EJEMPLO

• 
• 
• 
• 
• 

Que es el efecto Fade

Fade es un método muy rápido de usar y que sin duda resulta muy util y bastante atractivo visualmente. Se trata de hacer lo que en ingles llaman un "fade in" o "fade out", que no es más que un efecto que muestra u oculta un elemento, con un fundido de transparente a opaco, o viceversa. Como puedes ver, al posar el ratón encima de uno de ellos, este se verá perfecto y los demás se verán casi transparentes.

Código de inserción

<div id="iconoshoverfade"><ul><li><a href="TU DIRECCION DE FACEBOOK" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQWho_GQvuZELZy6lCLupTYsVjy85gB3Sn1Cke0PjibyEz_kgtRoVOHsUCa5xr61gSgi88y96xtq88jQT6VORq5LwCk0QVeidQ8tZ7rg3sgEKRMtRGpJR4AWWpSdUKA-pbnAj3Oja85c/s256/facebook.png" title="Sigueme en Facebook" height="100" width="100"/></a></li><li><a href="TU DIRECCION DE GOOGLE PLUS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzguJgtPIBOB3SU9TU5NDcGQJ1ko5MNAHXyfo2Fy2vuTLjbMj0PtbmSv1EzEanym7xGUtN2BqTSp6UWwa7TT2QIJPiukHRBOrb80-zVYVYWWV0VGbjkkY84u61IWVD3tyJSVErYU7-Ozg/s256/googleplus.png" height="100" width="100" title="añademe a Google+"/></a></li><li> <a href="TU DIRECCION DE TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOzb1xTB5pbn1yby1Os2T7jGkwczHFjl_nW0rcu2tF-V-8Dr2IaSTUG_RINktI1Oy0EXtPhc4XHwVHT-d9rkkcm2-jLXrJ7rv-V1Zc6sVmzKf3nkuvZnYRwEMkukTW1qbrq3_V75-d2k/s256/twitter.png" title="Sigueme en Twitter" height="100" width="100"/></a></li><li><a href="LA DIRECCION DE TU FEED RSS" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY5iBXSQ4y7kagtQaWPXivE6SQTxDIilMtVo6p0Na33bx0ZCbEyxmGOZw-ER-r9EtYFAo0BKnNktga0Scr7d0h2GP6F_0vuu_incT4OX1B3jyqcqJQqABhiDWRtD_kpi3XF14d9xmr9gg/s256/rss.png" title="Suscribete" height="100" width="100"/></a></li> <li> <a href="TU DIRECCION DE YOUTUBE" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrR65ysfLvctrk_xel1HbViT9d5K9rdpi9voeRZMvcSpM7hm7an19z87RbhMvBHp_f2WDCZv8aktfT1upNAWa1uCtB4kXoTzOGBrIglbbi_FQyECM8-80ReJ0IyY2g1zbKJpM-aDQDIrQ/s256/youtube.png" title="Suscribete en YouTube" height="100" width="100"/></a></li></ul></div> <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script> $(document).ready(function() { $('#iconoshoverfade a').hover(function() { $('#iconoshoverfade a img').not($('img', this)).stop().fadeTo(250, '0.1'); }, function() { $('#iconoshoverfade a img').stop().fadeTo(250, '1.0'); }); }); </script> <style> #iconoshoverfade {float:center;margin: 0 auto;} #iconoshoverfade ul li {list-style-type: none;float:left;margin-left:5px;:} #iconoshoverfade ul li:hover{-webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out;} </style>

El internet siempre será el medio de comunicación más poderoso del mundo y jamás será superado por nadie ni las empresas que tienen poder en lo terrenal y se actualicen en la internet y quieran mentir con amarillismo ni con todo su poder ni todo su dinero Podrán superar el poder de los miles de bloggers que hemos estado a lo largo del tiempo. Nosotros somos el futuro. Jonny_Sm.

Share: