¿Estáis preparados para aprender como tener una plantilla móvil molona y personalizada a vuestro gusto? Solo necesitáis un pc, vuestro móvil al lado y un poquito de paciencia. He estado investigando y probando varias semanas para hacer este curso que en su día empezó Miss Lavanda, y yo os muestro como seguir personalizando a partir de donde ella lo dejo, «a mi manera». Vamos a ir poco a poco con un post semanal para daros tiempo a aplicarlo y a consultar dudas en los comentarios que es la mejor manera para que todos se puedan aprovechar de las preguntas y la soluciones. Las contestaré en la medida de mis conocimientos y tiempo. ¿Empezamos?
Ahora ya estamos preparados para entrar en materia aprendiendo como añadir una barra fija superior que nos facilitará tener siempre visibles los links más importantes de nuestro blog. Seguro que algunos ya tenéis la barra fija superior en vuestra versión web pero adaptarla con tantos elementos a la versión móvil la dejaría prácticamente ilegible. La solución es crear una diferente solo para el móvil o única, si resulta que no la tenéis en la versión web.
Por si no has leído los posts de Miss Lavanda, recuerda que para personalizar tu plantilla debes asegurarte tener activa las opciones que te marco en la foto.
BARRA FIJA CON TEXTO
PASO 1.-Antes de todo, hacemos una copia de seguridad de nuestra plantilla por si las moscas. A continuación vamos a editar nuestra plantilla y buscar (Ctrl+F) </head>. Aseguraros que después de </head> tenéis esta linea para que podáis personalizar vuestra plantilla móvil (si no la tenéis pues añadirla).
<body expr:class='»loading» + data:blog.mobileClass’>
Copiamos justo después:
(si tenemos instalada una barra fija superior, lo pegamos después del código de ésta)
<div id=’menu-movil’>
<a href=’URL DE FACEBOOK’>FACEBOOK</a>
<a href=’URL DE TWITTER’>TWITTER</a>
<a href=’URL DE GOGGLE+’>GOOGLE +</a>
<a href=’URL DE MI PAGINA DE CONTACTO’>CONTACTO</a>
</div>
Estos son los cuatro enlaces que yo añadí pero vosotros elegid los que más os gusten o convengan. Solo tener en cuenta no recargar ni complicar mucho la barra.
Seguimos en la plantilla y vamos añadir el CSS. Buscamos </b:skin> y nos aparecerá una línea así
<b:skin>…..skin>
Hacemos click donde están los puntos y se abrirá todo nuestro CSS. Bajamos hasta que encontremos la sección
/*Mobile
———————————————–*/
Añadimos el siguiente código antes de la siguiente sección para que este todo ordenado.
.mobile #menu-movil{
background: #ecd1d0; /*Color de la barra*/
padding: 5px;
margin:0 auto;
width:100%;
position: fixed; /*para que la barra quede fija*/
z-index:101; /*para que la barra quede fija*/
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*/
display: block;
}
.mobile #menu-movil a{
padding:0px 5px; /* aumentar o disminuir el espacio entre los elementos del menú*/
color:#fff; /*Color del texto*/
}
PASO 2.-Ahora tendremos que quitar esta nueva barra de nuestra versión Pc ya que solo le hemos puesto estilo para la versión móvil. Vamos al final de nuestro CSS y antes de ]]></b:skin>, pegamos lo siguiente:
#menu-movil {display: none;} /*para que no aparezca en la versión web*/
Le damos a vista previa en el pc y si todo esta bien damos a guardar. A continuación nos queda comprobar como se ve directamente en nuestro móvil.
PASO 3.-Si tenéis un blog con fondo puede que se os vea entre la barra fija y la cabecera. Podéis reducir este espacio desde plantilla→personalizar→avanzado→añadir CSS, si no queréis volver a entrar en la plantilla:
#header-inner{margin-top:-20px;} /*reducir (-) o ampliar espacio entre cabecera y elemento superior*/
Le damos a guardar plantilla y volvemos a comprobar el resultado tanto en pc como móvil.
BARRA FIJA CON ICONOS WEB
Si en vez de texto os apetece poner iconos web, por ejemplo para que os sigan en vuestras redes, debéis seguir los siguiente pasos.
Lo primero es tenerlos instalados y personalizados. Yo ya los tenía en mi barra superior, así que los aproveche. Aquí os dejo un tutorial de como instalarlos.
Ir a editar plantilla y seguir las instrucciones del PASO 1 pero con los siguiente códigos:
<div id=’menu-movil’>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-página de contacto» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
</div>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-red-social» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
<a href=»enlace-a-tu-página de contacto» target=»_blank»>AÑADE AQUÍ EL CÓDIGO DE TU ICONO</a>
</div>
Y para el CSS, copiamos este código en la misma sección que comentaba más arriba.
.mobile #menu-movil{
background: #ecd1d0; /*Color de la barra*/
padding-top:8px;
padding-bottom:8px;
margin:0 auto;
width:100%;
position: fixed;
z-index:101;
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 14px Arial; /*tamaño y tipografía de las letras*/
text-align:center; /*para que el texto esté centrado*/
display:block;
}
.mobile #menu-movil a{
padding:0px 15px ; /*separación entre los elementos de la barra*/
color:#fff; /*Color del texto*/
}
Los valores en rosa son los que podéis personalizar. Si os fijáis en el CSS he cambiado algunos tamaños porque mis iconos web eran más grandes y la barra tapaba media cabecera. Si os pasa lo mismo podéis disminuir directamente el tamaño de vuestros iconos o, al contrario del caso anterior, aumentar la distancia entre el menú y la cabecera. En mi caso, busque en la plantilla el código del PASO 3 y lo cambie por este:
#header-inner{ margin-top:8px; }/*aumentar el espacio entre cabecera y elemento superior*/
Comprobamos en la versión pc y móvil que todo este bien y a otra cosa mariposa.
A TENER EN CUENTA:
- Recuerda hacer una copia de seguridad y guardar en sitio seguro antes de tocar la plantilla por si te equivocas y/o en algún momento quieres volver a tenerla como antes de hacer estos cambios.
- Seguir con calma todos los pasos. Es muy fácil que al copiar y pegar os dejéis algún pequeño elemento y entonces no funcione. Si no te sale a la primera, repásalo o vuelve a empezar.
- Podéis añadir los enlaces que queráis, teniendo en cuenta el reducido espacio del móvil. No os paséis sino no serán legibles.
- Las variables en rosa son para que las adaptéis a vuestro gusto y diseño. Es cuestión de ir probando fuentes y tamaño y visualizarlo en el móvil para ver si os quedáis con ese resultado o seguís probando. Es muy normal que tengáis que cambiar los valores de padding o margin según el diseño de vuestro blog.
- El CSS se podría añadir sin tocar la plantilla mediante Personalizar plantilla→avanzado→añadir CSS. Pero no siempre funciona. Por eso la forma más correcta de hacerlo es ir directamente a la plantilla y añadirlo en el sitio adecuado. No obstante si te da cosa tocar la plantilla, puedes optar por la opción más fácil si blogger te refleja los cambios al guardar plantilla.
Si te has perdido el primer post de presentación y primeros pasos, te aconsejo que te pases por aquí.
Ahora búscate un momento tranquilo y pon te a seguir poniendo bonita tu plantilla móvil. Y después me cuentas que tal te ha ido….ah y no te olvides de compartir esta entrada!!!
La semana que viene veremos cómo crear un menú tipo páginas solo para tu móvil y quitarnos de encima el que te da blogger con INICIO y su correspondiente desplegable.
¿Te ha sido de utilidad el artículo?
(Votos: 1 Promedio: 5)
Mil gracias, debo tomarme mi tiempo para hacerlo y si se me generan dudas volveré a dejarte el mensaje. Bendiciones mil y gracias por compartir tus saberes y tu tiempo.
Espero que te salga sin problemas y sino ya sabes donde encontrarme. Un beso.
Genial como siempre Ana, en cuanto saque un rato me siento a ello. Eres un solete!
Genial Ana!! Lo he podido hacer ahora y me encanta. Pero cuando tenga otro rato probaré con los iconos que tengo en el blog y de paso miraré el código del color para hacer el cambio.
Muchas gracias!! Y un abrazo!
Ya me dices cuando lo tienes adaptado a tu gusto para que me pase a verlo. Un besito.
Ya me dices cuando lo tienes adaptado a tu gusto para que me pase a verlo. Un besito.
Genial!!! En cuanto termine con la plantilla webe pongo con la móvil!!! Gracias!!
Jeje… a veces se nos acumula el trabajo, verdad?. Un beso y suerte.
Muchas gracias Ana!! sólo una duda, ¿antes de empezar con esto debo hacer los otros pasos pasos que empezó Miss Lavanda?
No es necesario pero te quedara más completo si personalizadas los títulos, entradas, fechas,…Lo único aseguraté de tener la opción de personalizado en la visión móvil. Un beso,
Muchas gracias por el tutorial Ana, me he puesto a trabajar en ello pero estoy algo liada, simplemente no logro que se vean las entradas, así que seguiré intentando, solo se ve la portada y el pie del blog 🙁 linda semana, saludos
Te aseguro que sale. Aseguraté de seguir todos los pasos correctamente. Es muy fácil olvidarte algo, poner las cosas en un lugar incorrecto o borrar algo sin querer. Un beso.
Hola Ana, te cuento que me he pasado horas tratando de configurar la barra superior pero me encontrado un problema, que siguiendo tu tutorial me sale todo sí, pero a la vez la barra superior de la web, es decir, una encima de la otra. Viendo la leccion 2 de Miss Lavanda copié el código para ocultar la barra superior que puse siguiendo su tutorial, pero cuando hago eso desaparecen las dos de la vista móvil. Le he dado vueltas activando y desactivando aquí y allá, pero siempre o aparecen o desaparecen las dos juntas. Ayuda please!!
Muchas gracias por este post, es muy útil y necesario… en mi caso mi porcentaje de visitas por móvil es casi el 50% por lo que sí o sí tengo que personalizar la vista móbil de mi blog. Un besote.
Yo tambien segui en su dia el tuto de miss lavanda y me sale bien. Has mirado de no tener el mismo nombre en las dos barras y por eso al ocultarlas desaparecen las dos? Un beso.
Yo tambien segui en su dia el tuto de miss lavanda y me sale bien. Has mirado de no tener el mismo nombre en las dos barras y por eso al ocultarlas desaparecen las dos? Un beso.
Ana María, estoy de vuelta! Con buenos resultados en los análisis y muy animada, casi como para ponerme a toquetear plantillas de todos los colores. Pero en blog de pruebas porque la habilidad que tú tienes es de unas pocas…Besos
Me alegra mucho que te encuentres mejor Paula. Ahora ya no se te resiste nada..un beso.
Hola Ana! Hoy me he puesto con el tutorial, y todo perfecto! pero me gustaría cambiar el color de las letras… he probado con algunos códigos y no se me cambian… puedes echarme un cable?
Gracia guapa!!!
Irene tienes que cambiar la línea donde pone /*color de texto*/. Yo lo tengo en blanco por eso pone #fff. Un besito.
Ale, no podía esperar más, éste ya lo tengo. ¡Y me encanta! Gracias Ana 😉
Hola, me ha quedado la barra genial en el móvil, la cuestión es que al intentar ocultarla en el pc pongo lo de display none donde indicas pero no se oculta.. ¿a que puede ser debido? Por cierto, muchas gracias, me ha venido fenomenal¡¡
Me he pasado por tu blog y creo que ya lo has solucionado porque se ve perfecto. Un saludo
Hola Ana!
Ya lo tengo!! con las redes sociales por fin!!
Una duda… ahora se me solapan las 2 barras en versión web :S no hay alguna forma de que no se vea en versión web?
Y una última cosa, ya sólo me faltaría poner la lupa de buscar a la derecha, tienes algun tutorial sobre eso?
Miles de gracias!!!
Besos!!
Tendras que ocultar la barra movil en la version web con la etiqueta mobile="only" puesta en la plantilla html en la linea del nuevo gadget que has creado. Un saludo.
Ya está Ana! me habia saltado el paso 3! gracias!!!
Besoss!
Madre mía!, te mereces un altar!!!!. Muchisimas gracias. La verdad es que en su día me quedé con las ganas porque el tutorial estaba inacabado y estaba muy frustrada porque no podía colocar las categorías en ningún sitio de la plantilla movil y con este tutorial me lo has solucionado!. Un besazo y mil mil gracias!
Yo tambien me quede con las ganas hace tiempo de personalizar mi plantilla. Por eso despues de investigar y probar, cree este curso. Me alegro que te haya sido util. Un saludo.
Yo tambien me quede con las ganas hace tiempo de personalizar mi plantilla. Por eso despues de investigar y probar, cree este curso. Me alegro que te haya sido util. Un saludo.
Voy a llorar de la felicidad!! muchas gracias, he estado intentando hacerlo desde hace un par de meses y como que me saturaba y no daba en el clavo, hoy lo hice despacio y me ha quedado muy bien. Muchísimas gracias por el tutorial tan bien explicado 🙂 Como dice justo aquí arriba, te mereces un altar 🙂
Besitos!!
No sera para tanto…jaja. Que yo no soy mucho de iglesias. Un saludo.
No sera para tanto…jaja. Que yo no soy mucho de iglesias. Un saludo.
Hola, genial tu página, tengo una consulta: Tienes idea de porqué no me aparece "head"?
Hola Alberto, si que aparece siempre en todas las plantilla pero siempre entre <>. Miré tu blog y si que aparece. UN saludo.
¡Hola!
Soy nueva en tu blog, está genial y me está viniendo muy bien ahora que estoy montando mi blog. Quiero instalar la barra para la vista movil siguiendo este tutorial tuyo pero el problema que tengo es que ya he instalado una barra flotante para la visión escritorio que no soy capaz de eliminar de la vista movil (y allí queda mal porque se corta). Me estoy volviendo loca buscando la solución y no encuentro nada o nada que me quede claro, jejejje (qué de copiar y pegar códigos según un tutorial entiendo, pero más de eso ya no jejjee). ¿Me podrías echar una mano?
La barra la he instalado según este tutorial http://www.hora-magica.com/2015/06/poner-menu-barra-superior-iconos-sociales.html
Muchas gracias de antemano.
Mayra, me temo que no te puedo ayudar mucho. Cada plantilla es un mundo y cuando nos ponemos a personalizarla puede que los códigos se vuelvan un poco locos y salgan incompatibilidades. Para saber exactamente si tu problema tienes solución debería entra en tu código y esas acciones no las realizo. Un saludo.
🙂 Sí, eso lo entiendo pero no sé si me he explicado bien 🙂 Yo me refería a cómo se puede ocultar un elemento (en este caso la barra) de la vista movil para que alli no aparezca y sólo se vea en el ordenador. Si existe algún código y en qué lugar de HTML debería de ir.
De todas formas gracias por contestar.
Un saludo,
Maya
Hola!
No se si aun atiendes este post.
Intente hacer la barra y al pegar el código me dio este error:
«Se ha producido un error al analizar el XML, línea 723, columna 9: Open quote is expected for attribute «id» associated with an element type «div»
Si me puedes ayudar lo agradezco.
Saludos
Hola, lo siento pero ya no trabajo con blogger debido a su excasa actulización y limitaciones. Cada plantilla de html es un mundo así no te puedo decir como solucionar el error. Puedes que copiaras el código más (prueba a poner las comillas de forma manual) o lo que tengas ya dentro no sea compatible. Te aconsejo crear un blog de pruebas con el mismo código y hacer allí los cambios y pruebas. Un saludo.