6 mar 2012 Diseño-web
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 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:
Carlos Pizcos
.
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
.