Cómo poner barra de menú fija en tu blog



¡Hola a todos!

En esta ocasión voy a explicar cómo añadir la barra de menú que hay en la parte de arriba de este blog. Tiene la peculiaridad de que permanece fija al desplazarnos hacia abajo por el blog. También podría posicionarse en cualquier parte del blog, incluso en formato vertical a un lado, pero decidí mantenerla arriba para que fuera visible mientras nos desplazamos hacia abajo.

Sólo hay dos cosas que vamos a incluir en la plantilla:

- Una capa
- Un estilo


Bien, pasaremos a detallar estos dos objetos a continuación:


1)  Incluyendo la capa

En desarrollo web, llamamos capa  a un contenedor, a un objeto que simula una línea imaginaria que contiene o puede contener otros objetos web. Para definirlo, en lenguaje HTML usamos las etiquetas:

Como hemos dicho anteriormente, esta capa o 'div' , como suele llamarse en el argot de código HTML, es un contenedor. Simboliza un rectángulo que abarca otros objetos dentro del mismo. Normalmente el div   es invisible, pero mediante ciertos atributos podríamos verlo, poniéndole un color de borde por ejemplo. En la siguiente demostración vemos tres div  simples, coloreados el borde para verlos:



El código HTML utilizado es el siguiente:



Como vemos, simplemente a cada capa que engloba cada texto se le han dado unas propiedades de estilo dentro de la misma etiqueta div. Normalmente, en la etiqueta div  se le da un identificador a la capa, de la forma:


id='identificador'>


Haciéndolo así, podremos referirnos luego a esa capa a través de ese identificador. La ventaja de usar una capa es no solamente poder posicionar y organizar los elementos que contiene, sino también el aplicar los atributos de estilo que demos a la capa a todos esos mismos elementos.

Bien, sin más, tras haber hecho esta pequeña introducción para saber más o menos qué estamos haciendo, doy paso a detallar cómo introduje yo la barra de menú en mi blog. Lo primero fue quitar la barra de menú que venía prestablecida, eliminando el widget (objeto de diseño de blogger) llamado crosscol, en el que venía insertado un gadget que definía las pestañas 'Página principal', 'Acerca de mi', 'Contacto', etc. Así es cómo se veía originalmente mi plantilla:


Descargué esta plantilla desde:  



Ver cómo cambiar la plantilla de tu blog en Blogger



  1.1.  Eliminar la barra de menú anterior

  Bien, como había comentado anteriormente, una vez descargada la plantilla y habilitada en nuestro blog (se explicará en un próximo tutorial), iremos a la vista Plantilla -> Editar HTML  para eliminar el objeto crosscol que habíamos comentado antes. Para ello haremos click  dentro del cuadro de código y pulsaremos Ctrl + F  para introducir "crosscol". Pulsaremos Intro  hasta llegar al siguiente bloque de código:

























Seleccionaremos todo este código, desde el div class='second-row',  todo el código mostrado anteriormente, hasta las lineas en las que aparecen los cierre de etiquetas siguientes, justo antes de que comience el div con identificador 'content-wrapper':



















Una vez hecho esto, todo el código seleccionado hay que suprimirlo. Sin miedo. Una vez suprimido, pulsaremos el botón naranja de arriba 'Guardar cambios', y una vez que se hayan efectuado los cambios iremos a la vista Diseño para comprobar que el objeto crosscol que contenía la barra de menú anterior, ya no está. En este momento la plantilla estará sin barra de menú. Pero no os alarméis demasiado, el formato de la plantilla no ha variado demasiado, ya que la forma de fondo negro que tenía originalmente viene dada por la imagen de fondo de blogger. Haré también un tutorial para explicar cómo modificar esa imagen de fondo, aprovechando al mismo tiempo para explicar cómo varían las imágenes de fondo en mi blog según la hora del día (de 21h a 7h es de noche, de 7h a 16h sale fondo de día, y de 16h a 21h es fondo de atardecer)

Una vez comprobado que se ha eliminado correctamente el objeto crosscol, volvemos a la vista Plantilla ->Editar HTML



1.2.  Añadir el código de la capa

Una vez en la vista de código HTML, buscamos con Ctrl + F  tras haber pulsado dentro del recuadro de código, y buscamos la etiqueta 'body':

















Ya situados ahí, pegaremos el siguiente código para tener una barra de menú simple, con las tres opciones principales:  

    *  Página principal

    *  Acerca de mí

    *  Contacto


Después, para añadir submenús o más elementos de menú, podéis coger como ejemplo el código de la barra de menú de este blog:
Si bien aquí os lo muestro de una forma más "amigable" para tener una primera impresión:
2.  Añadir el estilo
Vamos ahora a añadir la capa de estilo. Es llamado también código CSS. Se recomienda buscar en Google tutoriales sobre este código, ya que existe desde hace bastantes años y sigue en plena evolución y desarrollo. Aquí simplemente nos limitaremos a 'copiar y pegar' la parte de código con la que tendréis un formato / estilo similar al de la barra de menú de este blog.
Podréis luego modificar a vuestro gusto cada elemento del menú, una vez que ya tengáis visible la barra. Después indicaré cada parte para qué sirve y qué característica o atributo tiene.
Iremos al cuadro de código de Plantilla -> Editar HTML  y pulsando Ctrl + F  buscaremos el siguiente texto:
Las letras que vemos en azul son el código CSS, correspondiente a las capas de estilos, o estilos de los objetos HTML. Cada capa de estilo comienza con un símbolo especial (#, . , ), un nombre y entre llaves los atributos del estilo. Copiaremos el siguiente código que es la capa de estilo de la barra de menú:
En limpio lo veremos así:
Como vemos, habrá que pegarlo entre dos bloques de código CSS:  el anterio termina con una llave de cierre } , y el siguiente bloque comienza con un identificador  (ul, ol )
En el propio código CSS se ha comentado entre /* */ cuáles son los atributos. Pueden dejarse estos comentarios y el código funcionará.
Una vez hecho esto, simplemente daremos en el botón naranja de arriba "Guardar plantilla" y podremos ver los resultados. Para cualquier duda o información, podéis dejarme un comentario al pie de esta entrada.
Un saludo
Guardián del Alma

No hay comentarios:

Publicar un comentario