Tecnología

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

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 de los sitios web más punteros y, una vez más, queremos ayudarte con la creación de un menú de estas características para tu sitio web que le de un aspecto más moderno, fresco y acorde a los tiempos actuales.

¿Qué es un menú a pantalla completa?

Los menús a pantalla completa cada vez están más extendidos en las páginas web con diseños a la última en presentación. Esto es por su enorme potencial de uso en toda clase de dispositivos; no sólo presentan la información de los contenidos del sitio de una manera mucho más completa sino que además se abren con la misma naturalidad e información en dispositivos móviles que en ordenadores o tabletas.

En Diarios de la nube, puedes probar en la parte superior derecha del menú estándar, tres líneas horizontales que te permiten acceder a un menú a pantalla completa con todas las entradas del blog disponibles. Esta clase de presentación no es posible mediante un menú convencional, dado que su tamaño de naturaleza horizontal está muy limitado.

Ejemplo de menú a pantalla completa:


Si quieres probarlo, haz "clic" en el símbolo de las tres líneas horizontales de la parte superior derecha del menú de esta página y podrás ver su funcionalidad.

¿Cómo poner un menú a pantalla completa en mi Blog?

Que no te asuste la extensión de la guía, es facilísimo poner este menú. He procurado poner todo lujo de detalles para que te sea lo más sencillo posible aún cuando no tengas ninguna experiencia informática.

Vamos a seguir el ejemplo que publican en la prestigiosa web W3Schools la cual os recomiendo por su enorme calidad y su profundidad didáctica:


El ejemplo, los estilos css y colores de los códigos de ejemplo han sido extraídos de la prestigiosa web w3schools.com

1) Piensa en la estructura del menú con tus contenidos y ponla en práctica:

Para montar un menú, primero debes pararte a pensar en las categorías que van a organizar las entradas de tu Blog. Esas categorías serán las opciones del menú que vas a crear.

Cuando tengas claras las categorías que compondrán las opciones de menú, cada una de ellas será una etiqueta que utilizaremos en cada entrada de tu Blog. Así, cuando pulsen en una determinada categoría tus usuarios, les saldrán todas las entradas que contienen su correspondiente etiqueta.
Un Ejemplo sencillo de organización en categorías basadas en etiquetas de tu Blog:
Pongamos por ejemplo que tienes un Blog de cocina y deseas estructuras tus entradas en las siguientes categorías:

Postres, Carnes, Verduras y Pescados.

Ahora sólo queda que etiquetes cada entrada de tu Blog para que se agrupe en su etiqueta. En las entradas que tengan que ver con postres pondrás la etiqueta postres, en las de carnes usarás la etiqueta carnes y así sucesivamente.
¿Cómo etiqueto las entradas en Blogger?
Para poner la etiqueta adecuada en cada entrada simplemente dentro de Blogger ve a la opción del menú de la izquierda "Entradas":


Ahora pulsa "Editar" en la entrada deseada para acceder a ella (como cuando escribes normalmente):


En la parte derecha del editor de entradas, he marcado en la pantalla anterior la zona donde debes hacer "clic" para etiquetar tu entrada. En este caso imagina que dentro del Blog de cocina del ejemplo esta entrada la vamos a poner en la categoría "postres", pues bastaría con darle al icono con forma de etiqueta y después escribir la etiqueta "carnes" y pulsar guardar.

Esto debes hacerlo con cada entrada, de manera que queden todas etiquetadas con la categoría (opción de menú) que luego mostrarás en el menú de tu Blog.2) Ahora ve a tu plantilla para retocarla y crear en ella tu menú a pantalla completa:

En primer lugar, en el menú de la derecha de Blogger, ve donde pone "plantilla" y haz "clic" en el botón "Editar HTML" tal y como te muestro en la pantalla inferior.


Después, justo bajo la etiqueta <head> añade el siguiente código que pertenece a los estilos de presentación del menú (copia y pega el código que a continuación te muestro):

<style type=text/css>
El menú, el fondo del menú
.overlay {
height: 100%;
width: 0;
position: fixed; posición fija
z-index: 1; Colocado en el tope
left: 0;
top: 0;
background-color: rgb(0,0,0); Color negro
background-color: rgba(0,0,0, 0.9); Opacidad
overflow-x: hidden; Disable horizontal scroll
transition: 0.5s; Transición
}

Posición del contenido dentro del menú
.overlay-content {
position: relative;
top: 25%; 25% desde arriba
width: 100%; 100% de ancho
text-align: center; opciones de menú centradas
margin-top: 30px; 30 píxeles desde el tope
}

.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s; Transición
}

Cambia el color cuando te pones sobre una opción de menú
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}

Posición del botón cerrar
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important; Tamaño de letra en menú
}

Media Querie para pantallas pequeñas
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}</style>3) Ahora coloca el menú en la parte que prefieras de tu Blog siguiendo estas instrucciones:

Dirígete en Blogger a la pantalla principal y en el menú izquierdo de opciones pulsa en "Diseño"



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



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.



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):
<script type=text/javascript>
Función Javascript para abrir menú function openNav() { document.getElementById("myNav").style.width = "100%";}
Función javascript para cerrar menúfunction closeNav() { document.getElementById("myNav").style.width = "0%";}</script>
<div id="myNav" class="overlay">
<!-- Botón cerrar --> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<!-- Opciones de menú --> <div class="overlay-content"> <a href="http://Ejemplo.blogspot.com/search/label/postres">Postres</a> <a href="http://Ejemplo.blogspot.com/search/label/carnes">Carnes</a> <a href="http://Ejemplo.blogspot.com/search/label/verduras">Verduras</a> <a href="http://Ejemplo.blogspot.com/search/label/pescados">Pescados</a> </div>
</div>
<!-- Es lo que se verá para abrir el menú --><span onclick="openNav()">☰ Abrir</span>
Volviendo al ejemplo de la web de cocina, veréis que hemos añadido las opciones de menú para postres, carnes, verduras y pescados.

Dentro de cada "<a href=" meteremos la dirección a cada etiqueta, de cada entrada, de 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 (la etiqueta) 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.

Así, cuando el usuario haga clic en la etiqueta "postres", le saldrán todas las entradas de postres. En la de carnes, todas las de carnes y así sucesivamente...Por último, podéis cambiar el color de fondo del menú para adaptarlo mejor a vuestros Blog simplemente tocando en los estilos las dos clases:

background-color: rgb(0,0,0); Color deseado
background-color: rgba(0,0,0, 0.9); opacidad del color

¡Eso es todo!, ya veis que esta clase de menús dan mucho juego y muchas posibilidades. Cualquier duda preguntad en los comentarios.

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: propuestas

Recomendamos

Relacionado

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

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

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

general social

Cómo añadir botones para redes sociales y marketing de contenidos a tu Blog.

Te presento la manera más sencilla y rápida de añadir botones para redes sociales a tu blog, tu página web o cualquier contenido que tengas en Internet. Utilizaremos el servicio AddThis que recientemente ha actualizado su presentación y ha simplificado enormemente la creación de botones para compartir contenido en redes sociales. ¿Qué son los botones para compartir en redes sociales? Hoy día no ba ...

general desde0

Cómo poner un menú en Blogger sin tener experiencia en informática o programación

El menú en un blog sirve para organizar los contenidos que éste contiene en categorías que se le puedan mostrar al usuario para que navegue por ellas sin dificultad. La ventaja de utilizar un menú es que a parte de facilitar el acceso a tu información, la estructuras y ordenas de una manera lógica. Esta guía te explica paso a paso con todo lujo de detalles cómo poner un menú de una manera sencilla ...

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

rendimiento

Mejora el rendimiento de tu web utilizando jascript asíncrono

El rendimiento es algo fundamental para la mejora de la experiencia de usuario y, junto a la calidad de los contenidos que se ofrecen en una web, un gran impulsor del posicionamiento en buscadores. En Diarios de la nube vamos a ir ayudándote a resolver distintos puntos importante para mejorar el rendimiento de tu sitio web por medio de GTMetrix. GTMetrix es un servicio de análisis rendimiento de l ...

general seo

Cómo debe ser la estructura de un Blog para un correcto posicionamiento: SEO ON PAGE.

La estructura de un Blog es la base sobre la que se construye y distribuye todo su contenido. En ella existen dos partes fundamentales: una visible compuesta por los componentes que conforman su presentación y otra invisible que sirve para que los sistemas que acceden al mismo sean capaces de analizar y extraer correctamente su información. La correcta estructura de un Blog asegura una correcta ex ...

general propuestas

Cómo utilizar Google Hangout en tu Blog

Prográmalo en un calendario, mételo en tu Blog, difunde tus contenidos de una nueva forma. Las posibilidades son infinitas: Comunicación en directo con tus usuarios, presentaciones en directo con difusión mundial en tiempo real, a través de Google+ y Youtube. Descubre la potencia que hay detrás de esta "herramienta" de Google creada para difundir más allá de tu Blog tus contenidos. Con m ...

general seo

Cómo poner los datos de autor en Google para tu sitio web o Blog: el proceso de autoría en Internet paso a paso.

El proceso de autoría en Internet es una revolución en la manera en que los buscadores seleccionan resultados para las búsquedas de los usuarios. Un autor o creador de contenidos puede llegar a tener una autoridad en la materia sobre la que escribe que le colocará siempre en mejor posición que a otros enlaces similares de menor calidad. Tan importante como la autoría es la autoridad en una materia ...