Mil Trucos Blogger

Iconos Sociales con efecto Hover y giros de 360 grados

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares
Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

7 Comentarios

  1. Juan Juan
    julio 22, 2012    

    Excelente efecto Juvinao,lo usare muy pronto 😛

    • julio 22, 2012    

      Juan gracias por comentar 😎 usalo cuando quieras.

  2. septiembre 24, 2012    

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

    • septiembre 24, 2012    

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

  3. octubre 7, 2012    

    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

  4. Galaxyt Galaxyt
    mayo 28, 2013    

    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.

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo