Personalizar la Nube de Etiquetas con CSS

En el tutorial de hoy aprenderemos a dar un estilo CSS a la nube de etiquetas deBloggerpara que tengan una apariencia más atractiva. Puedes elegir uno de los tres estilos que he creado o modificarlos como quieras.

Para instalar el gadget de Etiquetas para Blogger y personalizarlo con estilo CSS siga los pasos explicados a continuación.

Instalar el gadget de Etiquetas para Blogger

1. Nos dirigimos al Escritorio Blogger.
2. Hacemos clic en la pestaña Diseño.
3. Añadimos un gadget donde queramos mostrarlo y de la lista seleccionamosEtiquetas.
   
   
   
   
   
4. Configuramos el gadget como la siguiente imagen:

Lo importante es configurar las dos opciones del cuadrado rojo

Personalizar el gadget con CSS

Para aplicar el estilo a la nube de etiquetas seguiremos los siguientes pasos:

1. Ir a Escritorio Blogger.
2. En el menú seleccionamos Plantilla.
3. Hacemos clic en Editar HTML.
4. En el código buscamos lo siguiente:

]] ></b:skin>



5. Encima de ello tenemos que pegar uno de los siguientes códigos o modificarlo para personalizarlo a nuestro gusto:

Etiquetas Azules

HTMLEfectosTrucosRedes SocialesBloggerComentariosEntradasImágenes

.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%);
}

Etiquetas Rojas

HTMLEfectosTrucosRedes SocialesBloggerComentariosEntradasImágenes

.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

HTMLEfectosTrucosRedes SocialesBloggerComentariosEntradasImágenes

.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%);
}

Si quereis que sean de otro color tan solo teneis que modificar el código RGB de las etiquetas background-image

Para cualquier duda o problema en la instalación o personalización dejad un comentario más abajo.

Sobre Estibel cruz Estibel es un joven de 14años de republica dominicana, desde la adolescencia le encanto el mundo de Blogger Me gusta compartiles contenido,juegos,actualidad,etc Twitter | Facebook | Google Plus