En esta oportunidad quiero compartir con ustedes un pack de iconos sociales con efecto hover (al pasar el cursor sobre ellos se tornan más visibles) y con efecto de giros de 360 grados.
En la siguiente imagen pueden ver un ejemplo claro de los efectos que les mencionen anteriormente:
Para añadir este maravilloso truco pega antes de
]]></b:skin> lo siguiente:
social-networking menus
----------------------------------------------------*/
.footer-credit-m2{float:left;width:20px;height:1px}
.social-wrap{float:left;width:668px}
#social-networking{margin:0 auto}
.social-wrap-m1{float:left;width:22px;height:1px}
#social-networking li{float:left}
#social-networking a{display:block;position:relative;clear:both;margin:0 auto;padding:0 10px 0 0}
#social-networking span{opacity:0.4;width:24px;height:24px;display:block;border:4px solid #404040;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}
#social-networking span:hover{border:4px solid #272728;opacity:0.9;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
#social-networking .social-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmnIYIb6SCjt-S48m7CiJ1cK1fXEhrIa9IJoSbjlZv-i7C8Bd5lKenwJim5plP1N_JIzhCZcmVbgRqHOG9d7BUDvJbkglB_99Iy1jSf2JNkWUgJcKXF4hvhMG6bNkSmmNtY5JrsjMh8N1C/s0/social.png);background-color:transparent;background-repeat:no-repeat}
#footer-bottom a:link,#footer-bottom a:visited,#footer-bottom a:hover{color:#717172}
.opacity #social-networking .social-icon{opacity:0.85}
.opacity #social-networking a:hover .social-icon{opacity:0.6}
#social-networking .facebook{background-position:0 -28px}
#social-networking .flickr{background-position:0 -87px}
#social-networking .vimeo{background-position:0 -233px}
#social-networking .youtube{background-position:0 -291px}
#social-networking .linkedin{background-position:0 -322px}
#social-networking .googleplus{background-position:0 -353px}
#social-networking .dribbble{background-position:0 -205px}
#social-networking .tumblr{background-position:0 -177px}
#social-networking .skype{background-position:0 -262px}
#social-networking .delicious{background-position:0 -149px}
#social-networking .digg{background-position:0 -117px}
#social-networking .rss{background-position:0 -57px}
Ahora en el footer del blog (uno de los ultimos codigos) agrega lo siguiente:
<!-- start #social-networking-->
<div class='social-wrap'>
<!-- start #social-networking-->
<ul id='social-networking'>
<li><a href='#' id='twitter-link' title='twitter'><span class='twitter social-icon'/></a></li>
<li><a href='#' id='facebook-link' title='facebook'><span class='facebook social-icon'/></a></li>
<li><a href='#' id='flickr-link' title='flickr'><span class='flickr social-icon'/></a></li>
<li><a href='#' id='vimeo-link' target='_blank' title='vimeo'><span class='vimeo social-icon'/></a></li>
<li><a href='#' id='youtube-link' title='youtube'><span class='youtube social-icon'/></a></li>
<li><a href='#' id='linkedin-link' title='linkedin'><span class='linkedin social-icon'/></a></li>
<li><a href='#' id='googleplus-link' title='googleplus'><span class='googleplus social-icon'/></a></li>
<li><a href='#' id='dribbble-link' title='dribbble'><span class='dribbble social-icon'/></a></li>
<li><a href='#' id='tumblr-link' title='tumblr'><span class='tumblr social-icon'/></a></li>
<li><a href='#' id='skype-link' title='skype'><span class='skype social-icon'/></a></li>
<li><a href='#' id='delicious-link' title='delicious'><span class='delicious social-icon'/></a></li>
<li><a href='#' id='digg-link' title='digg'><span class='digg social-icon'/></a></li>
<li><a href='#' title='rss'><span class='rss social-icon'/></a></li>
</ul>
<!-- end #social-networking-->
</div>
En las partes donde esta el
# solo reemplaza por lo que se indica,por ejemplo en el primer caso es Twitter.
Este truco se recomienda para blogs con fondos oscuros, como lo pueden comprobar en este
blog de pruebas.