¡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.
- 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:
Texto en Capa 1
Texto en Capa 2
Texto en Capa 3
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".
Paso 1: Entrar en Editar HTML
Paso 2: Pulsa dentro del cuadro de código HTML en cualquier lugar
Paso 3: Pulsa Ctrl + F para ver el cuadro de búsqueda dentro del código (no el de la página web del navegador). Introduce "crosscol"
Pulsaremos Intro hasta llegar a una parte de código similar a ésta:
Seleccionaremos la parte de 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'.
Hay que comentar que esta acción es similar a entrar desde Blogger -> Diseño y dentro de la sección en negrita "crosscol", editar el elemento que contiene la barra de menú y suprimirla. Guardar cambios. Se recomienda probar la acción desde el código para ir cogiendo soltura y adaptarnos al código, lo que permitirá añadir más detalles y personalizar más todos los elementos del blog. Desde la interfaz visual "Diseño" de blogger solamente se pueden hacer acciones por defecto que aparte de incompletas, no siempre quedarán a nuestro gusto.
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:
En esta parte de código, después de la línea verde es donde cominza la definición de estilos de cada elemento de la página.
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 anterior termina con una llave de cierre } ,
En el propio código CSS se ha comentado entre /* */ cuáles son los atributos. Pueden dejarse estos comentarios y el código funcionará.
Para añadir los detalles de subelementos de lista y estilos de submenús, etc, aquí está el código CSS completo:
#barra-superior {
margin:auto;
width:100%;
background:#0E2047; /*Color de fondo de la barra*/
height:33px; /*Anchura de la barra*/
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
ul, ol {
list-style:none;
}
.menu > li {
float:left;
}
.menu{
margin:0 auto;
width:1000px; /*Ancho del menú dentro de la barra, variaremos este valor hasta conseguir el que buscamos*/
}
.menu li a {
color:#ffffff; /*Color de las letras de las pestañas*/
font:normal normal 14px Arial; /*Tamaño y tipografía de las pestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad esta línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
text-decoration:none;
padding:10px 30px;
display:block;
cursor:pointer;
}
.menu li a:hover {
color: #cccccc; /*Color de las pestañas al pasar el ratón por encima*/
}
.menu li i{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #adbcdc; /*Color de los iconos sociales*/
font-size: 14px; /*Tamaño de los iconos sociales*/
}
.menu li i:hover{ /*Esto es para los iconos sociales, si no los tenéis borrad este bloque*/
color: #ffffff; /*Color de los iconos sociales al pasar por encima*/
}
.menu li ul {
background-color: #333333; /*Color de fondo de las subpestañas*/
display:none;
position:absolute;
min-width:140px;
}
.menu li ul a { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #adbcdc; /*Color de las letras de las subpestañas*/
font:normal normal 14px Times New Roman; /*Tamaño y tipografía de las subpestañas*/
text-transform:uppercase; /*Para que esté en mayúsculas, sino borrad la línea*/
letter-spacing: 2px; /*Espaciado entre caracteres, si no queréis borrad la línea*/
}
.menu li ul a:hover { /*Si queréis que la letra sea igual que las pestañas, borrad esta línea*/
color: #ffffff; /*Color de las letras de las subpestañas al pasar el ratón por encima*/
}
.menu li:hover > ul {
display:block;
}
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.
Hay que comentar que el color de la barra se lo di usando Photoshop y consultando el patrón RGB del color la parte del cielo de noche original de la plantilla. Se puede por tanto, personalizar el color de la barra, de las letras y el color de ambas al pasar por encima ó pulsar (a través de código JavaScript)
Para más info, consultar: https://www.w3schools.com/tags/tag_div.asp
(incluye ejemplos prácticos)
Puedes encontrar y descargar un ejemplo completo actualizado pulsando aquí (1 archivo html):
Un saludo
Guardián del Alma
MUY INTERESANTE, me encanta el diseño de tu blog, es práctico, desearía aplicarla al blog de la web, te agradecería si pudieras actualizar el tuto. Muchas gracias amigo Guardián.
ResponderEliminarHola muy buenas. Bienvenido a este pequeño blog. Entraba aquí después de bastante tiempo sin tocarlo, precisamente para completarlo y mejorarlo un poco.
EliminarÉsta es la tercera versión de este blog, y ciertas cosas como esta parte de tutoriales está bastante incompleta y desactualizada. Como iba a proceder a completarlo y mejorarlo, me pondré ahora mismo a actualizar y completar esta sección.
Una parte interesante de este blog es que la imagen del paisaje de fondo cambia según la hora local: fondo de dia si la hora es de 8 am - 3 pm, de tarde si es desde 3 pm a 8 pm, y de noche el resto. Creo que este tipo de funcionalidad (hehco con javascript) sería útil para foros o blogs más grandes, ya que se podría definir una o varias imágenes en función de una fecha concreta y horas.
Crearé un nuevo tutorial para ello. Un saludo y gracias por la visita. :)
HE echado un vistazo a tu nuevo blog y rescataré la entrada en la que explicaba cómo ocultar el banner que por defecto pone blogger para el tena de aviso de cookies. En este blog esa barra aparece abajo del todo y en tonos muy discretos para que no obstaculice ningún contenido.
EliminarHola de nuevo. Sigo con la actualización y corrección del blog (en ratos libres) Las tareas que estoy realizando ahora son:
Eliminar1- Corregir enlaces en imágenes carrusel actual
2- Actualizar tutorial carrusel
3- Continuar corrección de formato y tablas entradas en blog por orden de antigüedad
Incluiré así mismo los siguientes enlaces a documentos Word con la explicación paso a paso de cada uno de los tutoriales, que puedes descargar libremente desde mi cuenta de Google Drive:
* TUTORIAL PARA AÑADIR CARRUSEL DE IMÁGENES PERSONALIZADO:
https://drive.google.com/file/d/1e3YAjV-CT5Rly4BMsOp4ayeDL5DAHY-G/view?usp=sharing
* TUTORIAL PARA PONER DEBAJO LA BARRA DE MENSAJE DE COOKIES Y CAMBIAR ESTILO:
https://drive.google.com/file/d/1P7foohiW6Cvvqc3It0QRgYHdJEDENrqK/view?usp=sharing
Próximamente añadiré los tutoriales para mostrar contenido en función de una fecha y hora programadas, así como añadir efecto de nieve en el blog -que también puede programarse para unas fechas concretas).
Un cordial saludo.