Creación y personalización de menús en Blogger paso a paso.





La creación de menús en páginas web es fundamental para la estructuración de la información a la que los usuarios pueden acceder.

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><![CDATA[ se define cómo va a ser la presentación del menú que luego en el <body> o cuerpo de la plantilla se llama para que forme las categorías y opciones del menú según deseamos.Veamos cada punto a continuación.
Dentro de la hoja de estilos, qué clases suelen conformar en Blogger la presentación de mi menú:
Normalmente en Blogger encontrarás las clases del menú en tu plantilla, dentro del código <b:skin><![CDATA[ podrás buscar la clase #menu (esto es un ejemplo de una plantilla, si bien las clases casi todas existirán, los parámetros que contienen son meros ejemplos y no tienen que coincidir con los que utiliza tu plantilla):

#menu {
width: 1000px;
height: 40px;
position: left;
left: 500px;
top: 41px;
overflow: hidden;
} Cada plantilla tiene sus propios estilos para el menú y puede utilizar más o menos clases, pero todas suelen tener compuestos los menús por la clase #menu. En ella podemos ver cómo está definiendo por ejemplo el ancho: width: 1000px; y el alto height: 40px; que el menú va a tener. #menu ul li { padding: 0 22px;
font-size: 2em; Menu Font Size
font-weight: bold;
text-align: center;
float: left;
background: url(la que sea) left 9px no-repeat;
} Esta clase ul li especifica por ejemplo el aspecto que tendrá cada opción dentro del menú. El font-size: 2em; está especificando el tipo de letra en tamaño proporcional a la resolución de la pantalla donde se dibuja, etc... Así encontraremos varias clases de #menú que configurarán el aspecto que éste tendrá en la plantilla por medio de la hoja de estilos (el código que tenemos en CDATA).Cómo suele dibujarse un menú en Blogger en el cuerpo de la plantilla:
Luego, en la plantilla, en la zona donde deseemos poner el menú (siempre irá dentro del <body> de la plantilla, el cuerpo que normalmente suele ser en Blogger: <body expr:class="&quot;loading&quot; + data:blog.mobileClass">) irá la definición del menú:

<div id="menu"><ul><li><a href="Llamada_que_realiza_la_opción_cuando_el usuario_pulse">Literal_del_menu</a></li></ul></div>Aquí podemos ver donde con <div id="menu"> estamos indicando que se utilice la clase #menu que definimos en la hoja de estilo con los parámetros para la presentación del menú (el color, el tamaño, el tipo de letra, etc...) con la estructura:

<a href="Llamada_que_realiza_la_opción_cuando_el usuario_pulse">Literal_del_menu</a><ul>

Donde en <a href="Llamada_que_realiza_la_opción_cuando_el usuario_pulse"> estamos indicando la orden o la llamada que queremos que se ejecute cuando el usuario haga "clic" en la opción del menú y en Literal_del_menu ponemos el literal que queremos que salga en la opción del menú al usuario en pantalla. 

Veamos ahora ejemplos paso a paso para crear un menú de un sólo nivel o de varios niveles:

PASO A PASO HAZTE UN MENÚ SIMPLE EN BLOGGER, MENÚ DE UN SÓLO NIVEL:

Este tutorial  lo tienes disponible haciendo "clic" aquí en una página a parte para mayor facilidad.

La adición de un menú en blogger, puede llegar a realizarse de diversas maneras, algunas pueden resultar ineficientes o hacernos realizar un trabajo inútil para el mantenimiento del mismo. Voy a planteraros un menú sencillísimo que os permite agrupar vuestros contenidos en conceptos:

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) Dirígete en Blogger a la pantalla principal y en el menú izquierdo de opciones pulsa en "Diseño"



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>Opción_de_ Menu</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.

Por ejemplo quedaría algo así con el menú de un hipotético blog con una estructura parecida a la mía:

<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>Ocio</li>
<li>Opinión</li>
<li>Consumo</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).

 En este paso ya tendrás creado el meú, pero sin que sea interactivo totalmente, dado que ahora tenemos que crear las etiquetas en las entradas, basándonos en el ejemplo anterior, que nos permitan agrupar bajo el concepto "Tecnología" todas las entradas en las que metamos la etiqueta (label) "tecnologia", en "Ocio" todas las entradas en las que metamos la etiqueta "ocio" y así sucesivamente.

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/
overlay.png) donde "URL_DE_GOOGLE_DRIVE" es la dirección que Google Drive te dió como URL pública para el archivo .png que subiste.

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/styles.css" rel="stylesheet" type="text/css"/>   Donde "URL_DE_GOOGLE_DRIVE/styles.css" es la dirección que Google Drive te dió como URL pública para el archivo .css que subiste.

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>Home</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><![CDATA[ de tu Blog. Es MUY IMPORTANTE que renombres las clases si se llaman como otras que ya existan en la plantilla para que así no se sobreescriban las clases que conformen tu menú. Después recuerda en el cuerpo de la plantilla llamar al <div id="nombre_que_pusieras_a_las_clases_del_menu_en_CDATA">.



Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Modificado:
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Etiquetas: general

Recomendamos

Relacionado

desde0

Crear un menú en cualquier Blog es algo fundamental para organizar nuestros contenidos de manera que podamos presentarlos a nuestros usuarios de una manera estructurada y sencilla. Hemos tratado con anterioridad cómo crear un menú sencillo en Blogger sin tener ninguna experiencia en programación, con simples opciones que agrupan entradas bajo las etiquetas de tu Blog y que se puede poner con suma ...

general

La creación de un menú fijo para la parte superior del Blog es una popción a tener en cuenta dependiendo del tipo de presentación y la plantilla que se está utilizando. Cuando tratamos Blogs que enumeran gran cantidad de entradas y estas hacen qe haya que desplazarse verticalmente por los contenidos, el usuario puede quedar desprovisto de elementos de navegación hasta que llega a la parte inferior ...

propuestas

Hemos visto cómo crear sencillos pero útiles menús para Blogger en Diarios de la nube con los que organizar y exponer los contenidos a nuestros visitantes. Con el tiempo, la forma de mostrar estos menús han ido evolucionando hasta llegar a una nueva presentación que se realiza a pantalla completa. Los menús de pantalla completa están cobrando un fuerte protagonismo en los diseños de presentación d ...

general social

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...

general

Sabéis que tengo pendiente sacar un curso de html y css, porque si bien habrá cientos, los que yo he visto no están muy bien explicados. O yo soy muy boba, que también puede ser, pero si antes de saber yo, me lo hubiesen explicado así, me habría quedado igual... Yo misma traté de seguir uno hace tiempo y además se me hacía tan tostón, que lo dejé a la segunda lección jaja, viva mi disciplina. Al ...

general

La generación de un índice de entradas automático para un blog es algo que muchos Bloggers anhelan utilizar en sus páginas: para crear índices con las recetas de cocina, con las películas y sus críticas, con las fotografías, los poemas, los escritos, las plantas, animales... un sinfín de conceptos que cada Blog maneja según su temática y que dada su cantidad es imposible exponer a los usuarios en ...

general seo

Los datos estructurados son una herramienta fundamental en la presentación de los resultados de búsqueda en Google. Gracias a ellos, Google puede presentar información de eventos, rangos de precios, evaluación media del sitio (con estrellas) y gran cantidad de datos en el resumen de la búsqueda que pueden hacer que un usuario se interese más por ese resultado que por otros que no se aprovechan de ...

general propuestas

Hoy día una web o un Blog no sólo se visualiza en ordenadores, ahora es necesario cuidar también su presentación en dispositivos móviles. Los usuarios utilizan pantallas de toda clase y tamaño para adentrarse en nuestros contenidos, debemos cuidar la manera en que mostramos la información para que sea fácilmente accesible desde cualquier aparato. Una parte fundamental de cualquier web o Blog son s ...

general propuestas

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico. Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos ...

CSS: Nivel B2

Hacia mucho que quería escribir este artículo, ya que es un tema del que puedes encontrar muy poca información en internet. Se trata de las listas. Ese elemento que utilizamos tanto en nuestros artículos pero que tan poquito sabemos estilizar. Y es que no tenemos que utilizar los puntos y los números obligatoriamente, podemos utilizar desde cuadrados hasta iconos pasando por números romanos o el a ...