En esta entrada voy a tratar de cambiar la ubicación del menú de páginas dentro del blog, en concreto para situarlo sobre el título dentro de la cabecera, para que pueda diferenciarse del menú de navegación desplegable que está situado bajo la cabecera del blog.
Cómo incluir el Gadget Páginas dentro de la cabecera del blog
El blog tiene el gadget de páginas bajo la cabecera, ver entrada "Cómo añadir un menú horizontal al blog (con Blogger)". Y bajo el gadget de páginas está situado un menú de navegación desplegable (ver entrada "Crear un menú horizontal desplegable en Blogger").
Voy a subir el Gadget Páginas para que se muestre dentro de la cabecera (sobre el título del blog).
El resultado será el siquiente,
El resultado será el siquiente,
Para mover el gadget de páginas voy al menú Diseño de Blogger.
El Gadget Cabecera de página está dentro de la Cabecera pero no puedo añadir un nuevo gadget al no incluirse + Añadir un gadget.
Blogger por defecto solo permite un gadget dentro de la Cabecera.
Blogger por defecto solo permite un gadget dentro de la Cabecera.
Habilitar la opción de añadir nuevos gadgets a la cabecera del blog
Para poder añadir un nuevo gadget a la cabecera del blog debemos editar el HTML de la plantilla después de hacer una copia de seguridad.
Vamos a Plantilla → Editar HTML
Dentro de la ventana de edición de la plantilla activamos el buscador con CTRL + F y escribimos 'region-inner header-inner'
Las dos líneas siguientes las debemos modificar. Inicialmente sus valores son los siguientes:
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cuaderno de aprendizaje_Marketing Digital (cabecera)' type='Header' version='1' visible='true'>
<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cuaderno de aprendizaje_Marketing Digital (cabecera)' type='Header' version='1' visible='true'>
Modificamos lo marcado en negrita,
<div class='region-inner header-inner'>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='2' name='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Cuaderno de aprendizaje_Marketing Digital (cabecera)' type='Header' version='1' visible='true'>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='2' name='Header' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Cuaderno de aprendizaje_Marketing Digital (cabecera)' type='Header' version='1' visible='true'>
🌑 Se modifica el valor de maxwidgets de 1 a 2 para que dentro de la cabecera se permitan como máximo incluir dos gadgets.
🌑 El nuevo valor de showaddelement pasa a ser yes para hacer visible + Añadir un gadget y pueda añadirse un nuevo gadget.
🌑 En Locked cambiamos su valor de true a false para poder mover el widget de una zona a otra dentro del diseño del blog.
Regreso al menú Diseño y compruebo que se ha añadido dentro de la Cabecera del blog + Añadir un gadget.
Por último, me posiciono sobre el Gadget Páginas (que en este caso está dentro de Cross-Column 2) y lo arrastro con el ratón hacia la Cabecera para situarlo encima del Gadget Cabecera de página.
Ahora el diseño de la Cabecera es el siguiente,
Guardo los cambios y visualizo el blog.
El menu de páginas (Gadget Páginas) ya se encuentra dentro de la cabecera pero ha perdido su formato.
El menu de páginas (Gadget Páginas) ya se encuentra dentro de la cabecera pero ha perdido su formato.
Como en todos los casos que queremos dar estilo a un gadget, debemos dar formato mediante código CSS.
Aplicar formato al Gadget Páginas mediante CSS
Voy a Plantilla → Editar HTML
Activo el buscador con CTRL+F, busco </b:skin> y pego las siguientes líneas justo encima de </b:skin>.
/*Menú páginas sobre título cabecera
---------------------------------------------------*/
.PageList ul { /*caja contenedor del menú páginas*/
background: none !important; /*sin estilo de fondo*/
}
.PageList li { /*estilo para las pestañas del menú páginas*/
display: inline; /*las pestañas se sitúan en línea*/
background: black; /*color negro para el fondo de las pestañas*/
margin: 2px; /*separación entre las pestañas del menú*/
padding: 10px 8px 5px; /*relleno de las pestañas*/
position: relative; /*posición relativa del menú de pestañas*/
top: 15px; /*posición arriba*/
right: 15px; /*posición derecha*/
border-radius: 6px; /*borde redondeado de las pestañas*/
border: 2px solid white; /*borde de las pestañas sólido blanco ancho 2px*/
}
.PageList li a { /*estilo de los títulos del menú páginas*/
color: white; /*color blanco fuente*/
font-size: 20px; /*tamaño fuente*/
}
#PageList1 li:hover { /*efecto hover sobre las pestañas del menú páginas*/
background: white !important; /*fondo color blanco efecto hover*/
}
#PageList1 li a:hover { /*efecto hover sobre título de las pestañas*/
color: black; /*fuente color negro efecto hover*/
text-decoration: none; /*para no heredar el efecto hover definido antes*/
}
---------------------------------------------------*/
.PageList ul { /*caja contenedor del menú páginas*/
background: none !important; /*sin estilo de fondo*/
}
.PageList li { /*estilo para las pestañas del menú páginas*/
display: inline; /*las pestañas se sitúan en línea*/
background: black; /*color negro para el fondo de las pestañas*/
margin: 2px; /*separación entre las pestañas del menú*/
padding: 10px 8px 5px; /*relleno de las pestañas*/
position: relative; /*posición relativa del menú de pestañas*/
top: 15px; /*posición arriba*/
right: 15px; /*posición derecha*/
border-radius: 6px; /*borde redondeado de las pestañas*/
border: 2px solid white; /*borde de las pestañas sólido blanco ancho 2px*/
}
.PageList li a { /*estilo de los títulos del menú páginas*/
color: white; /*color blanco fuente*/
font-size: 20px; /*tamaño fuente*/
}
#PageList1 li:hover { /*efecto hover sobre las pestañas del menú páginas*/
background: white !important; /*fondo color blanco efecto hover*/
}
#PageList1 li a:hover { /*efecto hover sobre título de las pestañas*/
color: black; /*fuente color negro efecto hover*/
text-decoration: none; /*para no heredar el efecto hover definido antes*/
}
El estilo del efecto hover es el que se puede ver a continuación,
¿Qué hacemos si el blog no tiene añadido el Gadget Páginas?
Los pasos a seguir son los mismos excepto que en lugar de arrastrar el Gadget Páginas ya existente y ubicado en otra zona del blog, tendríamos que hacer clic sobre + Añadir un gadget y añadir el Gadget Páginas.
