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.
Puedes ver el demo en el footer de este blog.
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/AVvXsEgCDpBjnvUfA1z6Bd5NFCKBboldFLiP8Ua9s4LA4gY8PUWhmWJhJmPi7bl1Wz1BWLYU6O_M9c59xsd-EroIVhmvbsNXmb7yjFUar84fhcqnSdkl3eDadsDzV80cLHk7jpBp6UQmSJ8zGPjR/s1600/facebook.png' style='margin-right:15px;'/></a>
<a href='#Twitter' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgemZM5C-eu-rtQvxpkJ5WSLyXukzTHwsLwjlFH2Iw2UheRku_bzi1DaatdYn2uxxAuaMOk6beu2bpkE8nfgzSc3e5aezfXtQG17toHUr7xJKQWE8yIbQTj4i1F_qn1HVCs0Vq4cb2YWY-B/s1600/twitter.png' style='margin-right:15px;'/></a>
<a href='#GooglePlus' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMTq_Kb9o8Xu5Lpl1jHb0NV_O6Cqr2qH1ogB4vSYtcfbBMNJ3nXPYj6Qi-pBCpQdwChrNc3DkXvLmle5WcVEya_-YucpZ5jD2k2EmvwS4CxdWjP-dpk9287lRbnIAlg8YtjxMvqdKwrC9i/s1600/google+.png' style='margin-right:15px;'/></a>
<a href='#Youtube' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgItOA0-PPAV5P0US6DL96BfAR2cxwdmZYu_tW_pAFdRUbvg4f0jQ3hBcs-qsQS0kUsZ_58u29HeDhAUNwpD_CMv3ZCAcnCM2MnpyCsfNuYqhRRn_1W59epZVWAKq6AdPrhs_Vqy0IRpI6g/s1600/youtube.png' style='margin-right:15px;'/></a>
<a href='#LinkedIn' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTSiSOHrpGVOAj3bxhyIHiM4N55tfQL_Q006OMRv_eMrfmN498zAiSjmpKv0dqVH6A_Vsq0CMsdhc1njKKVSq-HBC6tlfI8nnOmTLUSHDPW3u6UyDostKVpNqJrjPwzCXgTbZuHIkcRnJl/s1600/linkedin.png' style='margin-right:15px;'/></a>
<a href='#Feedburner' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge9S8C-3gpKRKyPYQYmGQ2A-9KEQ-lpj4FUV24FE6iKyxNJNjbyKcQ2togqr03_uWeYrjPokfC936c0V1Rmwgmzt0f6YOCCeeuD5urm_nDtruVyUJrJJi5ylYR8j01Y4cVAbXOQJ1c9F6Q/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() {
$('#footericons a').hover(function() {
$('#footericons a img').not($('img', this)).stop().fadeTo(250, '0.1');
}, function() {
$('#footericons a img').stop().fadeTo(250, '1.0');
});
});
</script>
Ahora solo sustituimos lo que se encuentra resaltado en rojo, por la URL que indica.
Tengo una preguntota! en mi blog ya tengo los botones, pero quiero saber como agregarles los efectos especiales...están perfectos donde estan, solo quiero eso
ResponderBorrarHola amigo, ten en cuenta que deberás ponerle una ID a tu botón y, para poner algun efecto hover en ellos, tendrás que poner :hover, después de la ID en el código CSS, es decir, tendrá que quedar de la siguiente manera: ID:hover.
BorrarEspero haberte ayudado en algo...