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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyceCOldE2_T0s7zzu7EP-d7PeTcqjYUkJBFqEWDlNJIAWaPXwAmaO1jIcpsJcSeU0HqfkKRFQa6582y_rCqWxBBaek0AAW5vxMXCq5L_EFos1Xlw21ISXXqR4D4D1eZfoyXbX0QyfrmW9/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyceCOldE2_T0s7zzu7EP-d7PeTcqjYUkJBFqEWDlNJIAWaPXwAmaO1jIcpsJcSeU0HqfkKRFQa6582y_rCqWxBBaek0AAW5vxMXCq5L_EFos1Xlw21ISXXqR4D4D1eZfoyXbX0QyfrmW9/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.
No hay comentarios:
Publicar un comentario