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

Hola amigos bloggeros! ya hace mucho tiempo que no publicaba, asi que hoy vengo a compartir con todos ustedes Iconos sociales que cambian de color al pasar el cursor con CSS, y es que tener iconos como estos a la vista incrementa la posibilidad de que los lectores de vuestro blog puedan seguirte en tus redes sociales

Los iconos que compartiré hoy son de Facebook, Twitter, Google+, Dribble, Vimeo, Skype, LinkedIn, Pinterest y RSS, puedes ver mejor los iconos en este blog de pruebas.

Para añadirlo nos vamos a Plantilla, Editar HTML, buscamos ]]></b:skin> y antes pegamos:

/*-------------------- ICONOS SOCIALES -----------------------*/
#social-icons {
position:relative;
}
ul#social-links {
z-index: 1202;
position: absolute;
margin: 10px 0 0 0px;
right: 0px;
list-style: none;
}
ul#social-links li {  float: left }
ul#social-links li {
float: left;
font-size: 12px;
list-style: none;
width: 32px;
height: 32px;
background: #8dc1d3;
background: -moz-linear-gradient(top, #8dc1d3 0%, #67a7bd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc1d3), color-stop(100%,#67a7bd));
background: -webkit-linear-gradient(top, #8dc1d3 0%,#67a7bd 100%);
background: -o-linear-gradient(top, #8dc1d3 0%,#67a7bd 100%);
background: -ms-linear-gradient(top, #8dc1d3 0%,#67a7bd 100%);
background: linear-gradient(top, #8dc1d3 0%,#67a7bd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc1d3', endColorstr='#67a7bd',GradientType=0 );
text-indent: -9999px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
margin: 0 5px 0 0;
box-shadow: 0px 1px 1px #a7dcef,inset 0px 2px 5px #67a7bd;
-moz-box-shadow: 0px 1px 1px #a7dcef,inset 0px 2px 5px #67a7bd;
-webkit-box-shadow: 0px 1px 1px #a7dcef,inset 0px 2px 5px #67a7bd;
}
ul#social-links li  a.facebook {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCVSFtFOAqhtjgyYGvylgt9LiUMLUKLdrafTlpjdvXkChMAvaaP7eW9SqhXIPKtYng0Kh17X9nDeo52PwhI_CCr1uiieK4snVYzCbkxc2emVrfG_9Xy39kqJaW5xl5r11O_N8_w7heCQ/s1600/facebook+(1).png") 50% 50% no-repeat }
ul#social-links li  a.twitter {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqVk7xzbITYB2axYI7IlCVer2CA0sJgVNm97_NxNOL1OLFrpo0ecect0OcGk0BewccyWMUTXJn-FNP-V_omXuLfKNKENBTuYNT8ESbPK556vP5gyyOmUVW4YElWpvH1A3uiduW4QE5XS8/s1600/twitter+(1).png") 50% 50% no-repeat }
ul#social-links li  a.google {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidMJwiEvUwLVnNhKFz9sFqgivBR0ur_xpzM5jebN5BMElzi8rK1CYMqquA3PyMSn7UV_ilQhJcIMp3H7Z3XiqaU9NAir-Kby2gxrFgla-AE_YFIl2aMj0CVEJ2il7UNhXRz9BOhW91j28/s1600/google.png") 50% 50% no-repeat }
ul#social-links li  a.dribbble {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNY1hPg1OQ07JPp8H0NvijwoVFrXqLSUUQ3e833pwt4tMo0cAut6RqPwayVZLg1dd57UJ7rmsTNYm7oP0Z5LjOR39HtfxD3sXkrSw68m6B5H7MRwW3sH4WrhPuqohSN1Vg8Enso1bF_4/s1600/dribbble.png") 50% 50% no-repeat }
ul#social-links li  a.vimeo {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLHkpdMJ_RJuFWC0IqN_ZZkVfAOZXlydt_Bd1brqGYDMDA2bx3cB_OwXOLa1rXms6hiAq62U76ONViqj0a4Uiu1toslsaqPd5NAzxrqVwpndlccEhZpsdL053ITNYkcEUQEv7G0d59JGg/s1600/vimeo.png") 50% 50% no-repeat }
ul#social-links li  a.skype {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH11CMZYKjVi0t9x67h4Zd8SrW95r55mERX5NIm3bAON_kyultD7AxTsYyD_dyJwmoQUUVuw6ZWxlruzTNu8ihqA_AwAjSM2L8NOLNKGdtPkdaEVp5jbGRiAruDy2MJHl4N_bhZBfr-QQ/s1600/skype.png") 50% 50% no-repeat }
ul#social-links li  a.rss {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQ4F0d5zlArMxicHX0a36kyaD4XQQHGp3Xx91TdScy543qMpzqTI5HSl-A21L1Lw7vukEZ7dF_TdbPJkvVeVTkv42IyXeuvaFkuEAYZsaofWQXLGwduMi84qqlwaYYv-G7BrIbKhI7x8/s1600/rss.png") 50% 50% no-repeat }
ul#social-links li  a.linkedin {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHSzN0FQX3rTL9dKUBcugpcKEApgNFgbbtjpDJmCDOTOR50AtsYFkx99NihIJ2NBvDhOYIZPZPnG-1HHvHjzMa-TLci_ns-nMq9kHNz6N1xXLiM-kNVcUtYfzmCXtGnPdL-2D1QKh-X1U/s1600/linkedin.png") 50% 50% no-repeat }
ul#social-links li  a.pinterest {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvi6f_6VFvqFdRUIdlLLncMsO-2F4ShnW7R9kKQpy6OYhTddd6HC3ME8_KAldcG7iB4WSJ0tqPgEeV5k32pLyfDry-mdYLcElm5zCiAWVcZwin2FC5sQtmIijtVQq-AzZIrteMZnChcY/s1600/pinterest.png") 50% 50% no-repeat }
ul#social-links > li.facebook-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #415b92;
background: -moz-linear-gradient(top, #415b92 0%, #33487b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#415b92), color-stop(100%,#33487b));
background: -webkit-linear-gradient(top, #415b92 0%,#33487b 100%);
background: -o-linear-gradient(top, #415b92 0%,#33487b 100%);
background: -ms-linear-gradient(top, #415b92 0%,#33487b 100%);
background: linear-gradient(top, #415b92 0%,#33487b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#415b92', endColorstr='#33487b',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #2a4782,inset 0px 2px 5px #4a67a0;
-moz-box-shadow: 0px 1px 1px #2a4782,inset 0px 2px 5px #4a67a0;
-webkit-box-shadow: 0px 1px 1px #2a4782,inset 0px 2px 5px #4a67a0;
}
ul#social-links > li.twitter-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #aad5e3;
background: -moz-linear-gradient(top, #aad5e3 0%, #90c7db 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aad5e3), color-stop(100%,#90c7db));
background: -webkit-linear-gradient(top, #aad5e3 0%,#90c7db 100%);
background: -o-linear-gradient(top, #aad5e3 0%,#90c7db 100%);
background: -ms-linear-gradient(top, #aad5e3 0%,#90c7db 100%);
background: linear-gradient(top, #aad5e3 0%,#90c7db 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aad5e3', endColorstr='#90c7db',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #6cb6cf,inset 0px 2px 5px #7fc9e2;
-moz-box-shadow: 0px 1px 1px #6cb6cf,inset 0px 2px 5px #7fc9e2;
-webkit-box-shadow: 0px 1px 1px #6cb6cf,inset 0px 2px 5px #7fc9e2;
}
ul#social-links > li.google-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #f54a35;
background: -moz-linear-gradient(top, #f54a35 0%, #c83e2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f54a35), color-stop(100%,#c83e2d));
background: -webkit-linear-gradient(top, #f54a35 0%,#c83e2d 100%);
background: -o-linear-gradient(top, #f54a35 0%,#c83e2d 100%);
background: -ms-linear-gradient(top, #f54a35 0%,#c83e2d 100%);
background: linear-gradient(top, #f54a35 0%,#c83e2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f54a35', endColorstr='#c83e2d',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #bf3928,inset 0px 2px 5px #ff6957;
-moz-box-shadow: 0px 1px 1px #bf3928,inset 0px 2px 5px #ff6957;
-webkit-box-shadow: 0px 1px 1px #bf3928,inset 0px 2px 5px #ff6957;
}
ul#social-links > li.facebook-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #415b92;
background: -moz-linear-gradient(top, #415b92 0%, #33487b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#415b92), color-stop(100%,#33487b));
background: -webkit-linear-gradient(top, #415b92 0%,#33487b 100%);
background: -o-linear-gradient(top, #415b92 0%,#33487b 100%);
background: -ms-linear-gradient(top, #415b92 0%,#33487b 100%);
background: linear-gradient(top, #415b92 0%,#33487b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#415b92', endColorstr='#33487b',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #2a4782,inset 0px 2px 5px #4a67a0;
-moz-box-shadow: 0px 1px 1px #2a4782,inset 0px 2px 5px #4a67a0;
-webkit-box-shadow: 0px 1px 1px #2a4782,inset 0px 2px 5px #4a67a0;
}
ul#social-links > li.dribbble-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #fd83af;
background: -moz-linear-gradient(top, #fd83af 0%, #e46191 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fd83af), color-stop(100%,#e46191));
background: -webkit-linear-gradient(top, #fd83af 0%,#e46191 100%);
background: -o-linear-gradient(top, #fd83af 0%,#e46191 100%);
background: -ms-linear-gradient(top, #fd83af 0%,#e46191 100%);
background: linear-gradient(top, #fd83af 0%,#e46191 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd83af', endColorstr='#e46191',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #da447c,inset 0px 2px 5px #fc97bb;
-moz-box-shadow: 0px 1px 1px #da447c,inset 0px 2px 5px #fc97bb;
-webkit-box-shadow: 0px 1px 1px #da447c,inset 0px 2px 5px #fc97bb;
}
ul#social-links > li.vimeo-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #1ab7ea;
background: -moz-linear-gradient(top, #1ab7ea 0%, #0a9ece 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1ab7ea), color-stop(100%,#0a9ece));
background: -webkit-linear-gradient(top, #1ab7ea 0%,#0a9ece 100%);
background: -o-linear-gradient(top, #1ab7ea 0%,#0a9ece 100%);
background: -ms-linear-gradient(top, #1ab7ea 0%,#0a9ece 100%);
background: linear-gradient(top, #1ab7ea 0%,#0a9ece 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ab7ea', endColorstr='#0a9ece',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #0b9ac8,inset 0px 2px 5px #31c6f6;
-moz-box-shadow: 0px 1px 1px #0b9ac8,inset 0px 2px 5px #31c6f6;
-webkit-box-shadow: 0px 1px 1px #0b9ac8,inset 0px 2px 5px #31c6f6;
}
ul#social-links > li.skype-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #56cbf7;
background: -moz-linear-gradient(top, #56cbf7 0%, #09b2f1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#56cbf7), color-stop(100%,#09b2f1));
background: -webkit-linear-gradient(top, #56cbf7 0%,#09b2f1 100%);
background: -o-linear-gradient(top, #56cbf7 0%,#09b2f1 100%);
background: -ms-linear-gradient(top, #56cbf7 0%,#09b2f1 100%);
background: linear-gradient(top, #56cbf7 0%,#09b2f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56cbf7', endColorstr='#09b2f1',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #0281ae,inset 0px 2px 5px #b5ebff;
-moz-box-shadow: 0px 1px 1px #0281ae,inset 0px 2px 5px #b5ebff;
-webkit-box-shadow: 0px 1px 1px #0281ae,inset 0px 2px 5px #b5ebff;
}
ul#social-links li  a {
width: 32px;
height: 32px;
display: block;
}
ul#social-links > li.rss-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #ff8500;
background: -moz-linear-gradient(top, #ff8500 0%, #ff6a00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff8500), color-stop(100%,#ff6a00));
background: -webkit-linear-gradient(top, #ff8500 0%,#ff6a00 100%);
background: -o-linear-gradient(top, #ff8500 0%,#ff6a00 100%);
background: -ms-linear-gradient(top, #ff8500 0%,#ff6a00 100%);
background: linear-gradient(top, #ff8500 0%,#ff6a00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8500', endColorstr='#ff6a00',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #df5d00,inset 0px 2px 5px #ffb140;
-moz-box-shadow: 0px 1px 1px #df5d00,inset 0px 2px 5px #ffb140;
-webkit-box-shadow: 0px 1px 1px #df5d00,inset 0px 2px 5px #ffb140;
}
ul#social-links > li.linkedin-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #007fc5;
background: -moz-linear-gradient(top, #007fc5 0%, #0061b6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#007fc5), color-stop(100%,#0061b6));
background: -webkit-linear-gradient(top, #007fc5 0%,#0061b6 100%);
background: -o-linear-gradient(top, #007fc5 0%,#0061b6 100%);
background: -ms-linear-gradient(top, #007fc5 0%,#0061b6 100%);
background: linear-gradient(top, #007fc5 0%,#0061b6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007fc5', endColorstr='#0061b6',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #004d90,inset 0px 2px 5px #16a7e8;
-moz-box-shadow: 0px 1px 1px #004d90,inset 0px 2px 5px #16a7e8;
-webkit-box-shadow: 0px 1px 1px #004d90,inset 0px 2px 5px #16a7e8;
}
ul#social-links > li.pinterest-link:hover {
float: left;
font-size: 12px;
width: 32px;
height: 32px;
background: #e63037;
background: -moz-linear-gradient(top, #e63037 0%, #bf1018 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e63037), color-stop(100%,#bf1018));
background: -webkit-linear-gradient(top, #e63037 0%,#bf1018 100%);
background: -o-linear-gradient(top, #e63037 0%,#bf1018 100%);
background: -ms-linear-gradient(top, #e63037 0%,#bf1018 100%);
background: linear-gradient(top, #e63037 0%,#bf1018 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e63037', endColorstr='#bf1018',GradientType=0 );
text-indent: -9999px;
box-shadow: 0px 1px 1px #ae0d13,inset 0px 2px 5px #fc545b;
-moz-box-shadow: 0px 1px 1px #ae0d13,inset 0px 2px 5px #fc545b;
-webkit-box-shadow: 0px 1px 1px #ae0d13,inset 0px 2px 5px #fc545b;
}

Ahora buscamos <body> y abajo pegamos:

<!-- inicia #socialIcons -->
<div id='social-icons'>
<ul id='social-links'>
   <li class='facebook-link'><a class='facebook' href='http://www.facebook.com/newbthemes' id='social-01' title='Facebook!'>Facebook</a></li>
   <li class='twitter-link'><a class='twitter' href='http://twitter.com/newbthemes' id='social-02' title='Twitter!'>Twitter</a></li>
   <li class='google-link'><a class='google' href='#' id='social-03' title='Google+'>Google</a></li>
   <li class='dribbble-link'><a class='dribbble' href='#' id='social-04' title='Dribble!'>Dribble</a></li>
   <li class='vimeo-link'><a class='vimeo' href='#' id='social-05' title='Vimeo!'>Vimeo</a></li>
   <li class='skype-link'><a class='skype' href='#' id='social-06' title='Skype!'>Skype</a></li>
   <li class='linkedin-link'><a class='linkedin' href='' id='social-07' title=' LinkedIn!'>Linkedin</a></li>
   <li class='pinterest-link'><a class='pinterest' href='#' id='social-09' title='Pinterest!'>Pinterest</a></li>
   <li class='rss-link'><a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' id='social-08' title='RSS!'>RSS Feeds</a></li>
</ul>
</div>
<!-- finaliza #socialIcons -->

Solo cambia lo que esta en rojo por tus redes sociales.


¿No te funciona los iconos?
Quizá es porque usas plantilla hecha por el diseñador, en ese caso busca:

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

 y abajo pegas el codigo anterior.