√ Iconos de Redes Sociales en blanco y negro para Blogger

Este gadget muestra una lista de íconos sociales que enlazan hacia cada uno de vuestros perfiles, pero a su vez estos íconos, ya colocados en el gadget, cambian cuando alguien pasa el cursor sobre ellos. Un efecto muy atractivo para curiosos que no están acostumbrados a este tipo de diseños.

La demostración la podéis ver aquí y en la cabecera de este blog

Os lo dejo en dos formatos para que cada uno lo adapte de la mejor forma posible a su sidebar, uno está a 230px de ancho y otro a 300px.

Para instalar estos íconos tendrás que seguir los siguientes pasos:
.- Entra al panel de control de tu blog, y luego a Diseño-añadir un gadget-HTML/Javascript, copia y pega el código de abajo.

ICONOS PEQUEÑOS

<STYLE>
/* Botones social*/
.social-ico{width: 230px;}
.social-rss,.social-email, .social-twitter, .social-facebook, .social-google{ background: url(http://i17.servimg.com/u/f17/13/20/23/83/sin_ta10.png) no-repeat top left; }
.social-facebook{ background-position: 0 0; width: 44px; height: 44px; float:left;}
.social-facebook:active{ background-position: -48px 0; width: 44px; height: 44px;}
.social-facebook:hover{ background-position: -48px 0; width: 44px; height: 44px;}
.social-twitter{ background-position: -96px 0; width: 44px; height: 44px; float:left;}
.social-twitter:active{ background-position: -150px 0; width: 44px; height: 44px;}
.social-twitter:hover{ background-position: -150px 0; width: 44px; height: 44px;}
.social-google{ background-position: -202px 0; width: 44px; height: 44px;float:left;}
.social-google:active{ background-position: -251px 0; width: 44px; height: 44px;}
.social-google:hover{ background-position: -251px 0; width: 44px; height: 44px;}
.social-rss{ background-position: -302px 0; width: 44px; height: 44px; float:left;}
.social-rss:active{ background-position: -355px 0; width: 44px; height: 44px;}
.social-rss:hover{ background-position: -355px 0; width: 44px; height: 44px;}
.social-email{ background-position: -405px 0; width: 44px; height: 44px; float:left;}
.social-email:active{ background-position: -456px 0; width: 44px; height: 44px;}
.social-email:hover{ background-position: -456px 0; width: 44px; height: 44px;}
</STYLE><div class='social-ico'><a href='http://nombredetublog.blogspot.com/feeds/posts/default?alt=rss' rel='nofollow' target='_blank' title='Suscribete y no te pierdas nuestros articulos!!!'><span class='social-rss'/></a> <a href='https://www.facebook.com/nombredefacebook' rel='nofollow' target='_blank' title='Síguenos en Facebook'><span class='social-facebook'/></a> <a href='https://plus.google.com/u/0/numerosdeperfildegoogle/posts' rel='nofollow' target='_blank' title='síguenos en google+'><span class='social-google'/></a><a href='https://twitter.com/nombredetwitter' rel='nofollow' target='_blank' title='Síguenos en Twitter, interactuar es facil'><span class='social-twitter'/></a>
<a href='mailto:tuemail' rel='nofollow' target='_blank' title='Email'><span class='social-email'/></a>
</div>

ICONOS GRANDES

<STYLE>/* Botones social*/
.social-ico{width: 330px;}
.social-rss,.social-email, .social-twitter, .social-facebook, .social-google{ background: url(https://lh3.googleusercontent.com/-qVPagu-s0jI/UPhE8dglgPI/AAAAAAAAIIk/M1zPaa2uzW4/s727/Sin%2520t%25C3%25ADtulo-1.png) no-repeat top left; }
.social-facebook{ background-position: 0 0; width: 64px; height: 64px; float:left;}
.social-facebook:active{ background-position: -74px 0; width: 64px; height: 64px;}
.social-facebook:hover{ background-position: -74px 0; width: 64px; height: 64px;}
.social-twitter{ background-position: -148px 0; width: 64px; height: 64px; float:left;}
.social-twitter:active{ background-position: -222px 0; width: 64px; height: 64px;}
.social-twitter:hover{ background-position: -222px 0; width: 64px; height: 64px;}
.social-google{ background-position: -296px 0; width: 64px; height: 64px;float:left;}
.social-google:active{ background-position: -370px 0; width: 64px; height: 64px;}
.social-google:hover{ background-position: -370px 0; width: 64px; height: 64px;}
.social-rss{ background-position: -444px 0; width: 64px; height: 64px; float:left;}
.social-rss:active{ background-position: -518px 0; width: 64px; height: 64px;}
.social-rss:hover{ background-position: -518px 0; width: 64px; height: 64px;}
.social-email{ background-position: -590px 0; width: 64px; height: 64px; float:left;}
.social-email:active{ background-position: -664px 0; width: 64px; height: 64px;}
.social-email:hover{ background-position: -664px 0; width: 64px; height: 64px;}
</STYLE><div class='social-ico'><a href='http://nombredetublog.blogspot.com/feeds/posts/default?alt=rss' rel='nofollow' target='_blank' title='Suscribete y no te pierdas nuestros articulos!!!'><span class='social-rss'/></a> <a href='https://www.facebook.com/nombredefacebook' rel='nofollow' target='_blank' title='Síguenos en Facebook'><span class='social-facebook'/></a> <a href='https://plus.google.com/u/0/numerosdeperfildegoogle/posts' rel='nofollow' target='_blank' title='síguenos en google+'><span class='social-google'/></a><a href='https://twitter.com/nombredetwitter' rel='nofollow' target='_blank' title='Síguenos en Twitter, interactuar es facil'><span class='social-twitter'/></a>
<a href='mailto:tuemail' rel='nofollow' target='_blank' title='Email'><span class='social-email'/></a>
</div>

Configuración:
RSS: cambiar donde pone "nombredetublog"
FACEBOOK: cambiar donde pone "nombredefacebook"
GOOGLE+: cambiar donde pone "númerosdeperfildegoogle"
TWITTER: cambiar donde pone "nombredetwitter"
EMAIL: cambiar donde pone "tuemail"

Anteriormente vimos otros tipos de iconos sociales para colocarlos en cualquier parte del blog en esta entrada

Eso fue todo, si sigues los pasos obtendrás unos íconos de redes sociales muy atractivos para tu blog de Blogger.