Vamos a ver como poner los iconos sociales de nuestra web de una forma distinta, otra mas de la multitud que nos ofrece el mundo del diseño web. Esta vez le vamos a aplicar un efecto 'fade' al pasar el cursor sobre ellos. Fade es un metodo muy rapido 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 mas que un efecto que muestra u oculta un elemento, con un fundido de transparente a opaco, o viceversa. Como podeis ver, al posar el raton encima de uno de ellos, este se vera perfecto y los demas se veran casi transparentes. Esto lo conseguimos con un poquito de Javascript, echando mano de la libreria jQuery.
Para ponerlo en tu blog, tan solo tienes que copiar el siguiente codigo y añadirlo donde tu quieras mostrarlo. Donde esta escrito en color rojo, 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 numeros en color verde. Si quieres poner otras imagenes, puedes añadir las urls de estas donde esta en color azul.
<div id="iconoshoverfade"><ul><li><a href="TU DIRECCION DE FACEBOOK" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJbzKiqte_sBL9opsL74NoQk-9pAAcMajvtccsLjq77YD24hkGQ9tf0WCQ-YYlauobYxo2YFo5Jlec2HnKnwakWRNQJfo29C54EL04Dg6pg3iJAzZxkKh-04JLXpGn_qfgCr-R-uVruM/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/AVvXsEhLzEK6bV0D3QRj6V_DTCAhwLaRkphQMYQv1s3rVp-hpzgY8kmVdUtrERlx0xBSNXy4ODuYMoFakMvn25Z6G1uU6NZyxkXAaoaghQOSDit5X1o9E4mX_kK9rAY7Ss8Mmnk_Dafta1NYuaU/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/AVvXsEjVt-e7JUBUg9ahwigaUeSfevK3hTMrJL7gy1rKDtDgmK3s3_cve3BHmx6QQRFYYl4aCJxbjb8ZUkpaGKxDolUcDlhBdvjv9DWfhG-C5MZ5nb2VrXYJkzAfTcE1LVniXP0yMsKVP3IOLpc/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/AVvXsEgyEQ1Jr85en70qSfdxYf6KId3KVL6wIRCD0hJ3yxvNJCRcR3UOJOGxIc3APBY9CgTTm3nLe8NxNvV-q3DByHPipoBWlUmZal3jM8LrJ8wM07K4Qzjhb9ZM0da7uwona1yPlklG17wrHis/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/AVvXsEg-ACVRBYQfy4e2I3E_Ypy4N0PiTz2_xR8_6fN5zw_rjNtEe9qJVMMLsVMlNss3oiCLbfUaY5pmuZ13HhhnQp5eZWruikXaysOCOmoI8qagmcnRI4NBYm2nzoZOIyAzRxA1gieYYB-Jlko/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>
