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
- Nos dirigimos al Escritorio Blogger.
- Hacemos clic en la pestaña Diseño.
- Añadimos un gadget donde queramos mostrarlo y de la lista seleccionamosEtiquetas.
- 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:
- Ir a Escritorio Blogger.
- En el menú seleccionamos Plantilla.
- Hacemos clic en Editar HTML.
- En el código buscamos lo siguiente:
- Encima de ello tenemos que pegar uno de los siguientes códigos o modificarlo para personalizarlo a nuestro gusto:
Etiquetas Azules
.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
.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
.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.