Tecnología

Diarios de la nube Idea guardada 1 veces
Sé la primera persona en valorar esta idea Valorar

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í.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

SEO con imágenes

Las imágenes que utilizas en tu Blog, en tu web, no son sólo un reclamo o un añadido decorativo para tus contenido. Pueden servir a los buscadores web para comprender mejor la información que proporci ...

Etiquetas: general

Recomendamos

Relacionado

general

Crea una barra de menús que quede siempre fija en la parte superior de tu Blog.

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 ...

desde0

Cómo crear un menú con submenús en Blogger sin tener experiencia en informática o programación

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 ...

internet blog tblog ...

Consultoría Blogger - Resolviendo dudas de tutoriales I

Hola a todos!!! Primero de todo muchas gracias a Celia por brindarme la oportunidad de ayudarla y de esa forma coger experiencia y darme a conocer a su público. Mi nombre es Aisha, algunos me conoceréis por mi blog de cocina, y también tengo otro proyecto, totalmente diferente, que se llama Elai the Blogger. Cuando vi en Facebook que Celia se veía desbordada para contestar a las dudas de tuto ...

general seo

Los datos estructurados en Blogger: solución de problemas.

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 ...

BLOG blogging intermedio ...

Instalar los iconos de redes sociales en el header y sidebar de blogger

En una entrada anterior te conté cómo instalar una fuente llamada fontawesome para utilizar iconos en tus listas, páginas y entradas de blogger, para darles ese toque diferente y original que las haga especiales y visualmente atractivas. Puedes volver a revisar la entrada e instalar la fuente que te digo en el siguiente botón: CÓMO INSTALAR ICONOS EN BLOGGER Hoy, vamos a utilizar nuestros iconos p ...

Blogger Código HTML Optimización SEO

Optimizar plantillas con encabezados en Blogger

La plataforma de creación de blogs Blogger, de Google, tiene algunos trucos y consideraciones a tener en cuenta para lograr posicionamientos de primer nivel. Se trata de optimizar aspectos visuales y de contenido para que nuestra página aparezca en los primeros puestos de búsqueda, y sí en un primer momento puede parecer una tarea titánica, con la práctica se vuelve sencillo y rápido. Hoy aprender ...

informática bases de datos cursor ...

Creación de Cursores en MySQL

Un cursor es un objeto que apunta a las filas retornadas de una consulta. Esta característica permite manipular los datos de cada fila de forma individual. MySQL usa la palabra reservada CURSOR para declarar estos espacios de lectura. ¿Qué son los Cursores en MySQL? Recuerda que cuando consultábamos tablas con SELECT, MySQL arrojaba rápidamente los registros en pantalla de un solo tiro y nosotros ...

BLOG intermedio tblog ...

Cómo hacer listas con iconos de colores en Blogger

Esta entrada surgió también en la fanpage, tuvo buena respuesta y me decidí a cambiarla por otra sobre marketing que tenía preparada. Llevamos ya un tiempo sin publicar tutoriales sobre blogger y este detalle que voy a compartir contigo hoy es muy original, además de sencillo, verás que si ya has tocado la plantilla HTML y tienes nociones básicas de programación, no te cuesta nada diseñar tu prime ...

Tutorial

Personalizar un formulario en Blogger

Tener una lista de suscripción es muy importante en el camino de convertirse en un Blogger de éxito, sin embargo muchos piensan que una vez hecha la lista vale todo el resto, por lo que nos encontramos páginas con campos de formulario que se presentan con el aspecto predeterminado que les da el navegador, evitar esta catástrofe en WordPress es sencillo, ya que contamos con plugins que nos facilita ...

internet avanzado blog ...

Tutorial Blogger: imagen detrás del menú en Blogger

Uno de los tutoriales más visitados del blog es: Cómo personalizar el menú de páginas de blogger Puedes leerlo aquí: Repasar el Tutorial En ese tutorial vemos como personalizar el código que nos da blogger paso a paso, analizamos cada fragmento y vamos poniendo los colores y tipos de letra a juego con el resto del diseño. Y una de las dudas que me han preguntado tanto en el blog como por email es: ...