Hasta el momento he visto cómo añadir diferentes gadgets en diversas áreas del blog pero todos desaparecen al hacer scroll y desplazarse por la pantalla, lo que puede resultar incómodo para el lector que está navegando por el blog si quiere, por ejemplo, consultar entradas en el archivo, hacer una búsqueda interna o acceder a los iconos de redes sociales porque está obligado a regresar al inicio de la página.
Una forma de evitarlo es establecer una posición fija al elemento para que permanezca en la misma posición aunque el usuario del blog se desplace haciendo scroll.
Barra de menú fija en la parte superior del blog
Voy a incluir en el blog de pruebas un menú de páginas en la zona superior del blog, encima de la cabecera y ocupando el espacio de la navbar o barra de navegación de Blogger.
Elimino la navbar de la plantilla del blog.
(Ver "Eliminar la barra de navegación de Blogger").
Y dentro del menú Diseño añado el gadget de Páginas haciendo clic en +Añadir un gadget.
(Ver entrada "Cómo añadir un menú horizontal al blog").
El widget de Páginas se identifica con el nombre "PageList1".
<b:widget id='PageList1' locked='false' title='' type='PageList'>
Una vez añadido el gadget de páginas en la parte superior del blog, el último paso es aplicarle estilo mediante CSS.
Estilo CSS del menú Páginas dentro de la barra de navegación (fijo en la parte superior del blog)
Voy a Tema (antes Plantilla) → Editar HTML
Dentro de la ventana de edición busco </b:skin> con CTRL+F y pego las siguientes líneas justo encima.
/*Menú Páginas fijo en navbar
---------------------------------------------------*/
#PageList1 { /*caja contenedor del gadget*/
background: linear-gradient(#CD6C0A 25%, #F2E8DE 75%, #cd6c0a); /*fondo degradado*/
border-radius:30px; /*bordes redondeados*/
width: 95%; /*ancho caja*/
position: fixed; /*posición fija*/
z-index:999; /*nivel de apilamiento*/
}
#PageList1 ul { /*caja contenedor de la lista de páginas*/
width: 100%; /*ancho caja*/
padding: 10px 0; /*relleno caja*/
margin: 0; /*margen caja*/
text-align: center; /*alineado al centro*/
}
#PageList1 li { /*pestañas del menú páginas*/
display: inline; /*las pestañas se sitúan en línea*/
position: relative; /*posición relativa*/
top: 2px; /*coordenada superior*/
margin-right: 20px; /*margen derecho*/
background: transparent; /*fondo transparente*/
border: 0px transparent; /*borde transparente*/
}
#PageList1 li a { /* títulos del menú páginas*/
color: #000000 !important; /*color blanco fuente*/
font: 14px Tahoma,Geneva,sans-serif; /*fuente*/
font-weight: normal; /*grosor de la fuente*/
letter-spacing: 3px; /*espacio entre las letras*/
text-transform: uppercase; /*cambio a mayúsculas*/
}
#PageList1 li:hover, #PageList1 li:focus { /*hover y focus sobre pestañas*/
background: white !important; /*fondo pestañas para hover y focus*/
}
#PageList1 li a:hover, #PageList1 li a:focus{ /*hover y focus sobre títulos pestañas*/
text-decoration: none;
}
---------------------------------------------------*/
#PageList1 { /*caja contenedor del gadget*/
background: linear-gradient(#CD6C0A 25%, #F2E8DE 75%, #cd6c0a); /*fondo degradado*/
border-radius:30px; /*bordes redondeados*/
width: 95%; /*ancho caja*/
position: fixed; /*posición fija*/
z-index:999; /*nivel de apilamiento*/
}
#PageList1 ul { /*caja contenedor de la lista de páginas*/
width: 100%; /*ancho caja*/
padding: 10px 0; /*relleno caja*/
margin: 0; /*margen caja*/
text-align: center; /*alineado al centro*/
}
#PageList1 li { /*pestañas del menú páginas*/
display: inline; /*las pestañas se sitúan en línea*/
position: relative; /*posición relativa*/
top: 2px; /*coordenada superior*/
margin-right: 20px; /*margen derecho*/
background: transparent; /*fondo transparente*/
border: 0px transparent; /*borde transparente*/
}
#PageList1 li a { /* títulos del menú páginas*/
color: #000000 !important; /*color blanco fuente*/
font: 14px Tahoma,Geneva,sans-serif; /*fuente*/
font-weight: normal; /*grosor de la fuente*/
letter-spacing: 3px; /*espacio entre las letras*/
text-transform: uppercase; /*cambio a mayúsculas*/
}
#PageList1 li:hover, #PageList1 li:focus { /*hover y focus sobre pestañas*/
background: white !important; /*fondo pestañas para hover y focus*/
}
#PageList1 li a:hover, #PageList1 li a:focus{ /*hover y focus sobre títulos pestañas*/
text-decoration: none;
}
position: fixed;
Propiedad position para definir la posición de un elemento con el valor fixed para que el elemento quede fijo sin desplazamiento, lo que va a crear apilamiento.
z-index:999;
Si el usuario se desplaza por la página, cuando el elemento fijo ocupe la posición de otro elemento quedará bajo él (apilamiento). Para evitar que ocurra esto y el gadget de páginas esté siempre visible hay que especificar su orden de apilamiento (un valor alto, por ejemplo 999) mediante la propiedad z-index, así la barra se mostrará sobre el resto de elementos
El resultado será el siguiente,
Imagen efecto hover y focus.
