marzo 1, 2022

Cómo cambiar el Color/Estilo de la Barra de navegación de Blogger

Diciembre 7, 2019

Personalmente, no soy un gran fan de la barra de navegación de blogger, y a menudo la verás oculta en nuestras plantillas de blogger prefabricadas. De vez en cuando, recibo una solicitud para hacerlos visibles de nuevo para que puedas usarlos para iniciar sesión rápidamente en tu blog. Para aquellos de ustedes que les gusta tener esta pequeña barra levantada, aquí hay una breve guía sobre cómo personalizar la barra de navegación de blogger cambiando su color o ocultándola temporalmente.

Personaliza la barra de navegación de blogger

#1 Cambia el color

Ve a tu panel de control de Blogger. Puedes hacerlo usando tu barra de navegación o visitando la página blogger. Una vez que haya iniciado sesión, vaya a la sección Diseño del menú de la izquierda.

Sección de diseño del panel de blogger

A la derecha, localice la sección de la barra de navegación y haga clic en el botón editar en la esquina inferior derecha de esta sección.

Personalizar la barra de navegación de blogger

Aparecerá una nueva ventana emergente, que mostrará algunos estilos diferentes que puede elegir para personalizar la barra de navegación de blogger.

Opciones de color y estilo de la barra de navegación de Blogger

Elige el que más te guste y haz clic en «guardar».

¡Eso es todo! La barra de navegación ahora está actualizada.

#2 Ocultar la barra

Para aquellos de ustedes que les gusta tener una barra de navegación de blogger, pero no les gusta cómo se ve, tenemos una opción perfecta. Puede hacer que la barra sea visible solo cuando alguien pase el cursor sobre el espacio donde debe estar.

Se puede ver un ejemplo, por ejemplo, en el diseño del Bailee.

Esta vez tendrás que visitar la sección Temática de tu Panel de Blogger.

Cómo ocultar la barra de navegación de blogger

Haz clic en el botón’ Editar HTML ‘ debajo de la miniatura de tu diseño a la derecha y agrega el siguiente código a tu estilo de diseño:

/* NAVBAR */#navbar {opacity:0; filter:alpha(opacity=0);}#navbar:hover {opacity:0.7; filter:alpha(opacity=70);}

Si no está seguro de dónde agregarlo, la forma más fácil es encontrar la siguiente línea:

]]></b:skin>

y pegue el código de arriba.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.