×
×

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Í

×
0
Posición en el Ranking
0
Usuarios seguidores
Sus noticias
RSS
  • Visitas
    686.171
  • Publicadas
    180
  • Puntos
    0
Veces compartidas
54
¡Consigue las insignias!
Trimestrales
Recientes
Visitas a noticias
06/07/2014

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

Más recientes de Gadgetsblogger

Las 3 mejores ventajas de la impresión en 3D

La impresión en 3D ha causado un gran impacto en el campo de la industria de la impresión. A continuación vamos a ver una serie de ventajas que tiene este tipo de impresión y por las cuales es necesario realizar un curso impresión 3D: 1 26/10/2016

¿Por qué comprar un iPhone?

Una de las principales ventajas con que se cuenta al comprar iPhone es que su interfaz es colorida, amigable y además es agradable a la vista. Pero además de esto, es intuitiva y fácil de usar 01/10/2016

Las novedades e inconvenientes del juego Pokemon GO

La empresa que se encarga de desarrollar juegos móviles llamada Niantic ha realizado grandes actualizaciones en el ultimo y espectacular juego de su autoría denominado Pokemon GO, la cual se ha convertido en muy poco tiempo en la app de moda, introduciendo varios cambios y mejoras, las cuales ... 03/08/2016

La nueva generación de las aplicaciones móviles

La forma en que la sociedad en general se conecta a la red, ha cambiado de forma radical en los últimos años. A esto ha contribuido en gran parte, el amplio crecimiento en el mercado que están adquiriendo los llamados teléfonos inteligentes, las cuales suponen más del 70% en ventas en nuestro país 20/05/2016

Como ver partidos de futbol en vivo/directo por internet

Cuando se tiene la pasión por el Futbol, todo es mejor, como cuando una persona siempre se ha sentido atraída por los deportes en general, pero su favorito es el futbol. Incluso va al estadio de la ciudad donde vive y disfruta los partidos de su equipo favorito 31/03/2016

Mostrando: 1-5 de 179