http://minervaurora.blogspot.com/2016/03/menu-desplegable-responsive-blogger.html
Si tienes tu plantilla Blogger personalizada con un menú superior fijo y te gustaría mantenerlo en la versión móvil con este tutorial lo conseguirás. En unos pocos pasos tendrás el típico menú con tres rallitas (menú hamburger) que te permitirá mostrar cómodamente las categorías de tu blog en un clic. Y lo mejor: admite subcategorías.
Desde hace relativamente poco he renunciado a utilizar las plantillas por defecto de Blogger, algun día os explicaré mis razones. Pero hay una cosa que no le puedo negar: las posibilidades de personalización que admite la plantilla simple de Blogger, sobretodo por la cantidad de tutoriales que hay para ello. Pero rebuscando en Google no he encontrado muchos que permitan darle un aspecto más moderno al menú de la versión móvil que nos da Blogger, bastante feo dicho de paso.
Pero por fortuna encontré un tutorial que nos ofrece un menú sencillo de implementar y que funciona bastante bien. En muchos de los menús responsives se utilizan instrucciones jquery que implican aumentar un poquito el tiempo de carga. En cambio el código de éste tutorial funciona simplemente mediante CSS, sin necesidad de generar links externos o instalar iconos o imágenes. Es tan sencillo como añadir el código HTML de tu menú y unas cuantas líneas en los estilos CSS de tu plantilla.
El tutorial en cuestión pertenece a una serie completa para hacer responsive un blog de Blogger, iniciada en el 2013 por el blog My Blogger Tricks. El sumario completo lo tienes en esta entrada. Si accedes y pruebas su demo verás que es un menú correcto pero yo diría que un poco desfasado de diseño.
Partiendo de este código he dado un nuevo aspecto al menú, más neutro y elegante. Puedes comprobar su funcionamiento y aspecto desde mi blog de pruebas, que lleva instalada la plantilla simple blanca de Blogger. Para simular la vistas en móvil / tablet estrecha el ancho de tu navegador, cuando llegue a valores inferiores a 800px las categorías desaparecen y aparece un menú desplegable con el icono de las tres barritas típico. Recuerda que para que salte la versión móvil de Blogger debes añadir ?m=1 al final de la URL
¿Te animas a instalarlo? Pues sigue los siguientes pasos:
1. Crea una copia de seguridad de la plantilla de tu blog.
Imprescindible antes de realizar cualquier cambio en la plantilla. Un simple error, una etiqueta mal cerrada por ejemplo, puede arruinarla. Si esto pasase la solución será tan simple como volver a instalar la copia de seguridad .
Desde el panel de Blogger ve a Plantilla, clica en Crear/restablecer copia de seguridad. En la ventana emergente clica en Descargar plantilla completa. Guarda a buen recaudo el archivo descargado. En caso de necesidad, para restablecer la copia se instalará desde el diálogo inferior de la misma ventana.
2. Habilita la vista movil personalizada
Este menú te permite utilizarlo con la vista móvil de Blogger personalizado. Para ello desde el mismo panel Plantilla clica sobre el icono en forma de rueda bajo la versión móvil. En la ventana emergente escoge la opción Sí, mostrar la plantilla para móviles, y en el desplegable inferior selecciona Personalizado.
3. Crea el menú en HTML
Ahora entra en el modo de edición de la plantilla HTML clicando en el botón Editar HTML. Clica dentro de las líneas de código y saca el buscador clicando a la vez CTRL+F. Escribe <body>. Te llevará a una línea similar a la de la imagen.
Justo debajo pega el código que adjunto:
<nav id='menu'> <input type='checkbox'/> <label>≡<span>Menu</span></label> <ul> <li><a href='/'>Inicio</a></li> <li><a href='#'>Sobre mi</a></li> <li><a href='#'>Categorías<font size='1'>▼</font></a> <ul class='menus'> <li><a href='#'>Categoría 1</a></li> <li><a href='#'>Categoría 2</a></li> <li><a href='#'>Categoría 3</a></li> </ul> </li> <li><a href='#'>Contacto</a></li> </ul> </nav>
Para personalizarlo es necesario una simples nociones de HTML. Las palabras escritas en gris debes cambiarlas por tus categorías. Para que los enlaces funcionen debes sustituir el símbolo # que les precede por la URL de la página de destino. La palabra menú saldrá al lado de las barritas en la versión móvil. Si deseas puedes cambiarlas por el nombre de tu blog (si no es muy largo). Observa como se construyen las subcategorías, anidando listas. Si tienes dudas al respecto puedes consultar mi introducción al lenguaje HTML y al marcado de texto.
4. Añade los estilos CSS
La parte más importante de este menú. Busca en la plantilla HTML esta expresión <b:skin>...</b:skin>. Despliega el código clicando el triángulo en el margen.
Copia el código siguiente justo antes de ]]></b:skin>.
/*-----Menu responsive con subcategorias de MBT modificado por Minerva Aurora----*/ body { margin: 0px; padding-right: 0px; padding-left: 0px; } #menu{ background: #F1F1F1;/* color de la barra*/ color: #333;/*color de las tres barritas*/ height: 40px; border-bottom: 1px solid #E9E9E9;/* borde inferior de la barra*/ box-shadow: 1px 2px 9px #c6c6c6;/* sombra inferior de la barra*/ width:100%; position:fixed; z-index:101; } #menu ul,#menu li{ margin:0 auto; padding:0 0; list-style:none } #menu ul{ height:45px; width:1000px; /* ancho del menú, ajustar para centrarlo*/ } #menu li{ float:left; display:inline; position:relative; font: 11px Arial, sans-serif;/*tamaño y fuente del texto */ } #menu a{ display: block; line-height: 40px; padding: 0 14px; text-decoration: uppercase; color: #333;/*color del texto*/ text-transform: uppercase;/*letras mayúsculas*/ letter-spacing: 1.5px;/*espacio entre letras*/ } #menu li a:hover{ color: #000;/*color del texto al pasar el ratón*/ text-decoration: none; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; background: #E9E9E9;/*color del fondo de la categoria al pasar el ratón*/ } #menu input{ display:none; margin:0 0; padding:0 0; width:80px; height:30px; opacity:0; cursor:pointer } #menu label{ font: 25px Arial, sans-serif ; font-weight: bold; display:none; width:35px; height:35px; line-height:43px; text-align:center; } #menu label span{ font: 12px Arial, sans-serif;/*tamaño y fuente del texto "menu" */ position:absolute; left:35px; text-transform:uppercase; font-weight: bold; line-height: 40px; letter-spacing:0.5px; } #menu ul.menus{ height: auto; overflow: hidden; width: 170px; background: #F1F1F1;/*color del fondo del submenu*/ position: absolute; z-index: 99; display: none; border: 1px solid #E9E9E9; } #menu ul.menus li{ display: block; width: 100%; font: 11px Arial, sans-serif;/*tamaño y fuente del texto del submenu*/ text-transform: uppercase; border-bottom: 1px solid #E9E9E9; } #menu ul.menus li:last-child{ border-bottom:none; } #menu ul.menus a{ color: #333;/*color del texto del submenu*/ line-height: 35px; } #menu li:hover ul.menus{ display:block } #menu ul.menus a:hover{ background: #E9E9E9;/*color del fondo del submenu al pasar el ratón*/ color: #000;/*color del texto del submenu al pasar el ratón*/ -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } @media screen and (max-width: 800px){ #menu{ position:fixed; z-index:101; } #menu ul{ background:#F1F1F1;/*color del desplegable del menu movil*/ position:absolute; top:100%; right:0; left:0; z-index:3; height:auto; display:none } #menu ul.menus{ width:100%; position:static; padding-left:20px } #menu li{ display:block; float:none; width:auto; font: 11px Arial, sans-serif; } #menu a{ display: block; line-height: 40px; padding: 0 14px;/*tamaño y fuente del menu movil*/ } #menu input,#menu label{ position:absolute; top:0; left:0; display:block } #menu input{ z-index:4 } #menu input:checked + label{ color:#333;/*color de las tres barritas una vez se clica*/ } #menu input:checked ~ ul{ display:block } }
Para ayudarte a personalizarlo he dejado algunas anotaciones al lado del código que implica cambio tipográfico o de color. Veras que es un texto encerrado así: /*comentario*/ , puedes borrarlos porque no afectan al código.
Si no tienes nociones básicas de CSS y deseas hacer un cambio de color rápido sustituye los siguientes códigos de color hexadecimales por los de tu blog:
#333 color gris oscuro del texto
#000 color negro del texto al pasar el ratón
#F1F1F1 color gris claro de la barra
#E9E9E9 color gris un poco más oscuro de fondo al pasar el ratón
Para centrar el menú en la vista de ordenador deberás modificar el ancho de la cuarta regla:
#menu ul{ height:45px; width:1000px; /* ancho del menú, ajustar para centrarlo*/ }Ve reduciendo el valor 1000 hasta que veas que el menú queda centrado.
Guarda los cambios hechos en tu plantilla y comprueba si funciona tu nuevo menú responsive.
Y eso es todo. De los menús que he probado este es el que más simple y efectivo me ha parecido. Si lo pruebas estaré encantada de leer tus opiniones abajo en los comentarios. Dudas, problemas o posibles errores, todo es bienvenido.
Actualización
Para hacer que el menú no se solape y tape la cabecera de tu blog añade al final del código CSS anterior:header{ padding-top:40px; }
Aviso: si tu plantilla no es la plantilla simple de Blogger es posible que no funcione.
Si deseas que el menú tenga fijos los iconos de redes sociales sigue el siguiente tutorial: Menú responsive para Blogger con iconos sociales. He partido de éste menú, añadiendo y modificando algunos valores.
Ya hace mucho que publicaste esta entrada, pero tienes justo lo que necesito, ese "menu hamburger", o como se llame, que son esas rayitas a la izquirda de la versión móvil, con un menú desplegable.
ResponderEliminarYa puse todos los códigos, y en la versión web se ve hermoso. Pero no aparece en la versión móvil. ¿Tanto habrá cambiado la configuración de blogger, que tu tutorial ya no funciona?
Por favor, necesito de tu ayuda.