Globedia.com

×
×

Error de autenticación

Ha habido un problema a la hora de conectarse a la red social. Por favor intentalo de nuevo

Si el problema persiste, nos lo puedes decir AQUÍ

×
cross

Suscribete para recibir las noticias más relevantes

×
Recibir alertas

¿Quieres recibir una notificación por email cada vez que Gadgetsblogger escriba una noticia?

Agregar un gadget social con Sprites y CSS3

06/07/2014 01:00 0 Comentarios Lectura: ( palabras)

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.

image

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:

RSS

NombreDelFeed '>

RSS Mail

usuario '>

Twitter

usuario'>

Facebook

usuario/about'>

Google Plus

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: <![CDATA[/*</span> 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;

Más sobre

-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: #BDBDBDurl(//lh5.googleusercontent.com/-H4iUybdCAyU/U4vC1yQWu1I/AAAAAAAALLE/fTpR7eN4cIw/s114/icon-rssmail.png) top left no-repeat;}

.social_bookmarks .icontwitter{background: #D8D8D8url(//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: #F1F1F1url(//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


Sobre esta noticia

Autor:
Gadgetsblogger (180 noticias)
Fuente:
gadgets-blogger-gratis.blogspot.com
Visitas:
2861
Tipo:
Reportaje
Licencia:
Distribución gratuita
¿Problemas con esta noticia?
×
Denunciar esta noticia por

Denunciar

Comentarios

Aún no hay comentarios en esta noticia.