Mil Trucos Blogger

Personalizar el gadget de etiquetas con CSS3

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

El gadget de etiquetas es muy importante en Blogger, ya que en ella mostramos una lista completa de los articulos del blog organizados en categorias, asiq eu darle un buen aspecto a este gadget es fundamental.

Hoy les mostrare una forma muy elegante de personalizar este gadget, solo con CSS3 por lo que no sobrecargara tu blog, ya que este codigo es muy ligero.

El gadget de etiquetas quedara de la siguiente manera:


 Primero que todo para aplicar este truco debes tener el gadget en forma de nube, luego de eso deberas agregar antes de ]]></b:skin> lo siguiente:

.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Ahora solo resta guardar los cambios y listo.Espero que les haya sido de utilidad este truco y sigan visitando Mil Trucos Blogger, para descubrir nuevos trucos para sus blogs.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

22 Comentarios

  1. diciembre 10, 2012    

    Juaviano este efecto de blogger de navida te gustara te dejo el lik abajo.

    http://blog.nguoiaolam.net/2012/12/trang-tri-blog-mua-giang-sinh-voi-hieu.html

    (aviso el link no esta en español)
    Lo que mas me gusta es cuando pasas el raton por las bolas se mueven asi queda:

    http://tarjetablaca.blogspot.com.es/

    • diciembre 13, 2012    

      Alcarcos00 es un bonito efecto, gracias por compartirlo.

      Saludos.

  2. diciembre 11, 2012    

    Gracias parce busque por todos lados y al fin lo encontre 😀

    • diciembre 13, 2012    

      Luis que bueno que encotraste aqui en mi blog lo que buscabas 😛

  3. diciembre 12, 2012    

    Gracias un gran aporte lo aplicare a mi blog te lo agradesco

    • diciembre 13, 2012    

      Neytor este truco ha quedado muy bien en tu blog…

      Saludos Neytor

    • abril 14, 2013    

      Hola Neytor me ha gustado tu blog,y quiero saber cual es el color que tengo que cambiar para el texto,pliz hayder o neytor una ayudadita.ya he cambiado el calor de fondo y el color de fonfo cuando se pasa el mouse,pero no el color de la letra, http://www.tecnoblokerd.blogspot.com este es mi blog…

  4. diciembre 26, 2012    

    tengo una pregunta muy tonta pero quisiera preguntarla, tengo mucho manejando blogs, pero nunca me he puesto a modificarlo en html, manejo codigo, pero se me hace tedioso y aburrido, pero en caso de blogs, quisiera aprender más, y quiero meterle más animación con css a mis blogs, pero, bueno en este caso, por ejemplo este código ¿en donde lo ingresas?

  5. enero 5, 2013    

    Este comentario ha sido eliminado por el autor.

  6. enero 23, 2013    

    Hayder me podrias decir Como lograste poner “acerca del autor” en esta plantilla porque no puedo, este es mi blog: http://infofacilito.blogspot.com/
    es la misma que la tuya,
    tampoco puedo activar las “Reacciones”y el +1 de Google en las entradas tampoco puedo

    • enero 28, 2013    

      NeoFox veo que ya agregaste lo que querias, esta plantilla es un poco rebelde :winky:

    • febrero 7, 2013    

      Yo acabo de ver tu Blog y las reacciones funcionan asique ese caso resuelto. Por otra parte lo de acerca del autor tambien lo has puesto asique todo arreglado! eso si para que no te salga en las entradas ponle una condicional al codigo de cada cosa para que solo salga cuando entras en la entrada aqui te dejo un tutorial de las condiciones de Ciudad Blogger.

      Enlace —> http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

  7. febrero 7, 2013    

    Muy bueno lo instale y lo puse, esta muy bien , aunque al pulsar en una de esas etiquetas luego me sale pequeña la etiqueta seleccionada..sabes de que puede ser?

    Muy buena tu web con infinidad de informacion y de calidad..

    Otra cosas tienes por ahi el codi de como poner la categoria como la tienes puesta ahora.. esa tambien esta muy bien..
    felicidades por la web..
    Te sigo hace tiempo..saludos..

  8. febrero 11, 2013    

    Gracias por otro gran aporte a mi blog 🙂

  9. abril 11, 2014    

    Como se hace para tener el gadget en forma de Nube? ahí es donde me pierdo, y creo por eso no me funciona.

    • abril 12, 2014    

      Debes ir a Diseño, Etiquetas (Editar), Mostrar y marcas la casilla de nube.

      Saludos

    • abril 12, 2014    

      Ya probe y funciono perfecto, no hay otro diseño ademas del estilo Taringa.? Gracias

    • abril 15, 2014    

      Hay muchos estilos, solo es cuestión de jugar con el CSS, en estos días voy a publicar una entrada con mas estilos.

    • junio 7, 2014    

      GRACIAS, funciona a la perfección…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo