Botones de redes Sociales con efecto desvanecimiento en el Footer de Blogger

Estos botones de las Redes Sociales producen un efecto visual de desvanecimiento, el cual se activa  cuando pasamos el cursor sobre ellos.

Planeta Blogger les presenta en esta oportunidad la forma de poner botones de las Redes Sociales en el footer de nuestro blog con efecto de desvanecimiento, el cual se activa  cuando pasamos el cursor sobre ellos.

Para comenzar la instalación de los estilos CSS, sigamos esta ruta:

Plantilla / Editar HTML:

Una vez allí, debemos ubicar lo siguiente:

Ahora antes de]]></b:skin>  o sea arriba, pegamos el siguiente código: 

body {

  background: #F5F5F5;

}

#footericons {

text-align:center;

margin: 0 auto;

padding:30px;

}

#footericons ul li {

list-style-type: none;

text-align:center;

margin-left:5px;

}

#footericons 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;

  text-shadow: 10px 5px 5px #000;

} 

Hecho esto, debemos buscar lo que sigue:

Luego que encontramos </body> en la parte superior del mismo, pegamos lo siguiente: 

<div id='footericons'>

<a href='#Facebook' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg211k3mpMLJvflP6trCW6xI8NTc2SthM02e3erBMSVnGT9-ArKB6tJgre0EBXerTOB30wjMJpLjIJlJn2Xfd-pX22gL_Xk_D_BaO99XO6_2hxAWP4rX5ImpNYPKzfLVbprW-sS9Hup8Vu/s1600/facebook.pn ' style='margin-right:15px;'/></a>

<a href='#Twitter ' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVcWo9dbqefE5TkhY65WrBY5DlCfs5kf2I7iwTG_6wEQGA_n_mebNUwIgBqNma_zMBGj9G94YqUWwGu8oOSOZbXHUXYF35RWda7H3xLF9oqldScnN-NS6PinWdXIexXBxcqjF3-i-fdjM/s1600/twitter.png' style='margin-right:15px;'/></a>

<a href='#GooglePlus ' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3SFQAUlNXbDcmtkqvbswDSf7UqKaF_nZCZg7QBAASkF4DhwNR6mG3ceh5eTZWImWWWQ6MQxxHI0g7m8EZrDXpt14sQmTW8hUQeFwKUCG-dJxLOW7xs0w6wjIXhXbIDeaVfJiG-BCxX6S/s1600/google+.png' style='margin-right:15px;'/></a>

<a href='#Youtube ' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguRjoRCxhOTp4cb7j7z8v5Z05hu_1oZ-9lML2LNBqsbWkuxLiRKy7NyRj_nKaCp5t8Cm8Fp1ASnCftABlZLsyo3lt5XqWTMLchOIQJ_vf4XD3pFJT8YCfzy_2H6OGj0ggN4hwSLT3UhXUA/s1600/youtube.png' style='margin-right:15px;'/></a>

<a href='#LinkedIn ' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQgfzXLGlvXcsj-kqBqF2G1doRrLE_sgZ3GCVsqMvSa1zIjvDWA_gZqSy0YvboFHvhsSe-n1VkYd30pFr_V8lo_Sy7QkqCjcQ_8K0zpsLmEDpqyFzuJaffTTwmS0bB1Ns6Os3Iq7thkJr/s1600/linkedin.png' style='margin-right:15px;'/></a>

<a href='#Feedburner ' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtlYxRtTDCQ9cpbY4p9lMxBEHhfWhIigkPPuPfKxcmCjKXcFKc9PpL2tKRTjnZpsy72z7UeueUmTBYbJzmtWYGAzPA-e5kq5tThMQi-U6xNfFOoZAm8mBP7ndwklGIejhmPLkT7-4ljg1/s1600/rss.png' style='margin-right:15px;'/></a></div>

<script src=' http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

<script>

$(document).ready(function() {

    $(&#39;#footericons a&#39;).hover(function() {

        $(&#39;#footericons a img&#39;).not($(&#39;img&#39;, this)).stop().fadeTo(250, &#39;0.1&#39;);

    }, function() {

        $(&#39;#footericons a img&#39;).stop().fadeTo(250, &#39;1.0&#39;);

    });

});

</script> 

Después de esto, debemos poner la dirección URL correspondiente a la Red Social que allí nos dice en color Azul.

En color Verde vemos las URL de las imágenes que corresponden a los Íconos de las Redes Sociales, pudiendo cambiarlos por nuestra propia imágen.  

Ahora bien, si no vamos a usar todos los Iconos por alguna razón, podemos eliminar la parte del código que pertenece al que quitaremos.

VEA EL DEMO AQUI: 

Eso es todo.