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(http://1.bp.blogspot.com/-DVsxE0Nej5I/T78MjDVYXaI/AAAAAAAAA-U/byKLYSCXt2c/s000/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.


7 comentarios

Juan · julio 22, 2012 a las 12:20 am

Excelente efecto Juvinao,lo usare muy pronto 😛

    Juvinao · julio 22, 2012 a las 12:28 am

    Juan gracias por comentar 😎 usalo cuando quieras.

alex chocala · septiembre 24, 2012 a las 1:07 am

una pregunta cual es el ultimo codigo que no lo encuentro?

    Juvinao · septiembre 24, 2012 a las 1:58 am

    Alex el footer no es un codigo especifico,para hacertelo mas facil ponlo en uno de los ultimos codigos del blog.

Artistasyfamosos · octubre 7, 2012 a las 8:55 pm

Hola Juan , mira quisiera saber si puedes ayudarme lo que quiero es un marcador social como el que tienes tu solo con el boton de me gusta , twitter y G+ y que este asi en linea horizontal , como puedo agregar el que tienes , te lo agradeceria en el alma. Esto tan feliz con tu espacio que agregare un enlace en mi web hacia tu pagina si tienes un banner enviamelo a mi correo y te agrego el link , de ante manos muchas gracias por tan buen blog . Este es el correo. medicina.saludybelleza@gmail.com

Galaxyt · mayo 28, 2013 a las 6:13 pm

Hola… Lo he puesto todo y se ve genial, pero cuando le inteto poner la URL de la red social, afuerzas ante pone la dirección del blog…

ejm.
miblog.blogspot.com/facebook.com/asdfgh

Si me puedes decir como solucionar esto.

Responder a Juvinao Cancelar la respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *