8 modelos para etiquetas

Hey babies! Siento que hace como mil años que no traía un tutorial para el blog, así que hoy traigo 8 modelos para usar en el widget de etiquetas que vi en este blog y como está en polaco, he decidido traerlos al español porque estoy usando uno de sus modelos y me parecen muy bonitos y personalizables.

Antes de empezar, debes tener activado el gadget de Etiquetas si todavía no lo tienes, para ello vamos a Diseño > Añadir un gadget > Etiquetas y dejarlo en modo lista (no en nube) y debería quedar algo así:

Ahora solo necesitas elegir uno de los siguientes modelos y copiar el código y pegarlo ANTES de ]]></b:skin> y personalizarlo al gusto.

Nota: Si, como yo, tienes los títulos de los gadgets personalizados, recomiendo eliminar todo lo que hay en Label h2 { dejándolo completamente blanco ya que sino lo cambiará todo.

 

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:center;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-left: 10px solid #d9d9d9; /*color de los cuadrados*/
margin:5px 0;
padding:0 5px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*color del texto de la etiqueta*/
}
.Label ul li a:hover {
border-left: 10px solid #ebb6b3; /*color de los bordes de los cuadrados al pasar el ratón*/
color:#ebb6b3; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/

letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border: 1px solid #d9d9d9; /*color del borde*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*color del texto de la etiqueta*/
}
.Label ul li a:hover {
border: 1px solid #ebb6b3; /*color del borde al pasar el ratón*/
color:#ebb6b3; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/

letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
background:#222222; /*color de fondo*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#ffffff; /*color del texto de la etiqueta*/
}
.Label ul li a:hover {
background:#ebb6b3; /*color del fondo al pasar el ratón*/
color:#ffffff; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/

letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-wrap: wrap;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-bottom:2px solid #d9d9d9; /*color del subrayado*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*color del texto de la etiqueta*/
}
.Label ul li a:hover {
border-bottom:2px solid #ebb6b3; /*color del subrayado al pasar el ratón*/
color:#ebb6b3; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:center;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;
display:flex !important;
justify-content:center !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-left: 10px solid #ebb6b3; /*color del borde*/
border-right: 10px solid #ebb6b3; /*color del borde*/
margin:5px 0; padding:0 5px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*color del texto de la etiqueta*/
}
.Label ul li a:hover {
border-left: 10px solid #ebb6b3; /*color del borde al pasar el ratón*/
border-right: 10px solid #ebb6b3; /*color del borde al pasar el ratón*/
color:#ebb6b3; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul { list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border: 1px solid #d9d9d9; /*color del borde*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#222222; /*color del texto de la etiqueta*/
width:100%;
text-align:center;
}
.Label ul li a:hover {
border: 1px solid #ebb6b3; /*color del subrayado al pasar el ratón*/
color:#ebb6b3; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
background:#222222; /*color del fondo*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:left;
color:#ffffff; /*color del texto de la etiqueta*/
width:100%;
text-align:center;
}
.Label ul li a:hover {
background:#ebb6b3; /*color del fondo al pasar el ratón*/
color:#ffffff; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}

.Label h2 {
text-transform:uppercase;
color:#000000; /*color del título de gadget*/
font-family:'Roboto',sans-serif !important; /*fuente del título del gadget*/
letter-spacing:1px;
text-align:center;
}
.Label, .Label .widget-content {
position:relative !important;
width:100%;
}
.Label ul {
list-style:none !important;
display:flex !important;
justify-content:flex-start;
align-itms:center;
flex-direction:column;
padding: 0 !important;
}
.Label ul li {
min-width:20%;padding: 0 !important;
display:flex !important;
justify-content:flex-start !important;
}
.Label ul li a:link, .Label ul li a:visited {
border-bottom:2px solid #d9d9d9; /*color del borde*/
margin:2px;
padding:8px;
font-family:'Roboto',sans-serif !important; /*fuente etiquetas*/
letter-spacing:1px;
text-transform:uppercase;
font-size:9px;
text-align:center;
color:#222222; /*color del texto de la etiqueta*/
width:100%;
}
.Label ul li a:hover {
border-bottom:2px solid #ebb6b3; /*color del borde al pasar el ratón*/
color:#ebb6b3; /*color de las etiquetas al pasar el ratón*/
text-decoration:none !important;
}