13 de febrero de 2017

Añadir el Gadget de Páginas en la cabecera del blog

Añadir el menú de páginas en la cabecera en Blogger


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").

Ejemplo de gadget páginas y menú de navegación en un blog



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,

Gadget Páginas sobre título blog en la cabecera


Para mover el gadget de páginas voy al menú Diseño de Blogger.

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.

Diseño del blog en Blogger




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

Editar HTML de la plantilla

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'>


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'>


🌑 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.

Añadir un gadget a la cabecera del blog


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,

Incluir dos gadgets dentro de la Cabecera del blog


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.

Gadget Páginas sin formato en la cabecera


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*/
}


El estilo del efecto hover es el que se puede ver a continuación,

Efecto hover gadget páginas sobre título blog



¿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.

Añadir Gadget Páginas



No hay comentarios:

Publicar un comentario