Tecnología

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

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 donde le aparece la opción "Página siguiente" o "Página anterior". En esto casos, la utilización de un menú fijo en la parte superior de la pantalla, permite al usuario no tener la sensación de "estar perdido" y disponer de opciones de menú que le permitan navegar donde desea dentro del Blog sin necesidad de llegar al final de la página.



Así mismo, esta "Barra fija" de opciones de menú podemos aprovecharla para añadirle el buscador o cualquier otro Gadget que deseemos que el usuario tenga presente en todo momento para mantener la navegación por el Blog antes sus ojos constantemente.

Vamos a crear un menú con capacidad de adaptarse a cualquier resolución de pantalla y al que podemos añadir cualquier otro gadget que deseemos que constantemente tengan presente en su navegación nuestros usuarios.

CONCEPTOS PREVIOS, CÓMO SE COMPONEN LOS MENÚS EN BLOGGER:

Repasemos los conceptos previos que nos permiten configurar a nuestro gusto un menú en Blogger para luego aprovecharlo para fijar en la parte superior de nuestro Blog. Al igual que podemos fijarlo en la parte superior, podrás indicar cualquier otra zona del Blog para que se dibujen (a la derecha, izquierda o la parte inferior).
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. 

Paso a Paso, configurando nuestro propio menú fijo para la navegación del Blog:

1) En primer lugar crea el menú para tu Blog normalmente, escoge el tipo de menú que desees crear (de un sólo nivel o de múltiples 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.

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.

2) Ahora ya puedes hacer fijo el menú para que quede localizado en la parte superior de tu Blog:

Simplemente añade a la clase del <b:skin><![CDATA[ de tu menú, los siguientes atributos que a continuación te explico:

#cssmenu{height:70px;background-color:#232323;box-shadow:0 2px 3px rgba(0,0,0,0.4);width:100%;
position:fixed;
z-index:101}Donde width:100%; expresa que el ancho del menú debe ser el proporcional a todo el ancho que haya disponible en pantalla (según la resolución del usuario). Es decir, se adapta al ancho con el que el usuario cuenta para dibujar la barra del menú.

position:fixed; Indica que la posición del menú es fija y estática, no debe cambiar.

z-index:101 Expresa que el menú debe quedar por delante de cualquier objeto sobre el que se superponga. Ideal cuando las subopciones de un menú fijo no se ven porque las tapa otro gadget.

Si no deseas que se vea un mensaje cuando se extraen opciones del menú en función de una etiqueta ("Mostrando entradas con la etiqueta ..."), añade esta línea antes de que se cierre el CDATA de tu plantilla: .status-msg-wrap {visibility:hidden;display:none;}

¡Eso es todo!, disfruta realizando tu menú fijo y equípalo con lo que desees para que tus usuarios puedan navegar sin perderse.

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

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

general

Curso Blogger: Crea tu primera plantilla

Comprender el funcionamiento de la plantilla de Blogger te abre las puertas a un nuevo nivel de conocimiento en la herramienta, pasas de ser un usuario estándar a convertirte en un usuario avanzado. Es muy distinto trabajar con la plantilla de Blogger sin saber qué está sucediendo "detrás" que sabiendo qué sucede y cómo controlarlo para conseguir el efecto que te propones. Hicimos un pri ...

general

Curso Blogger: crea tus contenedores

En la anterior entrega aprendimos a crear nuestra primera plantilla. La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger. Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran ...

aplicaciones ocio tutoriales

TECH: Crea una App con el Icono de tu Blog.

Sabias que este Blog tiene su propio App y lo puedes instalar en tu propio teléfono móvil para un acceso mucho mas rápido a mi Blog?? Bueno pues si lo tiene, y el tuyo también lo puede tener. Has visto como las mejoras aplicaciones tienen un Icono para descargar en el teléfono móvil?? Te gustaría que tu Blog lo pudiera tener?? Cuesta demasiado dinero hacerlo?? Esto le ayudara a mi Blog? En serio ...

general

Personaliza tu plantilla Blogger para móviles. Claves y fundamentos necesarios para lucir tu blog en estos dispositivos.

El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs. Si bien inicialmente ha tendido a ser un factor "olvidado" hoy día se ha tornado fundamental. El cliente, el usuario, ya no utiliza exclusivamente un ordenador de sobremesa o portátil para visualizar las ...

general

Cómo crear un índice con todas las entradas de tu Blog que se genere automáticamente.

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

internet blog básico ...

Cómo poner botones interactivos en tu blog

¿Te has fijado en los botones que uso en todos mis blogs de blogger? Como los que puedes ver en la barra lateral de este blog anunciando mis cursos y ebooks para bloggers y diseñadores. Son botones interactivos, yo elijo los colores y escribo el texto, el resto lo hace solito blogger gracias al código que tengo instalado en mi plantilla. Y eso es lo que voy a compartir contigo hoy. ¡Verás que es m ...

propuestas

Cómo crear un menú a pantalla completa para tu Blog

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

internet blogs chrome ...

Cómo personalizar Chrome (Android) con el color de tu blog

Si navegas por la red desde tu dispositivo Android y tienes una de sus últimas versiones, habrás visto que páginas como Facebook o Pinterest tienen la parte superior del navegador Google Chrome personalizada del color de su marca. ¿Sabes que tú también puedes hacer lo mismo con tu blog? Además, no necesitarás más de cinco minutos para ponerlo en marcha. Este breve tutorial lo publiqué hace tiempo ...

internet blog posiciona tu web ...

Historias de Seo: Las palabras clave de tu blog.

¿Realmente todo bloguero conoce la importancia de tener definida su lista de palabras clave o keywords? Cuando alguien hace una búsqueda en Google relacionada con la temática de nuestro blog, ¿qué palabras debería poner para salir en sus resultados?. Pues aquí esta de nuevo Frikymama como colaboradora en el blog de Celia para ayudaros a posicionar vuestro blog de una forma amena y fácil a través d ...