Gadget de Etiquetas o Nube de Tags Personalizado.

Rabiando un poco con la nueva plantilla que he puesto en el blog de Marcos Gratis, me entró una duda acerca de como personalizar el gadget de etiquetas ya que el que trae por defecto Blogger no me parecía muy estético y yo había visto en otros blogs unas etiquetas muy bonitas y coloridas. Mi curiosidad por este nuevo mundo que se abre ante mis ojos y en el cual cada día descubro más y más cosas me llevó a insistir hasta que  pude personalizar el aspecto de mis etiquetas y de algo como esto:



Llegué a esto:



 Aplicando el siguiente código:
#Label1.widget.Label a:hover {
border-bottom: 1px dotted #58ACFA;
}
.cloud-label-widget-content {
line-height: 0px;
padding-top: 5px;
font-family:Georgia,serif;
font-color:#58ACFA;
font-style:italic;
line-height:2em;
text-align: center;
}

En fin, no está mal no???. Bueno, pero eso no era lo que quería, yo quería que cada etiqueta llevase un color distinto. Finalmente decidí consultar en internet y llegué a la página del Escaparate de Rosa, Y bingo allí estaba lo que buscaba pero.... No se veía nada. Seguí insistiendo y logré ver la parte del código que necesitaba (otro día les cuento como), y voilá así quedó mi gadget personalizado de etiquetas.



Cómo ponerlo en la Plantilla.
Como a mi me gusta hacer las cosas fáciles para ustedes, lo único que deben hacer es copiar el código en Plantilla, Personalizar, Avanzado en  donde se despliegarán una serie de opciones, abajo del todo dice añadir css y copian los siguiente:
#Label1.widget.Label a:hover {
border-bottom: 1px dotted #58ACFA;
}
.cloud-label-widget-content {
line-height: 0px;
padding-top: 5px;
font-family:Georgia,serif;
font-color:#58ACFA;
font-style:italic;
line-height:2em;
text-shadow: 0 1px 0 #000000;
text-align: center;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #0680FA; font-size: 10px;}
.label-size-2 a {color: #FA066C; font-size: 12px;}
.label-size-3 a {color: #8904B1; font-size: 14px;}
.label-size-4 a {color: #000000; font-size: 15px;}
.label-size-5 a {color: #7B7879; font-size: 18px;}

Esta última parte es donde van los colores de las etiquetas, pueden ir a códigos de colores html y escoger el color que quieren agregar y lo cambian por el del codigo.

Donde dice font-family pueden cambiar el estilo de la letra según su plantilla, Bold, Arial, etc. es cosa de ir probando.

Toma en cuenta que para que el código funcione debes tener el gadget de etiquetas en la opción de nube y además tener unas cuantas etiquetas agregadas para que se muestren más colores.

Si te gustó compártelo en tu red social o recomiéndalo en Google!!!

22 comentarios:

  1. Que bueno, quedan hermosas así!!!
    Gracias por tus enseñanzas amiga!!!!!!!!!
    Besito
    Roos

    ResponderEliminar
  2. Aver si te animas con alguna de las cosillas porque ayer vi tu blog y no haz centrado la cabecera.... Viste, te estoy regañando amiga.
    Un beso Roos. Que tengas una linda semana.
    Gabriela.

    ResponderEliminar
  3. QUERIDA AMIGA MI FELICITACIONNNNNNNNNNNNNNN
    , ME BIENE MUY BIEN CUARQUER DUDA YSE DONDE IR,FELIZ DIAAAAAAAAAAAA

    ResponderEliminar
  4. Montse:
    Me alegra mucho que te guste el blog y claro en lo que pueda ayudarte en dudes en decirmelo. No soy ninguna experta pero buscaremos la solución.
    Besos.

    ResponderEliminar
  5. hola soy denuevo karla betancour de karla la artesana.blogspot.com pidiendote ayuda amiga,por error tengo dos paginas y no quise borrar una asi que decidi quedarme con las dos pero aparecen entrelasadas,como hago para independisarlas la otra pagina es fabricacionvariada.blogspot.com, te lo agradecere mucho,besos

    ResponderEliminar
  6. Karla:
    Yo encantada de ayudarte pero no sé a que te refieres con que están entrelazadas.
    Saludos.

    ResponderEliminar
  7. hola! muchas gracias por esta entrada!! es lo que andaba buscando !!! saludos!!! y muy muy clara la explicación!!!!

    ResponderEliminar
    Respuestas
    1. Me alegra que te haya servido Susana. Saludos.

      Eliminar
  8. Muchas Gracia, pero al agregar el CSS en mi plantilla perzonalizandolo, NO PASA NADA. =(

    ResponderEliminar
  9. yo quiero esto pero, cuál es el código que tengo que reemplazar para que quede así? D: ayuuuuda cómo lo hago xD

    ResponderEliminar
  10. Si, yo también lo he aplicado y tampoco pasa nada. ¿Utilizas el widget de etiquetas de Blogger no?

    ResponderEliminar
    Respuestas
    1. Fijate bien que el widget esté como nube de etiquetas y no como lista. No hay que reemplazar ningun codigo solo agragar ese. Puede ser desde la misma plantilla arriba de ]]>

      Eliminar
    2. Sisi, está como nube y agrego ese código en agregar css. Pero na, no se modifica nada. Incluso he mirado el codigo html a ver si se llamaba de otra forma, pero efectivamente se llama Label1. Pues nose que puede pasar.

      Eliminar
    3. Ve a la plantilla y borra
      .cloud-label-widget-content {
      text-align: justify;
      }

      Luego agregas todo el otro código.
      Saludos.

      Eliminar
    4. O soy muy torpe o no te entiendo. Si te refieres a plantilla editar html, no veo ese código que me dices por ningún lado, ni mostrando artilugios ni sin mostrar. Y he mirao, y mirao, y he vuelto a mirar...

      Eliminar
    5. Si, ahí en la plantilla html presiona f3 en chrome y busca .cloud-label-widget-content , borra ese código y pon el que dejo en este post.
      Busca bien, yo lo veo en tu plantilla.
      Saludos.

      Eliminar
    6. Jeje. Eso de yo lo veo en tu plantilla, me ha impactado. Muchas gracias por tu tiempo. Lo miro a ver. Espero no tener que volver a molestarte.

      Eliminar
    7. Bueno te cuento por fín como lo he solucionado. Después de mucho mirar he visto que no se llama Label1 en mi código, sino Labe11. He cambiado tu código por este
      #Labe11.widget.Label a:hover {
      border-bottom: 1px dotted #58ACFA;
      }
      .cloud-label-widget-content {
      line-height: 0px;
      padding-top: 5px;
      font-family:Georgia,serif;
      font-color:#58ACFA;
      font-style:italic;
      line-height:2em;
      text-shadow: 0 1px 0 #000000;
      text-align: center;
      }
      .cloud-label-widget-content span {
      padding: 0 0 0 5px;
      }
      .label-size-1 a {color: #0680FA; font-size: 10px;}
      .label-size-2 a {color: #FA066C; font-size: 12px;}
      .label-size-3 a {color: #8904B1; font-size: 14px;}
      .label-size-4 a {color: #000000; font-size: 15px;}
      .label-size-5 a {color: #7B7879; font-size: 18px;}

      Y a funcionar. Gracias por todo.

      Eliminar
    8. jajaja, lo que pasa es que cuando yo pincho tu nombre, me muestra un perfil y me lleva a tu blog Almanaque 2.0, allí yo puedo ver el código fuente del blog. Te aseguro que tu gadget de etiquetas es label1.
      Bueno, me alegra que al fin haya funcionado :)

      Eliminar
    9. Ya eso ya. Lo que me alucinaba, es que te hubieses molestado en mirarlo. Y palabrita del niño Jesús que se llama Labe11

      Eliminar
  11. Un saludo, Gracias por compartir tus conocimientos. Me ayudasun montón

    ResponderEliminar
  12. Muchas gracias!! Me ha ayudado bastante. Aún estoy aprendiendo y veo que a pesar de cambiar los colores, las etiquetas me salen todas del mismo color.... Lo iré descubriendo a ver como lo cambio!

    ResponderEliminar

Tus comentarios ayudan a mejorar este Blog.