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.


11 comentarios

Gilmer · noviembre 1, 2013 a las 11:57 pm

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

MUSICAMUNDIIAL · noviembre 2, 2013 a las 1:27 am

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

Jonathan LR · noviembre 2, 2013 a las 1:43 pm

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

cambias el «menu» por la ID de tu MENU :3

Ernesto · noviembre 3, 2013 a las 5:42 am

Gracias muy buenos trucos

Angel Jampier · noviembre 7, 2013 a las 2:49 pm

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

Edu · noviembre 10, 2013 a las 12:36 am

Gracias 😀

Jonathan LR · noviembre 10, 2013 a las 2:06 pm

Gracias a ti tambien por comentar

Anonymous · diciembre 18, 2013 a las 8:44 am

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

Anonymous · enero 14, 2014 a las 7:53 am

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

Anonymous · enero 14, 2014 a las 8:21 am

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 una respuesta

Marcador de posición del avatar

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