Para instalar estos iconos sociales con efecto 3d, asemejan unos botones que se quedan pulsados. Solo debes añadir un elemento HTML a tu plantilla e incrustar el código que hay debajo. No olvides rellenar las urls de tu feed y redes sociales en el código (negrita)


<style type="text/css">
/* Iconos Sociales */
.social-ico {width: 300px;}
.social-rss, .social-twitter, .social-facebook, .social-google{ background: url(http://2.bp.blogspot.com/-qzZihesZzUU/T1ZZjqN73xI/AAAAAAAAUAg/xg44SrKF8MQ/s0/socialico.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-google{ background-position: -148px 0; width: 64px; height: 64px;float:left;}
.social-google:active{ background-position: -222px 0; width: 64px; height: 64px;}
.social-google:hover{ background-position: -222px 0; width: 64px; height: 64px;}
.social-rss{ background-position: -296px 0; width: 64px; height: 64px; float:left;}
.social-rss:active{ background-position: -370px 0; width: 64px; height: 64px;}
.social-rss:hover{ background-position: -370px 0; width: 64px; height: 64px;}
.social-twitter{ background-position: -444px 0; width: 64px; height: 64px; float:left;}
.social-twitter:active{ background-position: -518px 0; width: 64px; height: 64px;}
.social-twitter:hover{ background-position: -518px 0; width: 64px; height: 64px;}
</style>
<div class="social-ico">
<a href="URL DE TU FEED" target="_blank" title="Suscribete y no te pierdas nuestros articulos!!!" rel="nofollow"><span class="social-rss"></span></a> <a href="URL DE TWITTER" target="_blank" title="Síguenos en Twitter, interactuar es facil" rel="nofollow"><span class="social-twitter"></span></a> <a href="URL DE FACEBOOK" target="_blank" title="Síguenos en Facebook" rel="nofollow"><span class="social-facebook"></span></a> <a href="URL DE GOOGLE PLUS" target="_blank" title="Síguenos en Google+" rel="nofollow"><span class="social-google"></span></a>
</div>

Iconos creados por Land of Web para uso personal y comercial.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

6 comentarios:

  1. Hola buenos dias, estaba mirando tu código para insertarlo en mi web (me gustan estos botones) y me he dado cuenta que no están los cierres con las llaves }

    .social-rss{ background-position: -296px 0; width: 64px; height: 64px; float:left;

    .social-twitter{ background-position: -444px 0; width: 64px; height: 64px; float:left;

    Un saludo y gracias por tus tutos, son geniales ;-)
    MªJosé R.

    ResponderEliminar
  2. Sencillos de poner, y muy agradables. Me han gustado mucho!!

    ResponderEliminar
  3. Están genial, pero veo que falta uno bastante importante ultimamente: el de Pinterest¡¡¡... Estaría genial que lo incluyeras... Muchas gracias¡¡¡

    ResponderEliminar
  4. Hola soy nueva en todo esto, en que lugar tengo que poner los codigo?

    ResponderEliminar
    Respuestas
    1. Ve a diseño y añade un elemento HTML/Javascript, ahi es donde puedes poner los codigos ;)

      Eliminar