En los Blogs, al igual que en cualquier publicación web, el orden y la presentación de las categorías de la información que manejamos puede ordenarse mediante un menú. La exposición de contenidos mediante un menú facilita a los usuarios el acceso a la información, consiguiendo mejorar su experiencia de uso.
Voy a explicar dos menús básicos en cualquier publicación web: un menú de un sólo nivel y un menú con subopciones (de más de un nivel). Finalmente explicaré cómo conseguir personalizarlos en Blogger como menús fijos, con distintos colores, formas... todo lo que necesitas para conseguir que tu Blog disponga de un menú con toda tu información personalizada y montada a tu gusto.
CONCEPTOS PREVIOS, CÓMO SE COMPONEN LOS MENÚS EN BLOGGER:
- El menú en Blogger: El menú en Blogger, al igual que en otras publicaciones web se forma en la plantilla Blogger, basándose en unas hojas de estilo (.css), en el cuerpo de la plantilla que se está utilizando para la presentación del Blog. Expliquemos paso a paso cada concepto, conviene tenerlos muy claros para entenderlo mejor.
- La plantilla Blogger: En el lenguaje más abstracto y menos técnico, la plantilla es el modelo de presentación sobre el que vas a trabajar para mostrar los contenidos de tu Blog. Se le denomina plantilla porque va a definir dónde y cómo se van a mostrar tus contenidos en el Blog. Por ejemplo, define dónde va a ir colocada la cabecera con el título del blog, qué tipos de letra se van a mostrar, con qué colores, qué componentes van a "dibujarse" y cómo van a hacerlo... es la base de la presentación que verán tus usuarios cuando accedan a tu Blog.
En un plano técnico, la plantilla es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas "propias" de Blogger que al ser interpretadas conforman la presentación del blog.
El menú vamos a crearlo dentro de la plantilla Blogger.
- Las hojas de estilo (.css): las páginas web basan su presentación fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que integran dicha página.
Simplificando técnicamente, son archivos externos que le dicen a cada componente que utilizamos en nuestra página web (cajas de texto, títulos, comentarios, etc...) qué formato deben tener para darle un "estilo", una presentación.
Como a cualquier otro elemento de una página web, el menú mostrará su presentación gracias a la hoja de estilo con la que trabaje nuestra plantilla.
Establecen, por citar ejemplos simples que puedan comprenderse al instante, el espaciado entre caracteres, el margen entre un marco y el texto, el color que se va a utilizar en las letras...
En cualquier publicación web se incluyen primero, antes del cierre de la etiqueta </head> para que luego el resto del código pueda referenciarlas.
Se pueden ver en el HTML de cualquier sitio web porque quedan declaradas de la siguiente forma: <link href='URL_A_LA_CSS' rel='stylesheet' type='text/css'/>.Donde URL_A_LA_CSS es la dirección donde se encuentra almacenada la hoja de estilos que estamos utilizando.
Etiqueta <b:skin><![CDATA[TUS_ESTILOS]]></b:skin>:
En Blogger el contenido de las hojas de estilo en la plantilla se suelen indicar antes de que cierre la etiqueta "</head>". Entre medias de la etiqueta <b:skin> y </b:skin>, escribirás dentro de <![CDATA[ ]]> los estilos con los que trabaja la plantilla.
El menú en Blogger:
El menú en Blogger, al igual que en cualquier publicación web, se construirá a partir de:
- Unas clases de la hoja de estilos de la plantilla que definen la presentación que tendrá el menú (aspecto, colocación, forma, color, etc...).
- Un código en el cuerpo de la plantilla que definirá su estructura (las categorías y opciones que lo componen.
Es decir, las clases de la hoja de estilo (el código que explicábamos se encontraba dentro del texto CDATA) dicen qué aspecto, qué presentación tendrán los componentes que conforman el menú con sus categorías y opciones que luego dibujaremos en el cuerpo del menú.
Simplificando con un ejemplo que mezcla el código con los conceptos aprendidos podríamos visualizarlo así:
<b:skin><![CDATA[
#clase menu{
el menú debe tener "tal tamño"
el menú debe ser "de este color"
debe tener este "tipo de letra"
etc...]]>
<body> (cuerpo de la plantilla)
<menu> aplicando la presentación de la #clase menu, debe componerse de:
- Categorías
- Opciones dentro de cada categoría
Así pues, como podemos ver en el ejemplo, en la plantilla dentro de la hoja de estilos <b:skin><
2) Se mostrará el diseño que has decidido crear para tu Blogger. A continuación pulsa dentro del escritorio de diseño "Añadir un Gadget", tratándose de un menú te recomiendo que utilices la opción de Añadir Gadget que según el diseño de tu blogger mejor quede para dejar el menú en la parte superior, a la derecha o a la izquierda. Selecciona el Gadget de Google "HTM/Javascript".
3) Cuando se abra el cuadro de configuración del gadget "HTML/Javascript" verás una pantalla como la que te muestro en la pantalla inferior, con una caja de texto para poner "Título" y otra caja más grande donde insertar código Javascript.
4) Añade en la caja de texto que tendrá el código Javascript el código que te explico a continuación (copia y pega este texto o el del ejemplo, procura que no haya retornos de carro que dividan en partes incorrectas el código):
<ul id="menu">
<li><a class="selected" href="http://Direccion_de_tu_blog">Inicio</a></li>
<li><a href="Direccion_blog/search/label/concepto_agrupador">Opción_de_ Menu</a></li>
</ul>
- Dentro de la etiqueta "<ul>" hasta "<ul>" metemos las opciones de menú que vamos a tener.
- La opción "Selected" es la principal, en mi caso, es donde presento las entradas del blog según las voy creando.
- Cuando pulsen en "Selected" se carga automáticamente en el marco principal, todas las entradas que tenemos en el blog (como siempre, como podéis ver en mi propio blog al acceder). Por ello en "href" introducimos la URL de nuestro propio blog.
- Después creamos un "a href" por cada opción de menú que deseamos crear. En cada un de los a href se pondrá la dirección de nuestro blog seguido de "/search" seguido de "/label" y seguido del "concepto agrupador" de entradas de nuestro blog por el que queremos que cuando el usuario pulse la opción, se busquen en el blog aquellos contenidos que pertenecen a dicho concepto agrupador.
<ul id="menu">
<li><a class="selected" href="http://Ejemplo.blogspot.com">Inicio</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/tecnologia">Tecnología</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/ocio">Ocio</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/opinion">Opinión</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/consumo">Consumo</a></li>
</ul>
- En el ejemplo, se llama a la página principal del blog que dibujará todas las entradas en el orden que las vamos creando como siempre.
- Luego se presenta cada opción de menú con su concepto agrupador de entradas que el usuario no verá. Así, cuando el usuario haga "clic" sobre "Tecnología" por ejemplo, estará haciendo una búsqueda que agrupa todas aquellas entradas que contengan la etiqueta "tecnología" en su interior. Así mismo sucedería con las sucesivas opciones de menú.
- El resultado del ejemplo es el que puedes ver en mi menú (pero en cada blog se creará con la hoja de estilos que cada uno haya decidido utilizar en su plantilla)
- Dependiendo de vuestra hoja de estilos, que va en función de la plantilla Blogger que utilizasteis, el menú tendrá la apariencia adecuada a vuestro blog. A parte de horizontalmente, dependiendo de dónde y cómo coloques el "Gadget HTML/Javascript", se puede crear verticalmente (y donde quieras arriba, abajo a izquierda o derecha).
5) Un paso tan importante como la adición del javascript. En cada entrada deberás añadir como etiqueta la palabra que pongas a continuación de "label". En el ejemplo sería "tecnologia, ocio, opinion, consumo" (porque incio es la principal y ahí no se utilizan etiquetas). En la imagen inferior te he recuadrado con unas líneas negras dónde deberás añadir la etiqueta que se convierta en tu concepto agrupador de páginas bajo la opción de menú.
La adición de etiquetas como te expliqué aquí es útil no sólo por el ejemplo que ahora te estoy dando para hacer con ellas un menú, sino también porque le permiten al buscador no tener que "leer" toda tu entrada para presentar el resultado después en pantalla, es decir, la etiqueta le dice al buscador directamente de lo que trata tu entrada sin leerla.
De esta manera, una vez hayas ido rellenando la zona de etiquetas que te mostré en el paso "5)" de cada entrada que tengas, conseguirás que quede la información bien estructurada en un menú que agrupa los conceptos en base a las etiquetas.
PASO A PASO HAZTE UN MENÚ DE MÁS DE UN NIVEL EN BLOGGER, MENÚ MULTI-NIVEL, CON SUBOPCIONES:
Este tutorial lo tienes disponible haciendo "clic" aquí en una página a parte para mayor facilidad.
0) En primer lugar realiza una copia de seguridad de tu sitio. La colocación de una hoja de estilos (".css") en tu blog requiere realizar unas modificaciones en código que, aunque realmente sencillas, requieren que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog:
1) Comenzamos conectándonos a cssmenumaker.com y seleccionando uno de los ejemplos del catálogo que ofrece. Por defecto, dentro de la página inicial tendremos activo los menús de tipo "Drop down". De ellos voy a seleccionar el segundo del ejemplo.
2) Una vez hemos escogido el menú, pulsamos sobre el botón Download Source.
3) Se descargará en la carpeta del disco duro que elijamos la carpeta "source". En su interior habrá una subcarpeta llamada "cssmenu" donde habrá un .html con las instrucciones base para crear el menú. En la subcarpeta "menu_assets" se encontrará la hoja de estilos .css que sirve para trabajar con nuestro menú, así como el .png o imagen (si es que el menú escogido la tiene) que acompaña a la configuración del mismo.
Si el menú elegido consta de imágenes para componer el fondo:
4) Subiremos a Google Drive la imagen "overlay.png". Elijo este almacén de datos en la nube por su fiablidad y porque, teniendo usuario Google podremos utilizar con total libertad. Luego en la citada herramienta de almacenamiento de Google pondremos como público el acceso al .png que vamos a utilizar en el ejemplo.
5) Una vez subido el .png, apuntaros la URL desde donde se va a encontrar disponible.
6) Abrid el archivo "styles.css" y donde ponga "url(images/overlay.png)" poned dentro la URL pública que os dió Google Drive al hacerla pública. Es decir, sustituid url(images/overlay.png) por url(URL_DE_GOOGLE_DRIVE/
7) En Blogger, no vamos a modificar la plantilla original sobre la que trabajamos, fundamentalmente porque sólo queremos añadir un nuevo menú sin impactar en el resto del blog. Para poder realizarlo limpiamente subiremos la hoja de estilos "styles.css" modificada con la URL a la imagen "overlay.png" a Google Drive. Luego en la citada herramienta de almacenamiento de Google pondremos como público el acceso al .css que vamos a utilizar en el ejemplo para que sea accedida por el navegador para dibujar nuestro menú.
8) Una vez subido el .css, apuntaros la URL desde donde se va a encontrar disponible.
9) En vuestro blog, dirigiros a la opción de menú plantilla y pulsad "Editar HTML".
10) En el código fuente de vuestra etiqueta añadid justo antes de la etiqueta "</head>" el enlace en Google Drive a vuestro .css con este código: <link href='URL_DE_GOOGLE_DRIVE/
11) Añadid un gadget <Javascript/HTML> donde queráis que resida el menú, tal como hicimos en la entrada para el menú de un sólo nivel.
12) Editad el código e introducid dentro del gadget el siguiente código:
<div id="cssmenu">
<ul>
<li><a href="http://LA_URL_PRINCIPAL/index.html">Home</a></li>
<li class="has-sub "><a href="LA_URL_A_CATEGORÍA1">Tecnologia</a>
<ul>
<li><a href="LA_URL_A_SUBCATEGORÍA1">Product 1</a></li>
<li><a href="LA_URL_A_SUBCATEGORÍA2">Product 2</a></li>
</ul>
</li>
<li><a href="LA_URL_A_CATEGORÍA2">About</a></li>
<li><a href="LA_URL_A_CATEGORÍA3">Contact</a></li>
</ul>
</div>
Cada <li class="has_sub "> contendrá el enlace a la página o a la instrucción "/search" (mirar ejemplo en menú de un sólo nivel) que nos sirve para localizar entradas con nombres de etiquetas determinados o nombres absolutos de las entradas ".html" a las que deseemos llamar. Después, tras el cierre de la etiqueta de "href", encontraremos el literal que desamos asignar a la opción del menú. Un "<li class="has-sub" indica que contiene subenlaces en su interior donde podremos poner por fin los subniveles con las temáticas en las que deseamos dividir la opción principal.
Si no quieres utilizar Google Drive para guardar los .css del menú: puedes copiar y pegar el código del .css del menú dentro del <b:skin><
e la etiqueta de "href", encontraremos el literal que desamos asignar a la opción del menú. Un "<li class="has-sub" indica que contiene subenlaces en su interior donde podremos poner por fin los subniveles con las temáticas en las que deseamos dividir la opción principal.
ResponderEliminarHola! Tengo un problema, a ver si puedes ayudarme...
ResponderEliminarLos títulos de mi cabecera salen muy grandes y no sé si ese es el motivo por el cuál no me deja añadir más pestañas.. (al añadir una que se llama "ideas", se me borró la de instagram).. pues ahorahe intentado enlazar con etiquetas unas entradas a esta pestaña de "ideas" y no me sale! Se ve en el menú pero no me deja clicar encima..como si no hubiera nada y peor aún... Cuando voy a configuración> páginas.. sólo me sale que tengo 3 cuando en realidad tengo 7 y la última es esta que digo de "ideas".. Qué le puede suceder a mi blog? me vuelvo loca!!
Muchas gracias de antemano.
Hola dolce Pao,
ResponderEliminarpara poder ayudar con más precisión, escríbeme directamente la dirección de tu Blog y así puedo verlo "in situ". Parece un tema de hojas de estilo el problema.
Un saludo!
Hola Miguel! Gracias por responder, aquí te dejo mi blog.
Eliminarwww.dolcepao.blogspot.com
Un saludo y gracias.
Hola!, perdona que no haya podido atenderte antes pero he estado a tope.
Eliminarel título de la cabecera está en un "contenedor" (en un div) distinto de donde tienes el menú, así pues eso no impedirá que añadas más opciones al citado menú,
Veo que ya has aplicado la solución poniendo el icono de Instagram en otro Div ditinto al del menú. Como estaba en el mismo div que el menú se deplazaba a la derecha.
Un saludo!!!
Tranquilo, no pasa nada que tardes, agradezco que respondas :).
EliminarSí, al final puse el icono de instagram al lado, pero por ejemplo donde está el menú de la cabecera, no se puede clicar dentro de la opción IDEAS.. y al querer editarlo tampoco me deja, pues sale que no existe en el menú dicho título.