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

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

11 thoughts on “Iconos de redes sociales arriba de blog que cambian de color al pasar el cursor #02

  • noviembre 1, 2013 en 11:57 pm
    Permalink

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

    Responder
  • noviembre 2, 2013 en 1:27 am
    Permalink

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

    Responder
  • noviembre 2, 2013 en 1:43 pm
    Permalink

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

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

    Responder
  • noviembre 7, 2013 en 2:49 pm
    Permalink

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

    Responder
  • diciembre 18, 2013 en 8:44 am
    Permalink

    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

    Responder
  • enero 14, 2014 en 7:53 am
    Permalink

    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

    Responder
  • enero 14, 2014 en 8:21 am
    Permalink

    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

    Responder

Deja un comentario

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