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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9103f9VifEQ4jAnAx_XaWz3mEd9JBgzPE7MyaSulwq2oHbaSdY66cTN4CqMbvnhezjq0uoOlPpdAR-MC0VpZljlggOUZASA6wLWIe_2W1PYw_k3atcUlzClrftRMbDZQR1lYow3R3Dipi/s1600/social_network_facebook.png); }
#top_bar #social_networks li.twitter{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzs7lG-1eCVsFag8iaypssjMw5067BW0xgEIYZHhbpROjNXyodR2HdOA9AyJdnpzRssHiXofxbdlc58UE_fsz5mj1Ctkbs5r3cl43MJDxVFKY2B74Hty-2tEUtIAAnbNP-8JN3fi75YtGt/s1600/social_network_twitter.png); }
#top_bar #social_networks li.linkedin{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFsUKqJfaxI5T41cynMuNFlKUo8qR3U-9GRu8SbetGpk499kiuXcP-ytz2Obu-IuOq0Hmk5G9-oP0sNsHEeuZD-PM7SDdvOKgGhQb9fzvjkxYGVFgDaJxHKO2LPepyJvkvAKYGvsM_DqlD/s1600/social_network_linkedin.png); }
#top_bar #social_networks li.tumblr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf8yyIE8d-8ft5CojDEe1PtR08OzDa8dhLTj61mOQjmCTjM53hxkYG_l5xUJunHWLlX_Xj7z0JY7FkGAEPAKMAja22LLRHW_eOpYYP8zVvrVzUC6fDSYq_tL0penCabsttl97DkfaaZ2hx/s1600/social_network_tumblr.png); }
#top_bar #social_networks li.vimeo{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPUyrIdUB23w0rkXtKOcv1SZVbdzK2fe7e9LhymSPffiyAZQ_VZoaBiBIDGuOAno1ru6VtjC-f5_xjM39bE7DzgfnEQZGX2KAWoi4bot11olHrTRrA1yiuQXN0YZdAjyamEWVSObj3UqaB/s1600/social_network_vimeo.png); }
#top_bar #social_networks li.skype{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge5iERuHrV9qbhdbdBj3vuVniqacyxH6d5A3KmlpHCcSYP6SJkdY0k_zJN3dfRxLRKECtEFEeygZQTFLwbVFlM2963MSk1gbgQiuJ1aRnVWcJAKEChCfxf566RamlzzlG57UcDaiFN-cvS/s1600/social_network_skype.png); }
#top_bar #social_networks li.youtube{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdfrZ1YTc41KFar9ZwxVwA7zd2d2Z9vHqDqgkIkbTRx-LVnmbGqu0AuVMUAX6DqH6Zm13PlCZ4ttzL2wcfdvJcHaX-uIXZl42HCuKCv1LkMtxqckuQsapM7zkpG86_dMvqOITPdUNPlrv/s1600/social_network_youtube.png); }
#top_bar #social_networks li.myspace{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvA1Xf8bgSmhzVrWwQ4GqCUvAfqPMy6KgztOCRr1RcqOBrR1BoD8iD_JIrGZcV3QowoH0NXtzrIY_bBeVDiWNALttRC4odKGMj_kuy0oqIkKwlDVXnA_Yz7p6GMswVvAgEAy7J9mAvWZBF/s1600/social_network_myspace.png); }
#top_bar #social_networks li.googleplus{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe3heLk0WvAzej7wimKcVIMEkP0M6APzMZvZvjqXVClDjtRM-b8_gRMISf1VlV2xFb2HnUj0sWzbOwjNiKM7Bl_xpLZZw_ZKQ1aca3Xi6ulTqbTj3daX4_SBP6DwOlmk2rCbCp-vzp0STe/s1600/social_network_googleplus.png); }
#top_bar #social_networks li.behance{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitaMQATr-rACOifk_xlgpYO0FAxlyKXV8eK7P8dp2uBg5VAyup_-O04Fo2jDjk-6z4NA3eyrWZdPXHkFTnQhKl58PQB4iK7_mSVXlujK-eaN1Z74OuE2jo2YI8XGFVlH9UoIJT8do02UTX/s1600/social_network_behance.png); }
#top_bar #social_networks li.dribbble{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj42t2Qu4Vszj1X7x-lFZuEjJPc0xk4_E3bTaaztMFWIO1r1fGodh2nOwOB6aJYVnorLFpGGbDWa-tfG4EmEa6Aji3_9cOkySHS_FKiNdwZtX1RiBhXFc6kxfbxR0E62ke8D7gtOEDj4m83/s1600/social_network_dribbble.png); }
#top_bar #social_networks li.deviantart{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-8_r0bbHXfTEnJdg9HvOmevEWo-lo5DEE8lyTCBl8EnCWVz68UtncEl74nheD4zL9ubKHLxjxE_2GxS5zvpvbZJCqgOkmjkfjHRAPWu37v5KkVdr8Ja21FEXwL1jS4Wo7qnU_9HMBHEQ/s1600/deviantart.png); }
#top_bar #social_networks li.envato{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWBBvII9Fq0zbPIZR-Wef3xD9izueNQ_U9vQDOBRTqldyA00UkR2fTxJhy9zTI7x5AIVSTY-8VK9TN8Lbf60JMu5yRA9Xq8h29mkpvKt5N93Bs_C3O2De-0McWrqeAUtJOO4hsIgfLo2S/s1600/social_network_envato.png); }
#top_bar #social_networks li.flickr{ background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQ2ODkUlAJeACrpSpt2n_x81bGk_KZDmnQMJupvH6D2k4RzKjEAAxrzuoII1_Wte2YLKTjRVfH8anrFbCJZMkx9dwoNm3tETyTlpsh92mzY0aMjF41BgeVZA-cX3424AyaDh1vEx5IRFS/s1600/social_network_flickr.png); }

Ahora buscamos:

<body>

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

<body expr:class='"loading" + 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>