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/AVvXsEh4_rlBlhVqtavrK7y1QDMxcSJTlF49il1QXepcGQfewMif1CSvDnYabPOatQZ0dR-TlS4R98VQetYr7PS3rZWsANfORc5AHTp7P1O6mk9EqERG9V8ea7Ej4XWlXKBVs9p1CNc2owhTom0/s1600/facebook+(1).png") 50% 50% no-repeat }
ul#social-links li  a.twitter {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDQPcJVjIe_t5Gh-JAlTjXtKvZoizY-rnJWn3cBfk_D2_mFAvgy0MSpvtgWCVHjnrNCocHLdXlBAIkzwiUUgAJRToSmgJxwelWUEK_gbt2ZIm35KT_O9apAWpAFI9kl5JigWWy3356D8/s1600/twitter+(1).png") 50% 50% no-repeat }
ul#social-links li  a.google {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO2wcItYxnPtQ8t452tqfzJ0w8bRmpDtqTVDso1ZpDDVqwlFiSK-6BWVDzwaCkPBnjUZ4DSIQvKu19mtAkcvblijRZ8fmt4_gwPYsJdihG2NvOG_CqMIeGlS9yVHuHYTHeJMULFdZiRiw/s1600/google.png") 50% 50% no-repeat }
ul#social-links li  a.dribbble {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5_5YrsZPHh4g6gOXyi2tFmUgICxKLuk6msx1mt2Upo1aqQPErYjEVbPMtjFJ8j9SWvBnyi1g6RrEwikVCFNlslI8-gaBcGdwq4XAXOLQEqDYJXJb8iQ_uJDSqYUi9ZZFV7r2UFOxGc2M/s1600/dribbble.png") 50% 50% no-repeat }
ul#social-links li  a.vimeo {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy8Y2XcBv1LpsHcwxnOsRY3cssCnhXgvM8Z-FuW8ZpuzyzPc6xIJK10at_H1MScAl03B4TSu7fH3e4uERGUvvwr1Or61UG0AR6J2TNRUtYE8HvKGwqeDWDTCXtEGVJooRkI650Uz3Ghmg/s1600/vimeo.png") 50% 50% no-repeat }
ul#social-links li  a.skype {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE1EVZCaiQF0i2xiIrDpB0fnOqj3Bv-OUkA-LfnyjWsMfHu-YcBPevjaYZ8obmieLRNiWyu8NTF3k0heesYpJkLFNjZT0tbAIQAkSaoab5srcPeLBFbiWXW83HRycB0s4QTUEwmlaTp2U/s1600/skype.png") 50% 50% no-repeat }
ul#social-links li  a.rss {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhzkp-VKvIL1MWj1XXCyeCYFt7y_n6cS-ATPwP6CrijOEta00baUlCGSB7XgIxs3eT2h0Tx0NW9wv7PzUf_xjvabzE_Tyu0DvzeYF4VxcQsh0eMWdjGl0GaFyvANNn8-tCBH6NbTZIic/s1600/rss.png") 50% 50% no-repeat }
ul#social-links li  a.linkedin {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDlOROqZtLxjMCU1-1lukOrRXF5-6YxHGefKWYCxCT2ESkEdP51c2356KsdsTmVzFFEQDAcqPeMEHe_RYJPysjFEwnemokuvSnOud4fp_sP1CEMmHBlbLsf2krG1Ejn6FgsdoJ7EbtVRE/s1600/linkedin.png") 50% 50% no-repeat }
ul#social-links li  a.pinterest {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwlYSFklSylA8WbWx376OBq1vXJkjkGv7mccTPLhy40e14Rsvrjna0AfwVuPF97_SLSMuoGzOBGlf92wXW5qGz53AorqPbefKvdq-7Lq_XYcYIQ9KVnfNeWDyUWW4M8milmaHGLLpQ8KM/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.