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.


13 comentarios

Arcandres · junio 2, 2012 a las 12:37 am

Colocando en 3 2 1… Muy bueno :F

    Juvinao · junio 2, 2012 a las 12:45 am

    Arcandres colocalo te encantara,gracias por comentar 😀

alianzagrafica · junio 2, 2012 a las 3:12 pm

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.

    Juvinao · junio 3, 2012 a las 12:14 am

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

Dany Bass Official · junio 11, 2012 a las 9:16 pm

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

    Juvinao · junio 21, 2012 a las 6:27 pm

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

Coronel Smith · septiembre 19, 2012 a las 11:31 am

Hola Juviano!
Un gusto saludarte!

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

Gracias!!

    Juvinao · septiembre 19, 2012 a las 4:23 pm

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

Sara · septiembre 30, 2012 a las 3:43 pm

Podriais subir para instagram y tumblr?
Gracias

    Juvinao · septiembre 30, 2012 a las 7:59 pm

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

Emilio Suárez · febrero 16, 2013 a las 7:21 pm

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.

jose manuel · marzo 11, 2013 a las 10:49 pm

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

jose manuel · marzo 11, 2013 a las 10:49 pm

Gracias

Responder a jose manuel 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 *