25 enero 2013

Iconos de Redes Sociales en blanco y negro para Blogger


icono de redes sociales
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

gif make

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.

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

6 comentarios

El código de RSS al parecer tiene un error... pq pide en el tutorial indica el link del blog
:(

Orlando no hay ningún error, el feed de blogger es http://nombredetublog.blogspot.com/feeds/posts/default
donde cambiando solo nombredetublog por el tuyo, te llevaría al rss de tu blog.

En el apartado nombre de tu blog, agrego lo que corresponde y solo me sale un conjunto sin fin de parrafos correspondientes a las publicaciones de mi blog :/
Espero que me puedas ayudar... mi blog es de temas sobrenaturales y encaja perfecto con los iconos en blanco y negro. Mi blog es este: http://paranormalosorno.blogspot.com/

Gracias de antemano!!

Mi rss es el siguiente: http://feeds.feedburner.com/TuRincnParanormal

Orlando debes colocarlo así: http://paranormalosorno.blogspot.com/feeds/posts/default


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"