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:
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
Si has creado un menú personalizado añadiendo tu propio CSS (parecido al que puedes ver en este blog) , entonces la cosa, se complica un poco más, porque tienes que crear un nuevo menú para el móvil, así que vamos a ello.
Vamos al lío!
Copia este código, pégalo en el bloc de notas y configúralo según tus necesidades:
¿Ya lo tienes? pues pega esto antes del cierre de tu etiqueta div, en el menú movil que estás configurando.
Quedaría de la siguiente manera:
Cuando lo tengas totalmente configurado, dirígete a la plantilla y busca este código: <body expr:class=’"loading" + data:blog.mobileClass’>
Pega tu menú móvil, justo debajo. Procura que quede por encima del menú que personalizaste para vista en ordenador, porque vamos a añadir una condicional, para que cada versión aparezca en el dispositivo correspondiente. Observa cómo está montado, porque te voy a explicar las secciones coloreadas:
La parte señalada en amarillo, es lo que tienes que localizar, para añadir debajo, el HTML para vista móvil.
Lo señalado en verde , es la condicional que tienes que añadir para que, dependiendo desde dónde visiten tu blog (PC o móvil) se muestre el menú correspondiente.
El código que está en morado, es el menú para vista móvil.
El código que está en azul es el menú para vista ordenador.
Ahora vamos a darle un poco de CSS, para personalizarlo al gusto. Busca en la plantilla: </b:skin> y justo encima, añade este código:
Cuando te aparezca, añade esto bajo el padding y el margin:
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:
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.
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 .
Una vez que la localizas, es cuestión de ir a Plantilla>Editar HTML y pulsar en el desplegable "Ir al widget".
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:
Hazlo tantas veces como gadgets añadas a vista móvil, escribiendo la ID correspondiente y ajustando la cantidad a lo que necesites.
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.
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!
Te aconsejo que no añadas muchas páginas para vista móvil, porque al estar dispuestas las secciones en línea, se mostrará demasiado alto y quedará feote. Así que lo mejor es elegir las 4 o 5 secciones más importantes.
Vamos al lío!
Copia este código, pégalo en el bloc de notas y configúralo según tus necesidades:
<div id='menu-movil'>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
</div>- Si tienes más páginas, copia una línea y pégala a continuación (antes del cierre de la etiqueta div)
- Si tienes menos, borra las líneas que necesites.
- Si quieres añadir tus redes sociales, añade también esta parte. Antes, tendrás que tener instalada la cartera de iconos en tu plantilla. Si no la tienes, antes de nada, busca <head> en tu plantilla y justo debajo, pega este código: <link href=’//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.css’ rel=’stylesheet’/>
¿Ya lo tienes? pues pega esto antes del cierre de tu etiqueta div, en el menú movil que estás configurando.
<a href=’URL FACEBOOK’><i class=’fa fa-facebook’/></i></a>
<a href=’URL INSTAGRAM’><i class=”fa fa-instagram”></i></a>
<a href=’URL GOOGLE+’><i class=”fa fa-google-plus”></i></a>
<a href=’URL PINTEREST’><i class=”fa fa-pinterest”></i></a>
<a href=’URL TWITTER’><i class=”fa fa-twitter”></i></a>Quedaría de la siguiente manera:
<div id='menu-movil'>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL DE PÁGINA'>NOMBRE DE PÁGINA</a>
<a href='URL FACEBOOK' target='_blank><i class='fa fa-facebook'/></a>
<a href='URL INSTAGRAM' target='_blank><i class="fa fa-instagram"></i></a>
<a href='URL GOOGLE+' target='_blank><i class="fa fa-google-plus"></i></a>
<a href='URL PINTEREST' target='_blank><i class="fa fa-pinterest"></i></a>
<a href='URL TWITTER' target='_blank><i class="fa fa-twitter"></i></a>
</div>Cuando lo tengas totalmente configurado, dirígete a la plantilla y busca este código: <body expr:class=’"loading" + data:blog.mobileClass’>
Pega tu menú móvil, justo debajo. Procura que quede por encima del menú que personalizaste para vista en ordenador, porque vamos a añadir una condicional, para que cada versión aparezca en el dispositivo correspondiente. Observa cómo está montado, porque te voy a explicar las secciones coloreadas:
<body expr:class=’"loading" + data:blog.mobileClass’>
<b:if cond=’data:blog.isMobile’>
<div id=’menu-movil’>
<a href=’http://demo20spark.blogspot.com.es/’>INICIO</a>
<a href=’http://demo20spark.blogspot.com.es/p/conoceme.html’>SOBRE MI</a>
<a href=’http://demo20spark.blogspot.com.es/p/indice_15.html’>INDICE</a>
<a href=’http://demo20spark.blogspot.com.es/p/contacto.html’>CONTACTO</a>
<a href=’URL PAGINA FACEBOOK’><i aria-hidden=’true’ class=’fa fa-facebook’/></a>
<a href=’URL PAGINA TWITTER’><i aria-hidden=’true’ class=’fa fa-twitter’/></a>
<a href=’URL PAGINA GOOGLE+’><i aria-hidden=’true’ class=’fa fa-google-plus’/></a>
<a href=’URL PAGINA INSTAGRAM’><i aria-hidden=’true’ class=’fa fa-instagram’/></a>
<a href=’URL PAGINA YOUTUBE’><i aria-hidden=’true’ class=’fa fa-youtube’/></a>
</div>
<b:else/>
<div id=’menu-superior’>
<div id=’menu’>
<ul>
<li><a href=’http://demo20spark.blogspot.com.es/’>INICIO</a></li>
<li><a href=’http://demo20spark.blogspot.com.es/p/conoceme.html’>SOBRE MI</a></li>
<li><a href=’http://demo20spark.blogspot.com.es/p/indice_15.html’>INDICE</a></li>
<li><a href=’http://demo20spark.blogspot.com.es/p/contacto.html’>CONTACTO</a></li>
<li><a href=’URL PAGINA FACEBOOK’><i aria-hidden=’true’ class=’fa fa-facebook’/></a></li>
<li><a href=’URL PAGINA TWITTER’><i aria-hidden=’true’ class=’fa fa-twitter’/></a></li>
<li><a href=’URL PAGINA GOOGLE+’><i aria-hidden=’true’ class=’fa fa-google-plus’/></a></li>
<li><a href=’URL PAGINA INSTAGRAM’><i aria-hidden=’true’ class=’fa fa-instagram’/></a></li>
<li><a href=’URL PAGINA YOUTUBE’><i aria-hidden=’true’ class=’fa fa-youtube’/></a></li>
<li><div id=’buscador’><form action=’/search’ id=’searchthis’ method=’get’ style=’display: inline;’>
<input class=’search-box’ name=’q’ placeholder=’BUSCAR’ size=’30’ type=’text’/>
</form></div></li>
</ul>
</div>
</div>
</b:if>
La parte señalada en amarillo, es lo que tienes que localizar, para añadir debajo, el HTML para vista móvil.
Lo señalado en verde , es la condicional que tienes que añadir para que, dependiendo desde dónde visiten tu blog (PC o móvil) se muestre el menú correspondiente.
El código que está en morado, es el menú para vista móvil.
El código que está en azul es el menú para vista ordenador.
Ahora vamos a darle un poco de CSS, para personalizarlo al gusto. Busca en la plantilla: </b:skin> y justo encima, añade este código:
#menu-movil{
background: #b7cdc0; /*fondo del menú*/
padding-top:2px; /*espacio del texto respecto a la parte superior*/
margin:0 auto;
width:100%;
text-transform:uppercase; /*para que el texto aparezca en mayúsculas, borra si no quieres*/
font-size: 12px; /*tamaño del texto*/
text-align:center; /*para que el texto esté centrado*/
display:block;
box-shadow: 0px 2px 6px #333333; /*sombra del menú, borra si no quieres*/
position:fixed; /*para que el menú permanezca fijo, borra si no quieres*/
z-index:101;
}
#menu-movil a{
padding: 0px 15px ; /*separación entre los elementos de la barra*/
line-height: 50px; /*espacio entre lineas*/
color:#ffffff; /*Color del texto*/
}
#menu-movil i{
font-size: 20px; /*Tamaño de los iconos*/
}
.mobile #header{
padding-top:70px; /*separación de la cabecera respecto al menú*/
text-align: center; /*posición de la cabecera*/
}Recuerda guardar los cambios y actualizar tu plantilla en vista móvil, para observar los resultados e ir ajustando lo que no te guste. Mira el vídeo si no sabes cómo hacer los cambios.
MENU SUPERIOR DESPLEGABLE
Para este menú, te voy a dar enlace al tutorial de Odisea Gráfica, en el que Minerva Aurora, explica cómo adaptar tu menú desplegable a vista móvil. Yo lo he adaptado a mis necesidades, porque el desplegable que tenía anteriormente para vista móvil, era bastante sosete en comparación con este. Así que, me parece lógico, que si ella es la que lo ha publicado, te dirija allí para el paso a paso.
Aún así, te recomiendo que metas la condicional que te he mostrado con el menú anterior para que no te dé problemas 😊
CAMBIAR EL ASPECTO DE LA FECHA
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
.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 .
Una vez que la localizas, es cuestión de ir a Plantilla>Editar HTML y pulsar en el desplegable "Ir al widget".
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
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!
¿Quieres aprender a diseñar bonito y tener un blog atractivo? Échale un vistazo al Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:
