El Perro de Papel Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

Tutorial Blogger: adaptar menú a versión móvil

Tutorial Blogger: adaptar menú a versión móvil


No me gusta nada la versión móvil, con lo que me ha costado dar con la portada y el diseño ideal... y se va todo al garete al activar la plantilla para dispositivos móviles. He tardado en decidirme pero claro, el tema de que Google vaya a tener tan en cuenta ésto para el posicionamiento pues... como que impone un poco. Así que finalmente me he decidido a activarla, prescindir de la portada y personalizarla un poco.
Si has entrado al blog desde tu móvil verás que aún me quedan páginas por adaptar, como la de los cursos, donde las tablas se salen de la pantalla. Tengo que poner una medida adaptable a cualquier pantalla en las tablas ¡pero me da una pereza! Con la cantidad de cosas pendientes que tengo... siento que es un poco hacer el tonto andar con estos detalles. Pero a fin de cuentas, Google es el que manda si nos interesa que nos posicione bien.
Así que hoy voy a contarte cómo poner un menú de páginas diferente en la versión móvil de blogger. Si tienes un menú desplegable como el mío o una barra superior fija, habrás notado que en la plantilla para dispositivos móviles o no se ve o se ve fatal. Yo no uso barra superior ni fija ni móvil, así que solo voy a explicarte cómo tener un menú sencillo en tu plantilla móvil y mantener el desplegable en la versión para ordenadores.
Doy por hecho que tienes instalado un menú similar al que vemos en este tutorial:
Instalar menú desplegable en Blogger


Lo primero que vamos a hacer es activar la plantilla móvil de nuestro blog, aunque sea horrorosa.
Vamos a: Plantilla > Móvil y pinchamos en la rueda dentada.


Elegimosy seleccionamos Personalizado en el desplegable. Si pinchas en Vista Previa puedes ver cómo quedaría.


En la siguiente web puedes comprobar cómo se ve tu versión móvil:
Prueba de optimización para móviles
La mía ahora se ve así:


Como ves, el menú de páginas se ha ido al garete y ahora queda un espacio enorme entre el título y las entradas... el fin del mundo, vamos... con el tiempo invertido en el diseño. Si es que se te quitan las ganas de ser original para que venga Google a tocarte las narices...
Así que vamos a hacer un truco para mostrar el menú de páginas predeterminado de Blogger en la versión móvil y mantener el desplegable en la versión para ordenadores. Pero tenemos que elegir las páginas que queremos mostrar ya que no será desplegable, sino sencillo.
Yo redireccionaré todas las páginas a las nuevas que he creado en el Perro de Papel, ya que como sabes he unificado toda la información, servicios y cursos en este blog para no volverte loca.PREPARAR LA PLANTILLA PARA AÑADIR EL GADGET DE PÁGINAS DE BLOGGER

Si entras en DISEÑO verás que no hay espacio para añadir el menú de páginas a la plantilla. Así que primero hay que hacer hueco. Puede que en tu plantilla ya esté desbloqueado y puedas poner más gadgets debajo de la cabecera, pero por si está bloqueado te cuento cómo hacerlo:


Para desbloquear los gadgets que hay justo debajo de la cabecera y poder añadir un menú de páginas sencillo para la versión móvil de nuestro blog, vamos a nuestra plantilla HTML.
Pinchamos en cualquier parte dentro del cuadrado del código de nuestra plantilla, pulsamos Control + F a la vez para abrir el buscador interno de blogger y buscamos: showaddelement

Vamos dando a Intro hasta encontrar esto:
<b:section id="crosscol" maxwidgets="1" showaddelement="no">
        <b:widget id="HTML1" locked="false" title="" type="HTML">
          <b:includable id="main">
  <!-- only display title if it"s non-empty -->
  <b:if cond="data:title != &quot;&quot;">
    <h2 class="title"><data:title/></h2>
  </b:if>
  <div class="widget-content">
    <data:content/>
  </div>
  <b:include name="quickedit"/>
</b:includable>
        </b:widget>
      </b:section>
      <b:section class="tabs" id="crosscol-overflow" showaddelement="no"/>
Cuando lo hayas encontrado cambia en los dos showaddelement el no por yes. Así:
showaddelement="no"
Por:
showaddelement="yes"
Asegúrate de respetar las comillas no la vayamos a liar... Y guarda los cambios. Con esto nos aseguramos que están desbloqueados los campos donde vamos a añadir el gadget de nuestro menú de páginas sencillo.AÑADIR EL MENÚ DE PÁGINAS SENCILLO 

El siguiente paso es añadir el menú de páginas predeterminado de blogger, recuerda que no lleva desplegables así que elige bien las páginas que quieres mostrar en tu versión móvil.
Vamos a Diseño y pinchamos en Añadir un Gadget de la barra lateral. Elegimos el de Páginas.


Y lo configuramos para que muestre las páginas que queremos. Yo voy a usar enlaces externos para enviar a mis visitas a este blog. El de Servicios de Diseño ya no voy a utilizarlo.
Guardamos los cambios y lo arrastramos debajo del gadget HTML/Javascript que contiene el código de nuestro menú de páginas desplegable. Así:


Y queda así de horroroso:


Recuerda que en el tutorial del menú desplegable que te mencionaba al principio eliminamos el formato del menú de páginas predeterminado de blogger, por eso aparece así. Pero en cierto modo nos da igual, ya que no vamos a mostrarlo en la versión para ordenadores, que es la que estás viendo, sino en la móvil.
Así que vamos a decirle a blogger que no queremos que se vea en la versión de ordenadores, sólo en la móvil.MOSTRAR EL MENÚ SENCILLO SOLO EN LA VERSIÓN MÓVIL

Vamos a nuestra plantilla HTML y pinchamos en Ir al widget, seleccionamos: PageList1.


Encontrarás esto:
 <b:widget id="PageList1" locked="false" title="Páginas" type="PageList">
El siguiente paso es decirle a blogger que lo muestre SOLO en la versión móvil. Para eso añadiremos mobile="only" al código. Así:
<b:widget id="PageList1" locked="false" mobile="only" title="Páginas" type="PageList">
Guardamos los cambios y ya no vemos el menú de páginas sencillo en la versión para ordenadores.


PERSONALIZACIÓN BÁSICA DEL MENÚ DE PÁGINAS PARA VERSIÓN MÓVIL

Este tema daría para una entrada aparte, pero solo vamos a ver como modificarlo un poco para usar los colores de nuestro blog.


Vamos a nuestra plantilla HTML y buscamos:
Mobile
-----------------------------------------------
Encontrarás:
.mobile .tabs-inner .section:first-child {
  border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
  background-color: $(tabs.selected.background.color);
  color: $(tabs.selected.text.color);
  border-top: $(tabs.border.width) solid $(tabs.border.color);
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}
Estos tres fragmentos son los que dan formato a tu menú de páginas móvil. El mío de este blog es:
.mobile .tabs-inner .section:first-child {
border-top: none;
}
.mobile .tabs-inner .PageList .widget-content {
background-color: transparent;
color: #000000;
border-top: 1px solid #8FE1D8;
border-bottom: 1px solid #8FE1D8;
}
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-left: 1px solid transparent;
}
Solo he personalizado lo básico que te he marcado en negrita:
background-color: el fondo del menú de páginas.
color: el color del texto.
border-top: el borde superior.
border-bottom: el borde inferior.


La diferencia, dentro de las posibilidades de personalización que ofrece este tipo de menú, es abismal ¿verdad?
Y ya hemos terminado, ya tenemos nuestro menú desplegable en la versión para ordenador y la versión sencilla en la mobile.
Si vas a preguntarme si se puede poner un menú desplegable en la versión móvil me adelanto: posiblemente se pueda pero... ¿crees que un menú desplegable es cómodo en una pantalla táctil? Creo que la navegación perdería bastante... Por lo que te recomiendo usar un menú sencillo y facilitar la vida a los lectores que te visitan desde su móvil.Y ya sabes, si te animas a usarlo, déjame el enlace a tu blog en comentarios... ¡entraré desde mi móvil a echarle un vistazo!





Fuente: este post proviene de El Perro de Papel, 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:

Recomendamos

Relacionado

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

internet blog blogger para dummies ...

Tutorial Blogger Dummies: La Plantilla HTML

Para no tener ni idea de cómo hacer un blog de blogger cuando empezamos esta serie de tutoriales, tu blog no está nada mal ¿no crees? Limpio, profesional, cuidado... si has seguido todos los pasos que hemos ido viendo, puedes estar muy satisfecha del trabajo y horas invertidas en poner tu blog bien bonito tu sola. Puedes repasar lo que llevamos visto aquí: VISTO HASTA AHORA: Presentación. Tu Idea. ...

internet blog blogger para dummies ...

Tutorial Blogger Dummies: Buenas Prácticas

Hemos llegado al final de esta serie de tutoriales para crear un blog en blogger para Dummies. Si has seguido el paso a paso de las 9 entradas ¡seguro que ya tienes un blog estupendo con el que adentrarte en este universo blogger! No solo hemos visto cómo personalizarlo y ponerlo a nuestro gusto, sino que hemos empezado desde la base: cuando surge la idea y tenemos que seleccionar la temática y no ...

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

Tutorial Blogger: Cómo poner una lupa en el buscador de blogger

Seguimos personalizando el diseño del blog para adaptarlo completamente a nuestra idea. Hoy vamos a ver cómo poner una lupa en el buscador de Blogger, un pequeño detalle que nos hará diferentes ¿no crees? 1.- El código que vamos a usar es: <form action="/search" id="buscador" method="get"> <input id="texto" name="q" onblur="if (this.v ...

general

Curso Blogger: aprende a utilizar las hojas de estilo

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

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

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

internet blog tblog ...

Consultoría Blogger - Resolviendo dudas de tutoriales 3

Hola a todos!!! Ya estamos de nuevo a final de mes y vengo a resolver las dudas de tutoriales antiguos que os han surgido y que se habían quedado pendientes de resolver. Cómo añadir un menú con imágenes en Blogger Este es el código que Celia proporcionaba para poner el menú con imágenes: <div > <table> <tbody> <tr> <td> <a href="URL DE TU PÁGINA/ETIQUETA" ...

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