HISTAC
autor
  • email
  • facebook
  • twitter
  • rss
notificaciones
cerrar
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, p...

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.

Anterior
« siguiente
Próximo
siguiente »
COMENTA CON....

6/Comentarios
/Comentarios

comentarios:

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

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  2. 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!!

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

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

      Eliminar

Si quieres recibir los nuevos comentarios marca "Avisarme"