Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL BLOGGER: CÓMO HACER UN MENÚ POR CATEGORÍAS
#1
Bueno antes aclarar, que no es un menú como el de las páginas de blogger, así que no se puede poner el enlace a la página principal ni a páginas estáticas. Funciona igual que las etiquetas, ya que es ese mismo gadget pero con un poco de estilo para que quede más chachi.

Lo primero que tenemos que hacer es obviamente ir a Diseño → Agragar un gadget, elegimos el de etiquetas y marcamos la opción nube, esto es muy importante. Además, si tenéis muchas etiquetas podéis seleccionar las que queráis que aparezcan.

[Imagen: opciones-gadget-blogger-etiquetas.PNG]
[Imagen: pin-it.png]

Bien, hecho esto, vamos a ir a Plantilla → Personalizar → Avanzado → Añadir CSS, y pegamos este código:

.cloud-label-widget-content {
text-align: center; /*Donde queréis que quede alineado el texto*/
float:center;
font: normal normal 12px Arial; /*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: 1px solid #aaaaaa; /*Si queremos borde, si no borrar esta línea*/
color:#aaaaaa; /*color del texto*/
background: #ffffff;  /*color de fondo*/
text-decoration:none; 
}
.label-size a:hover {
border: 1px solid #aaaaaa; /*Borde al pasar por encima el ratón, si no queréis borde, borrar esta línea*/
color:#333333; /*Color del texto al pasar el ratón por encima*/
background: #cccccc; /*Color del fondo al pasar el ratón por encima*/
text-decoration:none;
}

• Por defecto está puesto para que el texto esté alineado en el centro, si lo queréis a la izquierda o derecha, sustituid center por left o right respectivamente.

• La tipografía que vais a usar, podéis ajustar su tamaño cambiando el 12 por el que preferáis y la tipografía usada cambiando el Arial por el nombre de dicha fuente.

• Si vais a usar un borde podéis personalizar el grosor cambiando el 1, el tipo de línea cambiando el solid (dashed es a rayas y dotted a puntitos) y el color cambiando su código hexadecimal. Si no queréis el borde borráis esa línea de código y listo.

• Podéis ponerle un color de fondo y cambiarle el color al texto Gran sonrisa

[Edito]: si os salen unas letras más grandes que otras debéis añadir además este código CSS; mil gracias a Y Durmieron Felices Guiño

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

Donde sólo tenéis que cambiar por el tamaño que queréis que tengan las letras, que debe ser del mismo valor Guiño

Y esto ha sido todo, un tutorial bien corto ¿verdad?


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Solucionado: Ayuda! Dominio Blogger NixonJ1 17 1,237 23-01-2017, 07:35 PM
Último mensaje: Vicen
  Ayuda! Dominio Blogger NixonJ1 1 425 22-01-2017, 04:19 PM
Último mensaje: Vicen
Pregunta Blogger Vs Wordpress oswaldo 14 1,162 02-01-2017, 11:35 PM
Último mensaje: onspot
  TUTORIAL BLOGGER: ENMARCAR EL BLOG inguzca 0 1,180 07-02-2016, 09:04 PM
Último mensaje: inguzca
  DOMINGOS MOLONES: COLABORACIÓN CON VELVET CAT (FREEBIES + TUTORIAL BLOGGER) inguzca 0 421 07-02-2016, 09:03 PM
Último mensaje: inguzca
  FREEBIES: BOTONES DE SUBIR PARA NUESTRO BLOG (Y TUTORIAL BLOGGER) inguzca 0 600 07-02-2016, 08:58 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: PERSONALIZAR EL MENÚ DE PÁGINAS inguzca 0 486 07-02-2016, 08:57 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO PONER UN BUSCADOR EN LA BARRA SUPERIOR inguzca 0 927 07-02-2016, 08:53 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: CÓMO PONER UNA BARRA SUPERIOR CON MENÚ DESPLEGABLE E ICONOS SOCIALE inguzca 0 2,352 07-02-2016, 08:52 PM
Último mensaje: inguzca
  TUTORIAL BLOGGER: PONER UNA BARRA ARRIBA DEL TODO EN EL BLOG inguzca 0 497 07-02-2016, 08:50 PM
Último mensaje: inguzca



Usuarios navegando en este tema: 1 invitado(s)