Cómo poner un menú en la plantilla blogger: versión para móvil

martes, 2 de junio de 2015


Hola artistas! Estos días he estado navegando por las redes y me he encontrado con muchas peticiones para saber cómo colocar un menú en nuestra plantilla blogger en la versión para móvil.

Miss Lavanda nos explicó en su día cómo poner el menú en la versión web de forma súper clara, pero cuando iba a contarnos cómo poner gadgets y menús en la versión para móvil dejó de escribir en el blog y nos quedamos con las ganas de saber cómo hacerlo. (Por cierto, en Hora Mágica somos humildes seguidores de Laura Conde y de sus mega tutoriales, esperamos que se encuentre perfectamente y vuelva pronto!!!).

Así que me he puesto manos a la obra para descubrir cómo poner un menú para que luzca bonito en nuestra versión para móvil, y tras muchas horas de árduas búsquedas y quebraderos de cabeza, he dado con la manera de ponerlo (¡¡alegría infinita!!)

Y por supuesto lo quiero compartir con vosotros, porqué sé que os interesa un montón, y porque estamos teniendo muy buena acogida por vuestra parte en nuestros comienzos, así que qué mejor manera de agradeceros vuestro apoyo :D


CÓMO PONER UN MENÚ EN LA PLANTILLA BLOGGER: VERSIÓN PARA MÓVIL



Veréis que no es de las cosas más complicadas que podemos llegar a hacer en nuestra plantilla HTML, así que vamos a ponernos al lío!

#1  Primero debéis buscar en vuestra plantilla HTML: <body

Os aparecerá algo así:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Si ya tenéis el menú en la barra superior que nos enseña Miss Lavanda en su tutorial, debajo del código que os muestro debéis tener el código que da ella para el menú de la versión para web. Que sería este:


<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='URL 1'>Nombre 1</a></li>
<li><a href='URL 2'>Nombre 2</a></li>
<li><a href='URL 3'>Nombre 3</a></li>
<li><a href='URL 4'>Nombre 4</a></li>
</ul>
</div>
</div>

#2 Si es así, justo debajo de este trozo de código debéis pegar esto, para que se nos vea el menú en la versión para móvil:

<div id='menu-sup-movil'>
<a href='URL 1'>Nombre 1</a>
<a href='URL 2'>Nombre 2</a>
<a href='URL 3'>Nombre 3</a>
<a href='URL 4'>Nombre 4</a>
</div>

La URL que está en azul debéis sustituirla por las URL que queréis poner en vuestro menú.
El Nombre que está en morado lo reemplazáis con el nombre que queréis que tengan las páginas que aparecerán en vuestro menú.

#3 Una vez hecho este paso, vamos a poner el código CSS para que el menú sea bonito:

Buscad en la plantilla HTML: </b:skin>

Y justo encima de ]]></b:skin> pegáis el siguiente código CSS:

.mobile #menu-sup-movil{
   background: #dedede; /*Color de la barra*/
   padding-top:10px;
   padding-bottom:10px;
   margin:0 auto;
   width:100%;
   text-transform:uppercase; /*Para que las letras se vean en mayúsculas, si las queréis en minúsculas quitad esta línea*/
   font: normal normal 12px Arial; /*tamaño y tipografía de las letras*/
   text-align:center; /*para que el texto esté centrado*/
}

.mobile #menu-sup-movil a{
   padding:0px 5px;
   color:#333333; /*Color del texto*/
}

Lo que está en azul podéis cambiarlo a vuestro gusto para que el menú se adapte al diseño de vuestro blog. Y si queréis cambiarle la tipografía y no sabéis cómo se instalan fuentes nuevas en la plantilla blogger aquí os lo explico paso a paso. En la imagen nosotros usamos la tipografia Muli, ya que nos gusta más para el diseño de Hora Mágica.

Espero que os haya servido, y que lo pongáis en práctica cuanto antes :p

La verdad es que las plantillas adaptadas para la versión móvil cada vez tienen mayor importancia para posicionar bien en Google, así que esperamos que nuestros tutoriales os sirvan para tener el blog listo para todas las plataformas :)

Si os ha gustado nos encantaría que compartiérais en vuestras redes sociales clicando en estos botones tan bonitos que tenemos debajo, un abrazo fuerte mega artistas!!

Laia

4 comentarios:

  1. ¡Muchísimas gracias, de verdad! Aunque me queda un espacio transparente entre el menú y la cabecera, lo importante es que se vea. Un saludo.

    ResponderEliminar
  2. muchaaas gracias ...como busque esto y de casualidad lo encontre!! excelente tutoriaaal

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. ME JODIO LA MUSICA DE SMC MUSIC
    COMO LO ARREGLO?

    ResponderEliminar