Mil Trucos Blogger

Iconos de redes sociales arriba de blog que cambian de color al pasar el cursor #02

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

Anteriormente habíamos visto los Iconos de redes sociales arriba de blog que cambian de color al pasar el cursor hoy me complace compartir con todos ustedes este diseño que es un poco mejor porque se adapta más a las plantillas negras, ver en el blog de pruebas.

Nos vamos a Plantilla, Editar HTML y buscamos ]]></b:skin> y antes pegamos lo siguiente:

/*-------------------- ICONOS SOCIALES #02 -----------------------*/
#top_bar{
    background:#191919;
    border-bottom:1px solid #343434;
}
#top_bar .content_wrap{
    margin: 0 auto;
    max-width: 960px; width: 100%;
    padding: 0;
}#social_networks{
    display:block;
    float:right;
    text-align:right;
}
#social_networks ul{ display:block; height:32px;}
#top_bar #social_networks li{
    display:inline-block;
        float:left;
    width:32px; height:32px;
    opacity:0.3;
     background-position:left top;
    -webkit-transition:All 0.4s ease;
    -moz-transition:All 0.4s ease;
    -o-transition:All 0.4s ease;
}
#top_bar #social_networks li:hover{ opacity: 1; background-position:left -32px; }
#top_bar #social_networks li a{
    display:inline-block;
    width:32px; height:32px;
}
#top_bar #social_networks li a span{ display:none; }
#top_bar #social_networks li.facebook{ background-image:url(http://2.bp.blogspot.com/-ad6IGSCeAlE/UPyVg1lspVI/AAAAAAAAA1E/MY1xBnDboIk/s1600/social_network_facebook.png); }
#top_bar #social_networks li.twitter{ background-image:url(http://2.bp.blogspot.com/-fB5vNhSaO8o/UPyViR8DSWI/AAAAAAAAA1g/mI6aHojf6xs/s1600/social_network_twitter.png); }
#top_bar #social_networks li.linkedin{ background-image:url(http://4.bp.blogspot.com/-YXzVa_McHtc/UPyVhgDPNdI/AAAAAAAAA1U/HII1KVvSP_8/s1600/social_network_linkedin.png); }
#top_bar #social_networks li.tumblr{ background-image:url(http://3.bp.blogspot.com/-4HDFvJKtOZc/UPyViOQg9rI/AAAAAAAAA1c/3ppQiHH78Fw/s1600/social_network_tumblr.png); }
#top_bar #social_networks li.vimeo{ background-image:url(http://1.bp.blogspot.com/-sBkqd79FTLg/UPyViinO_8I/AAAAAAAAA1k/8WE3hSq01BY/s1600/social_network_vimeo.png); }
#top_bar #social_networks li.skype{ background-image:url(http://1.bp.blogspot.com/-lWWe2EwKxss/UPyVh2MKAZI/AAAAAAAAA1Y/uoOCTE8oBNI/s1600/social_network_skype.png); }
#top_bar #social_networks li.youtube{ background-image:url(http://1.bp.blogspot.com/-VJbf8MqOdR8/UPyVi4IXd5I/AAAAAAAAA1o/UGuuFqApwTg/s1600/social_network_youtube.png); }
#top_bar #social_networks li.myspace{ background-image:url(http://1.bp.blogspot.com/-IQTISKY0k94/UPyVjO6FtmI/AAAAAAAAA2A/nG_sSeoNq48/s1600/social_network_myspace.png); }
#top_bar #social_networks li.googleplus{ background-image:url(http://2.bp.blogspot.com/-OatskRfs2yQ/UPyVhZQsUxI/AAAAAAAAA1M/DGwwGrt6m4M/s1600/social_network_googleplus.png); }
#top_bar #social_networks li.behance{ background-image:url(http://2.bp.blogspot.com/-z076-IfwCcQ/UPyVf_A5FDI/AAAAAAAAA0w/S7Ji_PeOb2Y/s1600/social_network_behance.png); }
#top_bar #social_networks li.dribbble{ background-image:url(http://2.bp.blogspot.com/-HrGP8038wbI/UPyVgV56WRI/AAAAAAAAA1Q/tJWSaDLgSLc/s1600/social_network_dribbble.png); }
#top_bar #social_networks li.deviantart{ background-image:url(http://2.bp.blogspot.com/-u1QGxX3iqXo/UPyVcEFIQiI/AAAAAAAAAzw/ruH4H_OB2-E/s1600/deviantart.png); }
#top_bar #social_networks li.envato{ background-image:url(http://4.bp.blogspot.com/-aQc5xzE6U2k/UPyVgqAaRnI/AAAAAAAAA1A/Tv_mgsGwLUg/s1600/social_network_envato.png); }
#top_bar #social_networks li.flickr{ background-image:url(http://4.bp.blogspot.com/-MWDyN6I8Pfo/UPyVhBZ1HRI/AAAAAAAAA1I/397nZGG-qRs/s1600/social_network_flickr.png); }

Ahora buscamos:

<body>

Si usas plantilla hecha por el diseñador lo encontrarás como:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de las dos agrega los siguiente:

<section id='top_bar'>
 <div class='content_wrap'>
 <div id='social_networks'>
 <ul>
 <li class='sorting-01 facebook'><a href='#Facebook'><span class='inv'>Facebook</span></a></li>
 <li class='sorting-03 twitter'><a href='#Twitter'><span class='inv'>twitter</span></a></li>
 <li class='sorting-02 googleplus'><a href='#Google-Plus'><span class='inv'>googleplus</span></a></li>
 <li class='sorting-04 vimeo'><a href='#Vimeo'><span class='inv'>vimeo</span></a></li>
 <li class='sorting-10 youtube'><a href='#Youtube'><span class='inv'>youtube</span></a></li>
 <li class='sorting-13 envato'><a href='#Envato'><span class='inv'>envato</span></a></li>
 <li class='sorting-06 flickr'><a href='#Flickr'><span class='inv'>flickr</span></a></li>
 <li class='sorting-11 behance'><a href='#Behance'><span class='inv'>behance</span></a></li>
 <li class='sorting-12 dribbble'><a href='#Dribble'><span class='inv'>dribbble</span></a></li>
 <li class='sorting-05 linkedin'><a href='#Linkedin'><span class='inv'>linkedin</span></a></li>
 </ul>
 </div>
 <div class='clear'/>
 </div>
</section>

Solo te queda cambiar lo que está en rojo por lo que indice en cada caso.

0
Shares

Relacionados...

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

11 Comentarios

  1. Gilmer Gilmer
    noviembre 1, 2013    

    Ni me di cuenta de que había un anterior, verdaderamente me gustan los anteriores. Excelente tutorial

  2. MUSICAMUNDIIAL MUSICAMUNDIIAL
    noviembre 2, 2013    

    ABRIA UNA FORMA DE DE LA BARRA BAJE JUNTO CON LA PAGINA, OSEA COMO ESTA EL MENU DE TU PAGINA (MILTRUCOSBLOGGER)

  3. noviembre 2, 2013    

    Hay una propiedad CSS:
    #menu {
    position: fixed;
    }

    cambias el “menu” por la ID de tu MENU :3

  4. noviembre 3, 2013    

    Gracias muy buenos trucos

  5. Angel Jampier Angel Jampier
    noviembre 7, 2013    

    Si no entendiste solo pon antes del ]]> esto:
    #top_bar {
    position: fixed;
    }

  6. Edu Edu
    noviembre 10, 2013    

    Gracias 😀

  7. noviembre 10, 2013    

    Gracias a ti tambien por comentar

  8. Anonymous Anonymous
    diciembre 18, 2013    

    Podrías compartir el que tienes en este blog? según yo este no tiene imagenes y el otro tiene muchas y no son sprites, por lo que alenta el blog…

    Agradecería mucho lo compartieras

    • diciembre 18, 2013    

      Es cierto que el que uso es un sprite, pronto lo compartiré,

  9. Anonymous Anonymous
    enero 14, 2014    

    Perfecto, solo tengo una cuestión. Por ahora no tengo Vimeo y algunas de las otras redes, ¿para agregar youtube, tumblr, etc que se deve hacer o mismo para eliminar?

    Gracias
    Ezequiel

  10. Anonymous Anonymous
    enero 14, 2014    

    Perfecto, solo tengo una cuenstión. ¿como agrego las redes sociales que falten asi como pinterest, youtube, etc? tambien para cambiar el fondo a color blanco y los iconos a gris o negros.

    Gracias
    Ezequiel

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