28 julio 2016

Cómo adaptar tu plantilla Blogger a vista móvil [Videotutorial]

como-adaptar-plantilla-blogger-vista-movil


En la actualidad, casi todas las plantillas son responsive o adaptadas a vista móvil, por lo que cada vez son menos los blogs y webs, que no cuentan con este sistema, pero aún quedan algunos. Así que si formas parte de ese pequeño grupo que aún no ha actualizado su plataforma, ya va siendo hora de que lo hagas.


Básicamente por dos motivos esenciales:


 Google penaliza las páginas que no están adaptadas a vista móvil

 Los usuarios que te visiten desde su smarthphone (que ya superan a los que lo hacen desde el PC) huirán despavoridos, si se tienen que dejar las pestañas para leer tu contenido.

Son motivos de peso ¿verdad? pues vamos a solucionarlo de una manera sencilla.







Antes de nada, te aviso de que no vamos a convertir la plantilla en responsive. Este tutorial es para personalizar la plantilla que Blogger te brinda, para vista móvil. Si tienes dudas, sobre la diferencia entre plantilla responsive y plantilla adaptada a vista móvil, mírate antes el enlace que te acabo de dejar, porque el tutorial que te he preparado es largo y no lo quiero extender aún más.

Aquí tienes el vídeo con todo el paso a paso, por si te resulta más sencillo de seguir de este modo. Bajo el vídeo, tienes todo el tutorial, dividido por secciones, para que localices fácilmente los códigos que te interesen:




Empezamos!


Dirígete a Plantilla y clica en la rueda dentada que aparece bajo la plantilla móvil.


Escoge la opción Personalizado y guarda los cambios. Si miras ahora el blog desde tu smartphone, verás que se ha adaptado a vista móvil, pero hay bastantes cosillas que se podrían mejorar o añadir ¿verdad? pues vamos paso a paso, para configurar la vista totalmente a tus necesidades.



ADAPTAR TU MENÚ A VISTA MÓVIL



Hace 2 semanas, te mostré 3 maneras diferentes de personalizar un menú en Blogger, pero no te conté cómo adecuar esos menús a vista móvil, por lo que si has seguido alguno de los 2 tutoriales que mostré exclusivamente en el blog privado, el menú no se mostrará al completo desde el smartphone.

Pues se acabó el problema, porque hoy lo adaptarás perfectamente.


MENÚ DE BLOGGER


Pero vamos con el 1º de ellos, en el que usábamos el mismo gadget de páginas de nos trae Blogger, como menú horizontal. Si es tu caso, no tienes que hacer gran cosa más allá de cambiar colores y fondos, porque Blogger lo adapta a vista móvil mediante un desplegable, como puedes ver en esta imagen:


menu-blogger-vista-movil

Para cambiar los colores de tu menú, dirígete a Plantilla >Editar HTML (recuerda hacer una copia de seguridad, antes de liarte a hacer cambios) y haz clic en cualquier sitio, dentro de la plantilla para pulsar Ctrl+F y que te salga la caja de búsqueda.

Pega lo siguiente: .mobile .tabs-inner .PageList .widget-content {

Ahora que has localizado la parte que interesa, sustitúyela por completo por este código:

.mobile .tabs-inner .PageList .widget-content {

  background-color: #becfe7; /*color de fondo del menú*/

  color: #727272; /*color del texto*/

  border-top: 1px solid #becfe7; /*borde superior del menú*/

  border-bottom: 1px solid #becfe7; /*borde inferior del menú*/

}



Mira el vídeo, si no sabes cómo hacer los cambios.




MENU SUPERIOR PERSONALIZADO CON O SIN DESPLEGABLE

adaptar-menu-vista-movil



La manera de crear un menú personalizado con o sin desplegable, forma parte del contenido exclusivo del blog privado y lo podrás ver si te unes a la Comunidad Demo 2.0, por lo que el proceso para adaptarlos a vista móvil, también lo podrás conocer allí.

Así que si esta es tu opción favorita para instalar un menú en tu plantilla Blogger, no esperes más para unirte a la comunidad, es gratis y todo son ventajas. Descúbrelas:






CAMBIAR EL ASPECTO DE LA FECHA



personalizar-fecha-plantilla-movil



Si muestras la fecha en tus posts, quizás te apetezca cambiar la apariencia en la vista móvil:


Vuelve a la caja de búsqueda de la plantilla, para localizar esta parte de tu CSS: .mobile .date-header span {


Cuando te aparezca, añade esto bajo el padding y el margin:

background: #ffffff; /*color de fondo, si no lo quieres, bórralo*/
border: 1px solid #becfe7; /*para enmarcar la fecha, si no quieres, bórralo*/
color: #becfe7; /*color del texto*/
font-size: 10px; /*tamaño del texto*/


Quedaría de esta manera:


.mobile .date-header span {
padding: 0.1em 10px; /*aumentar espacio si la enmarcas*/
margin: 0  0px; /*posicionarla horizontalmente*/
background: #ffffff; /*color de fondo, si no lo quieres, bórralo*/
border: 1px solid #becfe7; /*para enmarcar la fecha, si no quieres, bórralo*/
color: #becfe7; /*color del texto*/
font-size: 10px; /*tamaño del texto*/
}



Si necesitas seguir el paso a paso en vídeo, puedes ver el proceso a partir del minuto 10.


CAMBIAR EL ASPECTO DEL TÍTULO DE LOS POSTS



Localiza esta parte en tu plantilla: .mobile h3.post-title {

Sustitúyela por esto:


.mobile h3.post-title {
margin: 0;
background: #ffffff; /*color de fondo. Si no lo quieres, bórralo*/
border: 1px solid #becfe7; /*para enmarcar el titulo. Si no quieres, bórralo*/
color: #becfe7; /*color del texto*/
font-size: 10px; /*tamaño del texto*/
}



Mira el vídeo (minuto 15'51) si no sabes cómo hacer los cambios.




POSICIONAR LA CABECERA


Si el título de tu blog, no está posicionado como quieres, dirígete a  Plantilla>Editar HTML y haz clic en cualquier sitio dentro de la plantilla, para pulsar Ctrl+F y que te salga la caja de búsqueda. Pega </b:skin> y justo encima, añade este código:


.mobile #header{
padding-top:70px; /*separación de la cabecera respecto a la parte superior*/
font-size:40px; /*para ajustar el tamaño del titulo*/
text-align: center; /*posición de la cabecera*/
}



Cambia a right (izquierda) o left (derecha), si no quieres que la cabecera aparezca centrada.


Puedes ver el paso a paso en el vídeo a partir del minuto 21'23.


AÑADIR O QUITAR GADGETS EN VISTA MÓVIL



Si tienes gadgets en el sidebar que te gustaría que aparecieran en la vista móvil y no salen, lo primero que tienes que hacer es localizar la ID del gadget. Para eso, sitúa el ratón sobre el gadget y haz clic con el botón derecho del ratón, para elegir la opción "Inspeccionar" donde podrás ver la ID .


inspeccionar-elementos-de-la-plantilla-blogger




Una vez que la localizas, es cuestión de ir a Plantilla>Editar HTML y pulsar en el desplegable "Ir al widget".


poner-gadgets-sidebar-vista-movil




 Señala la ID correspondiente y cuando te lleve, cambia lo que te he marcado de azul por la palabra yes.


<b:widget id='HTML8' locked='false' mobile='no' title='' type='HTML' visible='true'>


Eso hará que aparezca en vista móvil.

Si quieres que alguno de los elementos del sidebar sólo aparezcan en vista móvil, tendrías que cambiar el no por only. De esta manera:

<b:widget id='HTML8' locked='false' mobile='only' title='' type='HTML' visible='true'>



Por ejemplo, en la personalización del menú superior a vista móvil, he eliminado el buscador, para no saturar este espacio. Pero si quieres tener un buscador en la vista móvil, podrías crearlo (sigue este tutorial para crear un buscador en el sidebar) y dirigirte al gadget correspondiente para añadirle la condicional mobile='only' , porque no tiene mucho sentido tener 2 buscadores en la vista de ordenador (uno en el menú y otro en el sidebar).

Una vez que configures la aparición de los diferentes gadgets a tu gusto, tendrás que ayudarte del CSS, para posicionarlos correctamente, porque lo más probable es que no aparezcan todo lo centrados que te gustaría.

Para eso, como ya sabes localizar la ID, lo único que tienes que hacer es pegar </b:skin>  en la caja de búsqueda , hacer intro, para que te lleve a esa etiqueta y pegar el siguiente código justo encima:


.mobile #ID {

height: auto;

max-width: 100%;

margin: 10px 85px; /*posicionar el gadget horizontal y verticalmente*/
}



Hazlo tantas veces como gadgets añadas a vista móvil, escribiendo la ID correspondiente y ajustando la cantidad a lo que necesites.

Recuerda guardar los cambios y actualizar tu plantilla en vista móvil, para observar los resultados e ir variando hasta que estés conforme con la posición de los elementos. Mira el vídeo (minuto 25'23), si no sabes cómo hacer los cambios.


¿Aún no tienes el blog adaptado a vista móvil? aprovecha ahora con este videotutorial! Tuitéalo



Y con esto terminamos, creo que no me dejo nada, pero si echas de menos algo o tienes dudas/sugerencias que hacerme, no te cortes y déjalas en los comentarios. Con este post, finalizo los tutoriales para personalizar tu blog con CSS, así que aprovecho para recordártelos, porque el verano es una época estupenda para hacer los cambios que necesita tu blog y empezar Septiembre con una imagen potente y renovada.


 Cómo instalar iconos en tu blog para mostrar tus redes sociales

 Cómo poner imágenes o iconos en los botones de compartir el post

 Cómo instalar un botón de subir con imágenes o iconos

 Cómo sustituir entradas antiguas y recientes por iconos

 Cómo personalizar la caja final del post en Blogger

 Cómo personalizar el sidebar de Blogger con CSS

 3 maneras de personalizar tu menú en Blogger



Anímate, verás cómo te vas a alegrar de lo que puedes conseguir tú misma, tocando tu plantilla sin miedo.

Diseña el blog de tus sueños con estos tutoriales para personalizar Blogger con CSS. Tuitéalo



Antes de marcharme, te comento que este es el último post hasta Septiembre. En Agosto, apareceré sólo en las bandejas de correo de mis suscriptores, para hablar un poco de cómo he vivido el antes y el después de publicar el blog. Mi intención es mostrar el proceso que he seguido, lo que me ha resultado y lo que no, para que podáis sacar ideas y trazar un mapa, acorde a vuestras necesidades, que os haga más liviano el camino hacia vuestras metas. Serán 4 correos en el mes (uno por semana) en los que hablaré de pasado, presente y futuro. Si no te lo quieres perder, únete a la Comunidad Demo 2.0 y descubre todas sus ventajas.






Espero que las vacaciones te sirvan para descansar, madurar ideas y encauzar tus proyectos con acierto en la próxima temporada. En Septiembre, volveré a asomar por aquí, con novedades, aunque en redes sociales, me dejaré caer de vez en cuando y quizás adelante algo 



Que tengas un gran verano!




¿Necesitas ayuda para organizarte mejor?, échale un vistazo al Planificador Blogger 2017, viene actualizado y mejorado! Descárgatelo e imprime las hojas que vayas necesitando:


11 comentarios:

  1. Yo soy un poco manazas para estas cosas pero aun así, con lo bien que lo explicas... Creo que me voy a animar a empezar a toquetear mi blog.

    Un beso! ♥

    ResponderEliminar
    Respuestas
    1. Ya verás como le empiezas a coger el gusto en cuanto compruebes cómo eres capaz de poner tu plantilla a tu gusto. Un beso, Gina!

      Eliminar
  2. Hola Raquel
    Pues no consigo poner el gadget de seguidores en la plantilla móvil, busco el widget que es followers1 en mi plantilla, al no aparecerme la opción mobile, la añado yo con un 'yes', pero solo se me ve el título del gadget, no los seguidores...

    ResponderEliminar
    Respuestas
    1. Hola Macarena! estoy mirando el blog desde mi móvil y a mí ni siquiera me aparece el título, es más, tras las entradas no hay ningún gadget. Aparte de añadir yes en el widget Followers1, tienes que incluir el css, que es la segunda parte, porque también puede ser que te aparezca desplazado y no se vea (aunque no es lo normal). Si añades el Css y la opción yes, te debe aparecer sin problemas, pero si no es así, me lo comentas y vemos qué puede pasar. Un besote!

      Eliminar
    2. Sí, lo quité, por eso no te aparece ni el título.
      Probaré mañana añadiendo css, a ver si lo consigo.
      Muchas gracias por contestar.
      Un besote.

      Eliminar
    3. Pues no lo consigo, se queda solo el título 'sígueme' (puede entrar a comprobarlo que lo he dejado)de mi gadget de seguidores. Y es que cuando le doy a inspeccionar me aseguro que coge el gadget completo...

      Eliminar
    4. He probado con el gadget del buscador y lo consigo poner, pero el de seguidores no. Creo que debe ser algo de blogger, porque desde el móvil si entro en cualquier blog y pincho en "ver versión web" me aparece todo lo de ese blog menos los seguidores, que está en blanco.
      Qué raro... Gracias de todas formas.
      Un beso.

      Eliminar
    5. Hola Macarena, he estado investigando y por lo visto es un problema común en Blogger. Aquí en el foro, puedes informarte mejor: https://productforums.google.com/forum/?hl=es#!topic/blogger-es/6UtoTjVoqW4;context-place=forum/blogger-es

      Esperemos que le den solución. Un beso!

      Eliminar
    6. Gracias Raquel, ya decía yo que tú lo explicabas muy fácil y yo lo hacía y nada...
      A ver si lo arreglan.
      Un besote.

      Eliminar
  3. Muy util el post. Hace tiempo hice un curso de personalizar la plantilla movil de blogger. Se te parece bien lo enlace con este post porque tratas alguna cosa que to no hice por aprovechar el curso que hizo anteriormente miss lavanda. Pero como su blog ya no esta activo este contenido me viene al pelo. Un saludo

    ResponderEliminar
    Respuestas
    1. Muchas gracias Ana Maria, me alegra verte por aquí. Claro que me parece bien, si te sirve, me alegro. Lo que necesites, solo tienes que decírmelo. Un saludo compi!

      Eliminar

demo