Septiembre es mes de comienzo de curso y vuelta a nuestras rutinas después la «relajación» veraniega. Desde el blog os propongo volver a vuestra época de estudiante con el curso para personalizar vuestra plantilla móvil de blogger. Antes de seguir con la segunda lección, os dejo los dos primeros posts.
En la lección de hoy vamos a crear un menú que podría sustituir perfectamente el menú de páginas con desplegable que os ofrece blogger en su versión móvil. Haremos y personalizaremos un gadget HTML que solo será visible en la versión móvil. En el podréis añadir cualquier tipo de link como a páginas independientes, conjunto de etiquetas, enlaces externos,…¿Empezamos?
Si tenemos un menú de páginas en nuestro blog, lo deberemos ocultar en la versión móvil. Vamos a Plantilla→editar plantilla y buscamos (Ctrl+F) </b:skin>. Encontraremos <b:skin>….</b:skin>. Click en los puntitos para abrir la parte del CSS de la plantilla y bajamos hasta encontrar la sección dedicada al móvil.
/*Mobile
—————————————*/
Dentro de ella, copiamos este código para ocultar nuestro menú de paginas en la versión móvil.
.mobile #PageList1 {display:none;}
Guardamos y comprobamos en el móvil que ya no aparece.
Añadir un nuevo gadget para nuestro menú móvil
Vamos a diseño y comprobamos que podemos añadir un gadget HTML debajo de la cabecera*.
Copiamos el siguiente código , previamente personalizado con nuestros datos, y arrastramos el gadget donde marca la foto. Guardamos los cambios.
<a href=’Url del link’>TEXTO1</a>
<a href=’Url del link’>TEXTO2</a>
<a href=’Url del link’>TEXTO3</a>
Nota: Si quieres otro enlace puedes añadir otra línea pero ten en cuenta que el reducido tamaño de la pantalla de móvil para que siga siendo un texto legible.
*Nota: He comprobado que en todas la plantilla de pruebas que tengo, te sale esta opción menos en la mía propia. No se exactamente porque pero también tengo la solución para hacer que blogger nos permita añadir más gadget en esta zona. Puede que de tanto toquetear mi plantilla este un poco mareada y no me muestre esta opción. A continuación os dejo la solución.
ACTUALIZACIÓN (Febrero 2016)
Gracia a Lidia Segura del blog Nunca es demasiado Dulce que me comentó que en su blog no le salía la opción de añadir un gadget debajo de la cabecera, he buscado la manera que crear un espacio para blogger te permita añadir gadgets en esa zona. Como podéis observar en la foto su plantilla no le ofrece esa posibilidad.
Gracia a Lidia Segura del blog Nunca es demasiado Dulce que me comentó que en su blog no le salía la opción de añadir un gadget debajo de la cabecera, he buscado la manera que crear un espacio para blogger te permita añadir gadgets en esa zona. Como podéis observar en la foto su plantilla no le ofrece esa posibilidad.
Podría haber hecho un tutorial pero El blog de Ciudad blogger lo explica genial en su post Cómo añadir gadgets debajo de la cabecera de blogger.
Para dar estilo simple CSS al menú
1.-Saber el Id del nuevo gadget: desde diseño ponemos el ratón encima de Editar del gadget que acabamos de crear y abajo nos saldrá un número muy largo. El id te lo marco con un recuadro : HTML10 (en mi caso).
2.- Vamos a editar plantilla y buscamos (Ctrl+F) </b:skin>. Abrimos la sección de CSS (dando a los puntitos que hay entre <b:skin>…..</b:skin> y bajamos hasta que encontremos la sección dedicada al móvil.
.mobile #IDgadget {
margin: 0 auto;
width: 95%; /*tamaño del gadget. Lo disminuí para que se viera adaptado en mi móvil*/
background: #ffffff; /*color fondo*/
font: normal normal 12px quicksand; /*fuente y tamaño*/
text-align: center;
border-top: 1px solid #333333; /*borde superior*/
border-bottom: 1px solid #333333; /*borde inferior*/
padding:6px; /*tamaño del espacio entre los bordes o fondo*/
margin-bottom: -20px; /*para acercar (-) al elemento inferior. */
.mobile #IDgadget a{
padding:0px 8px ; /*separación entre los elementos del menú*/
color:#333333; /*Color del texto*/
}
Nota: Esto solo es un ejemplo. Podéis cambiar el tipo de bordes (solid, dashed, dotted, double,..), el lugar (top, bottom, left o right) o si queréis que enmarque todo el menú (border: 1px solid #código de color, por ejemplo). Ir probando y sed creativos.
Sobre al fuente→podéis utilizar las que trae blogger o instalar una chula y legible, como yo hice, desde Google Fonts.
Sobre la línea margin-bottom: solo sirve para ajustar los espacios entre elementos. Yo la tuve que añadir pero quizás vosotros no la necesitéis. Probar primeros sin ella y ver el resultado para decir si os hace falta ajustar espacio o no.
Poner una imagen como fondo del menú
Otra opción para darle todavía un toque más especial y personal a vuestro menú es añadir una imagen como fondo. Hay varias formas de hacerlo y posiciones que se pueden elegir para la misma pero bajo mi punto de vista para la versión móvil que todo es más reducido mejor simplificar las cosas y poner un fondo uniforme y que sobre todo que permita seguir leyendo bien las letras.
Primero tendréis que definir el valor del ancho de vuestro blog (Plantilla→personalizar→ancho del blog.) Mi ancho es 1200px así ese es tamaño que deberá tener la imágen por unos 50px de alto. Con cualquier programa de diseño/edición como pickmonkey o photoshop diseña una imagen de 1200x50px y añadirle un color, estampado o patrón que vaya a corde con vuestro blog. Yo opté por hacer un documento nuevo de esa medida con photoshop y crear dos capas para ver cual me quedaba mejor en el blog. Una capa con un pincel efecto acuarela y la otra con un padrón/fondo de mi tablero de Pinterest. Para poder usarla en vuestro blog debereis subirla previamente a una web de almacenamiento de imágenes como dropbox, picassa, google drive, tinypic,…..
El código CSS a añadir a la plantilla quedará así:
.mobile #IDgadget {
margin: 0 auto;
width: 95%; /*podéis poner 100% para que ocupe toda la pantalla*/
background: url(«http://i59.tinypic.com/2rly9f9.jpg») no-repeat;/*url de la imagen*/
font: normal bold 12px quicksand ; /*fuente y tamaño. Añadí bold para que resultara una letra más legible*/
text-align: center;
padding:6px;
margin-bottom: -20px;
}
.mobile #IDgadget a{
padding:0px 8px ;
color:#333333; /*Color del texto*/
}
FONDO CON EFECTO ACUARELA
FONDO CON ESTAMPADO GEOMÉTRICO
Ocultar el nuevo gadget en nuestra versión web
Seguimos editando la plantilla, hacemos click en Ir al widget y seleccionamos el ID de gadget nuevo (en mi caso HML10). Escribimos mobile=’only’ para que solo se muestre en los dispositivos móviles. Comprobamos que ya no aparece en la vista previa y guardamos plantilla.
Actualización (Marzo 2106)
Hace unos días mi compañera Minerva Aurora, compartió en su blog un genial tutorial de como hacer un menú desplegable responsive para blogger. Seguro que habéis visto en un montón de webs el típico menú de la tres rayas horizontales que al desplegarse se ven todas las pestañas. Pues me pareció interesante añadir esa opción a este post.
Bueno. pues esto es todo por esta semana. ¿Qué te ha parecido esta opción para personalizar tu menú?. ¿Te quedas con la opción simple o te atreves con una imagen?.
Ahora te toca a ti. Me encantaría que me enseñaras los cambios que vas practicando. Así que si compartes tus avances por tus redes, etiquétame para verlo. Un besito y hasta la semana que viene.
¿Te ha sido de utilidad el artículo?
(Votos: 0 Promedio: 0)
Felicidades por los tutoriales Ana, genial aportación 😉
P.d. Tu blog me odia, cada vez que te quiero dejar un comentario me lo borra, no sé por qué…
Gracias guapa. Sers la competencia entre wp y blogger. A mi a veces tambien me pasa cuando comento en wp. Un besito.
Gracias guapa. Sers la competencia entre wp y blogger. A mi a veces tambien me pasa cuando comento en wp. Un besito.
Por fin me he puesto!
He tenido algunos problemillas pero al final lo he arreglado 😉
Muchas gracias, Ana. Ahora voy a por la siguiente clase!
Te esta quedando un version movil super chula. Creo que la pondre de ejemplo en mi fan page….jeje. un beso.
¡Dios mío! Llevo toda la tarde toqueteando la plantilla para nada. Logro más o menos todos los cambios, siguiendo los tutos de Laura y los tuyos, pero cuando llego a éste. Invariablemente al guardar el gadget me genera un error y no logro nada. Por ahora, me tendré que quedar con la versión cutre y fea que ofrece Blogger. Un abrazo.
Pues no se cada plantilla es un mundo pero te aseguro que funciona. Lo unico que veo diferente en tu blog es que tienes un buscador encima del menu y quizas influya. Un saludo.
Hola Ana!! a mí no me permite añadir otro gadget en esta zona… yo soy de las que necesitan la solución!
Por lo demás los tutoriales están geniales! He posiso instalar la barra de arriba y desde mi móvil lo veo bien, además he modificado las medidas de la cabecera, para que no sea tan grande .
Besos y Gracias!!!
Hola Ana!!
lo conseguí!! Después de estar trasteando toda la mañana entre los menús y las barras por fin he conseguido tenerlas todas… Y es que después de poner este menú de páginas en el móvil resulta que no se veía bien la de la web. Pero usando un poco de sentido común, lo he conseguido y estoy tannn feliz!!
Muchas gracias y un besazo!!!
Ya lo vi guapa. Lo unico que añadiria es un poco de espacio entre las palabras. Solo tienes que variar el valor de la segunda linea de padding, donde pone 0px 8px. Un beso y suerte.
Hola Ana! al final he tenido que quitar la barra, porque resulta que me bloqueaba la pagina de diseño, es decir, que no puedo mover ningún widget de lugar y no se me guardan los cambios…
Así que de momento seguiré con la de serie, hasta que encuentre alguna solución.
Pero me lo guardo para probarlo más adelante!!
Un abrazo!
A muy pesar mio, es la única traba que no he logrado solucionar al 100%. En la última lección explico el porque. Aunque a mi aunque me dice que no se han guarda los cambios, si me los guarda. Un saludo.
Hola Ana, estoy haciendo tus tutoriales, hasta aquí bien, me está quedando todo perfecto, pero a mí no me deja añadir un nuevo gadget de esos crosscol para el menu de páginas. ¿Cómo lo hago? has puesto el tutorial en algun sitio? Gracias
Hola Lidia, me puedes mandar por email o messenger una captura de pantalla donde sea vea que no tu plantilla no te da esa opcio? Asi pongo tu blog de ejemplo y actualizo el post. Un beso.
Perfecto Ana!!! Ya lo he hecho!! lo único que me queda es la cabecera que por más que no intento no sale nada… Gracias!!
Hola Ana, estoy intentando hacerle modificación a mi plantilla móvil, pero la plantilla que le tengo al blog no tiene los css .mobile, por lo que no puedo hacer ninguna modificación a esta versión móvil que trae la plantilla como personalizada. ¿Qué puedo hacer en este caso?
¡¡¡Besos!!!
No todas las plantillas son responsive ni admiten personalizar la versión móvil. Tendrás que informarte de sitio donde descargarte la plantilla. Yo siempre trabajo con las plantilla simple de blogger que permite muchas opciones de personalización o las que compro en sitios de confianza que suelen venir con la versión responsive. Suerte.
Hola de nuevo,
Gracias por responder tan pronto. Tomaré tu consejo y le escribiré al creador de la plantilla a ver si responde.
Besos y gracias por tu blog, es maravilloso.
Buenas noches.
Tiene algún tutorial para poner una foto en la cabecera del blog en la versión móvil?
Hola Guillermo, otra de las lecciones del curso, está dedicada a la cabecera. Si haces una búsqueda en el blog encontrarás ese post. Un saludo.
Hola, Podrías publicar sobre como poner gadgets en la parte de abajo? El de tu amigo esta muy mal explicado y ahora en 2018 no sirve, gracias 😉
Lo siento Sue, hace tiempo que ya no trabajo nada con la plataforma de blogger. Es una plataforma que se actualza my poco y no avanza con los requisitos de los nuevos tiempos para poder montar un negocio con ella. Un saludo