Personalizar la nube de etiquetas con CSS

Llamar la atención al lector hace que se interese más en tu blog, y pueda visitarte más seguido para ver tus novedades, y que mejor para llamar la atención personalizando la nube de etiquetas con CSS.

La mayoría de los Bloggers sabemos que las nubes de etiquetas son cajas llenas de etiquetas o categorías del contenido de nuestro sitio, las palabras más grandes son los temas con mayor información o importancia en nuestro sitio o las que más se visitan.

Al pasar el cursor las esquinas se redondean.

Antes que nada, primero veremos como insertar la nube de etiquetas en blogger.

• Nos vamos a Diseño, Añadir Gatget, y seleccionamos el que dice Etiquetas.

• Ahora configuramos el gadget como la siguiente imagen.

PERSONALIZANDO EL GADGET CON CSS

Para personalizarlo, nos vamos a Plantilla, Editar HTML, y adentro presionamos CTRL+F y buscamos]]></b:skin> y antes agregamos el código del color de la etiqueta que más te gusta.

Etiquetas Rojas

Código:

.Label a {
    background: #e53030;
    background-image: linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -o-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(229, 48, 48) 0%, rgb(225, 5, 5) 100%);
    padding-left:10px;
    padding:0 10px;
    color:#ffffff!important;
    border-radius:3px;
    -moz-border-radius:3px;
    height:24px;
    line-height:24px;
    text-decoration:none;
    border:0px solid #2c2f32 !important;
    -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    font-size:12px;
}
.Label a:hover {
    color:#ffffff !important;
    font-weight: bold;
    border-radius:15px;
    -moz-border-radius:15px;
    background: #aefb9e;
    background-image: linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -o-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(200, 39, 39) 0%, rgb(177, 10, 10) 100%);
}

Etiquetas Verdes

Código:

.Label a {
    background: #aefb9e;
    background-image: linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -o-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(174, 251, 158) 0%, rgb(126, 226, 106) 100%);
    padding-left:10px;
    padding:0 10px;
    color:#385234!important;
    border-radius:3px;
    -moz-border-radius:3px;
    height:24px;
    line-height:24px;
    text-decoration:none;
    border:0px solid #2c2f32 !important;
    -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    font-size:12px;
}
.Label a:hover {
    color:#ffffff !important;
    font-weight: bold;
    border-radius:15px;
    -moz-border-radius:15px;
    background: #aefb9e;
    background-image: linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -o-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(117, 183, 103) 0%, rgb(75, 136, 62) 100%);
}

Etiquetas Azules

Código:

.Label a {
    background: #0089e0;
    background-image: linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -o-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(51, 160, 230) 0%, rgb(0, 137, 224) 100%);
    padding-left:10px;
    padding:0 10px;
    color:#ffffff!important;
    border-radius:3px;
    -moz-border-radius:3px;
    height:24px;
    line-height:24px;
    text-decoration:none;
    border:0px solid #2c2f32 !important;
    -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
    float:left;
    margin-left:5px;
    margin-top:5px;
    font-size:12px;
}
.Label a:hover {
    color:#ffffff !important;
    font-weight: bold;
    border-radius:15px;
    -moz-border-radius:15px;
    background: #0089e0;
    background-image: linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -o-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(59, 138, 189) 0%, rgb(25, 106, 158) 100%);
}

Espero haber hecho entendible este tutorial para todos ustedes Imprimir artículo