Mil Trucos Blogger

Iconos de Suscripción “Social Icons” con efecto de Opacidad

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

El truco que les voy a compartir son Iconos Sociales a los que les he dado el nombre de “Social Icons” y como el titulo lo dice vienen con un hermoso efecto de opacidad logrado mediante CSS.

El resultado final sera una bella caja de Suscripción con efecto de opacidad como la siguiente:


Para agregar este truco pega en un elemento HTML/Javascript lo siguiente:

<h2>Social Icons</h2>
<div id='social'>
<a href='URL TWITTER'><img alt='Twitter' src='http://4.bp.blogspot.com/-CH2EJeZxXvE/T8glI8bKNAI/AAAAAAAACPY/fsmkcRrB8tU/s000/twitter.png' title='Twitter'/></a>
<a href='URL FEED'><img alt='Feed' src='http://1.bp.blogspot.com/-rZ_cODG_QCk/T8glJDn031I/AAAAAAAACPg/vN0IgZlOx0c/s000/rss.png' title='RSS'/></a>
<a href='URL FACEBOOK'><img alt='Facebook' src='http://2.bp.blogspot.com/-iCU7Y8Du4j0/T8glJCXTJtI/AAAAAAAACPo/39McBmTnHt8/s000/facebook.png' title='Facebook'/></a>
<a href='URL GOOGLE+'><img alt='Google Plus' src='http://2.bp.blogspot.com/-eXigEPadqvA/T8glJXRIr0I/AAAAAAAACPw/qMVvMEflU-8/s000/google%252525252b.png' title='Google Plus'/></a>
<a href='URL YOUTUBE'><img alt='Youtube' src='http://4.bp.blogspot.com/-GKl3FrmoFGg/T8glJojFJHI/AAAAAAAACP0/4EtXMSmC-nc/s000/you_tube.png' title='Youtube'/></a></div>

Reemplaza lo que esta en color azul por lo que se indica en cada caso.

Ahora para agregar el efecto de opacidad, ve a la Edición HTML  y arriba de ]]></b:skin> agrega lo siguiente:

 #social {
margin: 15px 0 5px -15px;
width: 300px;
height: 40px;
text-align: center;
}

#social img {
margin-left: 3px;
margin-right: 3px;
}

#social img:hover {
opacity: 0.6;
}

Con esto ya hemos terminado el tutorial,espero que les haya sido de utilidad.

0
Shares

Relacionados...

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

13 Comentarios

  1. junio 2, 2012    

    Colocando en 3 2 1… Muy bueno :F

    • junio 2, 2012    

      Arcandres colocalo te encantara,gracias por comentar 😀

  2. junio 2, 2012    

    juviano a mi me gustaria aprender a hacer un effecto boton de redes sociales como el que tu tienes en tu blog yo doy subscriptor a tu canal gracias att yeddy.

    • junio 3, 2012    

      Si te gustan entonces publicare un tutorial explicando como hacerlos,Saludos 😀

  3. junio 11, 2012    

    me gusta esto Juvinao

    oye podrías hacer un post en el que enseñes como haces una precarga en un blogger porfavor gracias.

    mi email danielbucadb@gmail.com

    • junio 21, 2012    

      Dany por ahora tengo muchas solicitudes por favor espera un poco.

  4. septiembre 19, 2012    

    Hola Juviano!
    Un gusto saludarte!

    Tendrás los iconos de Vimeo y Pagina Web de este estilo??

    Gracias!!

    • septiembre 19, 2012    

      Coronel Smith la verdad no los tengo pero cuando los encuentre o los haga te los paso,te parece? 😎

  5. septiembre 30, 2012    

    Podriais subir para instagram y tumblr?
    Gracias

    • septiembre 30, 2012    

      Sara ya son varios los pedidos que tengo,cuando los consiga los publico 😎

  6. febrero 16, 2013    

    Hola, Juvinao.

    Lo instalo pero me sale la caja vertical, no en horizontal como explicas en el post. Sale cada icono uno debajo de otro, y a mí me gustaría que saliese uno detrás de otro.

    Gracias.

  7. marzo 11, 2013    

    Y como se hace para añdir algún botón más, por ejemplo el de pinterest

  8. marzo 11, 2013    

    Gracias

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