Agregar un gadget social con Sprites y CSS3

Anteriormente hemos visto muchas formas de agregar un gadget en el sidebar de nuestro sitio para agregar nuestros perfiles sociales, también existen en la red muchos servicios gratuitos que generan códigos para insertar en nuestro blog y nos dan enlaces con iconos de nuestros perfiles sociales.

Lo que haremos en esta ocasión es agregar o usar imágenes con sprites para evitarnos uso de ancho de banda y optimizar el blog con efectos en CSS3 para poder enlazar nuestros perfiles sociales o los del blog en cuentas de Facebook, Twitter, Google Plus y por feeds.


Esta gadget es muy útil para una barra lateral  ancha o para agregar al final de nuestros posts como lo mostramos en el anterior gadget de suscripciones. Sin más que hablar vamos al grano, lo primero que debemos hacer es seleccionar el blog donde agregaremos el gadget.

Seleccionamos la pestaña de “Diseño” que se encuentra en nuestro menú de la izquierda.
Hacemos clic en un gadget “HTML/Javascript” y agregamos lo siguiente:
<div class='social_bookmarks_container'>
<ul class='social_bookmarks'>
<li class='iconrss'>
<a href='/atom.xml'>
RSS
</a>
</li>
<li class='iconrssmail'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=NombreDelFeed'>
RSS Mail
</a>
</li>
<li class='icontwitter'>
<a href='http://twitter.com/usuario'>
Twitter
</a>
</li>
<li class='iconfacebook'>
<a href='http://facebook.com/usuario'>
Facebook
</a>
</li>
<li class='icongplus'>
<a href='http://plus.google.com/+usuario/about'>
Google Plus
</a>
</li>
</ul>
</div>
Ahora hacemos clic en “Guardar” y tenemos parte del código guardado. Únicamente vamos a cambiar nuestros usuarios por cada red social así como el ID de Feedburner. El código original que fue publicado en CiudadBlogger muestra un solo código con todo CSS, pero a mi me gusta separar los hojas de estilo en el encabezado del sitio, entonces hacemos lo siguiente:

Buscamos este código:
<b:skin><![CDATA[/*
Y por debajo agregamos lo siguiente:
.social_bookmarks_container {
width:100%;
height:65px;
padding:0;
position:relative;
}
.social_bookmarks {
position:relative;
float:left;
margin:0;
padding:0;
}
.social_bookmarks li {
margin:0 0 1px 1px;
height:57px;
width:57px;
list-style:none;
float:left;
padding:0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.social_bookmarks li a {
float:left;
width:57px;
line-height:24px;
display: block;
text-indent: -99999px;
margin:0px;
outline: none;
padding:0;
min-height:57px;
height:100%;
text-decoration:none;
}
.social_bookmarks .iconrss{background: #A4A4A4 url(//lh6.googleusercontent.com/-s8sIx3OX2WI/U4vC1nmgr0I/AAAAAAAALK4/W3Z3qXMwrCg/s114/icon-rss.png) top left no-repeat;}
.social_bookmarks .iconrssmail{background: #BDBDBD url(//lh5.googleusercontent.com/-H4iUybdCAyU/U4vC1yQWu1I/AAAAAAAALLE/fTpR7eN4cIw/s114/icon-rssmail.png) top left no-repeat;}
.social_bookmarks .icontwitter{background: #D8D8D8 url(//lh6.googleusercontent.com/-4TshwJW7hIE/U4vC2JM25AI/AAAAAAAALLI/tcIkpheXrYU/s114/icon-twitter.png) top left no-repeat;}
.social_bookmarks .iconfacebook{background: #E6E6E6 url(//lh5.googleusercontent.com/-nt-UdZG1ns0/U4vC1v57lwI/AAAAAAAALLQ/pAOWjEBSnSg/s114/icon-facebook.png) top left no-repeat;}
.social_bookmarks .icongplus{background: #F1F1F1 url(//lh6.googleusercontent.com/-brT53y4GgMs/U4vC1UPpmFI/AAAAAAAALK8/vRxosS7GGKs/s114/icon-gplus.png) top left no-repeat;}
.social_bookmarks .iconfacebook:hover{background-position:center -57px; background-color: #37589b;}
.social_bookmarks .icontwitter:hover {background-position:center -57px; background-color: #46d4fe;}
.social_bookmarks .icongplus:hover {background-position:center -57px; background-color: #de5a49;}
.social_bookmarks .iconrss:hover{background-position:center -57px; background-color: #ff6600;}
.social_bookmarks .iconrssmail:hover{background-position:center -57px; background-color: #FFDE00;}
.social_bookmarks li:hover a{background: transparent url(//lh4.googleusercontent.com/-XNviZ_JqvyU/U4vDMDFAX8I/AAAAAAAALLk/E4VIJr1onlo/s57/icon-social-reflect.png) no-repeat;
}
Guardamos los cambios y listo!
Fuente

Si quieres recibir mas tutoriales y gadgets directamente en tu correo electronico, suscribete gratis a nuestro blog, visita nuestra pagina de facebook o añade nuestro feed Rss.


Compartelo!:

0 comentarios:

Publicar un comentario en la entrada

- Antes de hacer una consulta (pregunta), por favor utiliza el Buscador.

- Por favor, cualquier otra pregunta que tengas, la puedes hacer en la entrada correspondiente.

- Haremos todo lo posible por responderte o acusarte recibo antes de 24 horas. A veces, podremos hacerlo, otras veces no será posible, y nos tomará un poco más… ten paciencia.

- Los comentarios que a mi criterio se escriban solo para dejar un enlace o un link seran eliminados.

- ¡Muchas gracias por comentar o por preguntar!