BOTONES SOCIALES CON EFECTO DE DESVANECIMIENTO EN PIE DE PAGINA

Hay muchos tutoriales que explican como agregar iconos o botones de redes sociales en diferentes partes del blog, como en el sidebar lateral, en entradas y hasta flotando por todo el blog, pero en esta ocasión les mostraré cómo insertar estos botones sociales en el footer (pie de pagina).

Lo genial de estos botones, es que al pasar el cursor sobre un icono obtiene un efecto de desvanecimiento para los demás.

DEMO

Los estilos CSS

Para añadir los estilos CSS a los botones, nos dirigimos a Plantilla, Editar HTML y adentro presionamos CTRL+F y escribimos:

]]></b:skin>

Antes del código mencionado anteriormente, pegamos:  

#footericons { text-align:center; margin: 0 auto; padding:30px; background-color: #F5F5F5; } #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; }

El HTML 
Ahora, buscamos el siguiente código:  

</body>

Y antes, pegamos lo siguiente:

<div id='footericons'> <a href='#Facebook' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRykBF8FE3HkMbW18X7mob5MF-TybqaW6nEtcaJqdvcxp8iPDKaGQMOR82Wt-wxrcMpR6T6vLGJUWCYNoQnoZt-1NYdVT64-bi5YBgcoK0T4dx8twwgLpExkcxn9yTimDSWzumD0mi53qM/s1600/facebook.png' style='margin-right:15px;'/></a> <a href='#Twitter' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQE19jvhFBkfjypc4cIS38Dqh_OAaA69RT7sQqonohcj-rsc0JISw-JsqBq0u2LlP3dVCmU3m2r0nR_EW3pPik336-5teM2sexfb43L8deD7us8y_Xc48kU0zvRaWFlZoxJfsyqM3_2Qpg/s1600/twitter.png' style='margin-right:15px;'/></a> <a href='#GooglePlus' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOnPxsgxMF1eaL1Vpp2rRBTt4-lIPYl5rdZcDbci7MGvkX0LEj2MA0LUxEK28XT_suLqzMuEYYI-Wws1fZL3MlgBpsifPHIKrOg0HRRpElnL71Mg5V_MdBBRiqn5YuXe12_3LULPeAZCDV/s1600/google+.png' style='margin-right:15px;'/></a> <a href='#Youtube' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtdW7yXPHjc5xj-D0zmpKSxeVxD5seFdjvnIvl14WrVxHiP8PXPyQYoH9CWKrIVGMiMqFqaNoFUoscCaoCBiwRguzD8lSDZaS0H4-tt3pdUEaZg2kjb6gIzdFxAvjyVJHiFc4t9vSS44d/s1600/youtube.png' style='margin-right:15px;'/></a> <a href='#LinkedIn' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy-8bayg9ZAud1QwmRSQOZlYAd-Nw9daIZFcMy62c0x4Xnzkw-a65QcoBr9pNBooD75XROIgBvkhg9hldC081H1VjAMTa_JjW3Sz0QMRppwl036nFcyxNNelK2nAH_xRU3gkKfUc7DeEPb/s1600/linkedin.png' style='margin-right:15px;'/></a> <a href='#Feedburner' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQzae6Q9VMWZj8tXGL7EmeGPM6fuoqSjE6tS6x7vU51yhRAXHdyjmkHA8R2B8cUEwhZQp9IRTTzfDTyZNsLxDAyBpZUJjSDwvev4yLF2UIRULvpIF6U97IgfFLPN4M_X5FUljHqgtH00r/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>

Post de NovedadBlogger.net: BOTONES SOCIALES CON EFECTO DE DESVANECIMIENTO EN PIE DE PAGINA