15/1/18

Cómo hacer un menú con etiquetas

Hoy os voy a enseñar a hacer un menú con vuestras etiquetas, es muy fácil y lo único que hay que hacer es añadir un CSS. Podéis hacerlo ya sea para sustituir al menú que os he enseñado anteriormente o para hacer un segundo menú con las secciones que tenéis en vuestro blog. Lo he probado y funciona perfectamente así que no creo que tengáis problemas para instalarlo. 

Lo primero que tenéis que hacer es ir a diseño, añadir nuevo gadget y seleccionar Etiquetas. Es importante que pongáis que esté en nube porque de otra forma este código no sirve para nada, ¿vale? para personalizarlo tenéis que hacer lo de siempre: Tema, personalizar, avanzado y añadir CSS. 

Pegad este código:

.cloud-label-widget-content {
text-align: center; /*Donde queréis que quede alineado el texto*/
float:center;
font: normal normal 12px Open Sans; /*Tipografía*/
text-transform: uppercase; /*Para que quede en mayúsculas, si no borrar esta línea*/
}
.label-size a {
display: block;
margin: 2px 2px 0 0;
padding: 4px;
border-left: 5px solid #C0392B; /*Si queremos borde, si no borrar esta línea*/
color:#212121; /*color del texto*/
background: #EFEBE9;  /*color de fondo, si lo queréis transparente poned none o transparent*/
text-decoration:none;
letter-spacing: 2px;
transition: all 0.4s ease-in-out 0s;
}
.label-size a:hover {
border-left: 15px solid #DC7F9B; /*Si queremos borde, si no borrar esta línea*/
color:#757575; /*Color del texto al pasar el ratón por encima*/
background: transparent; /*Color del fondo al pasar el ratón por encima, podéis ponerle color*/
text-decoration:none;
letter-spacing: 4px;
transition: all 0.4s ease-in-out 0s;
}
.label-size-1 a {font-size: 12px;}
.label-size-2 a {font-size: 12px;}
.label-size-3 a {font-size: 12px;}
.label-size-4 a {font-size: 12px;}
.label-size-5 a {font-size: 12px;}

.label-size-1 {opacity:1;}
.label-size-2 {opacity:1;}
.label-size-3 {opacity:1;}
.label-size-4 {opacity:1;}
.label-size-5 {opacity:1;}


Como siempre, lo de rojo lo podéis personalizar y lo que está en verde es lo que podéis borrar si no lo queréis. Espero que os sea útil y lo utilicéis mucho, si tenéis algún problema podéis contactar conmigo.

De dónde lo he sacado: el código me lo ha pasado Gema del blog Delirios a máquina porque no lo encontraba.

No hay comentarios:

Publicar un comentario