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!




Este año, planifica tu futuro, viviendo al máximo el presente: AGENDA 2016/2017 DEMO 2.0.

agenda-anual-2016-2017


21 julio 2016

Cómo gestionar las imágenes de tu blog.

como-gestionar-las-imagenes-de-tu-blog

Las imágenes juegan un papel fundamental en los contenidos de un blog.


Como ya te expliqué en la entrada Cómo combinar tipografías para crear presentaciones atractivas, un post con imágenes obtiene mucha más atención que uno que no las tiene. Y si además, le añadimos infografías, vídeos o podcast, ni te cuento.
Con lo cual, si te encargas tu misma del diseño de tus imágenes, te vendrá bien tener en cuenta estos consejos. 

Empiezo:



11 julio 2016

3 maneras de personalizar tu menú en Blogger

3-maneras-de-personalizar-tu-menu-en-blogger

Hoy ando de estreno si miras un poco hacia arriba, hay un nuevo menú superior, que ha hecho posible reducir elementos en el sidebar, porque cómo ya te comenté en esta entrada, el sidebar, cuanto más ligero mejor y a poder ser, exclusivamente con los elementos que más te interese potenciar.



30 junio 2016

Agenda Demo 2.0 2016/2017

agenda-fisica-demo-20



Hace un año, estaba diseñando esta agenda...


Sinceramente, cuando la hice, fue más por diseñar una agenda a mi medida, que por una intención real de venderla. Tenía claro que tenía que tener un espacio para marcar un objetivo diario y otro para plasmar lo más significativo que hubiera tenido el día, porque todos los días hay algo bueno, por muy malos que a veces aparenten ser.


Con el ritmo de vida cada vez más acelerado que llevamos, no solemos poner consciencia en lo que nos rodea, nos movemos entre los planes futuros y los recuerdos pasados y cada vez, soy más consciente de la importancia de vivir en el presente, porque al fin y al cabo, es lo único que tenemos seguro, este momento.


No quiero ponerme profunda, sólo quiero que entiendas el objetivo principal de esta agenda: hacer que vivas el aquí y ahora, porque esto te hará tomar decisiones productivas y establecer objetivos realistas.



23 junio 2016

Cómo usar IFTTT para ahorrar tiempo en tus tareas


como-usar-ifttt-tutorial-automatizar

Llevaba tiempo resistiendo, porque cada vez que leía un tutorial sobre esta aplicación, me parecía un pelín complicada. Pero al final, he pasado por el aro y la he probado, ya que últimamente no doy abasto con tantas tareas al frente. Y realmente me ha impresionado su facilidad de uso, así que hoy te muestro en vídeo, cómo ahorrar tiempo automatizando tareas repetitivas con la aplicación IFTTT.






16 junio 2016

Cómo personalizar el sidebar de Blogger con CSS

como-personalizar-el-sidebar-de-blogger-con-css


Buen jueves! ya andamos otra vez por aquí con nueva entrada para personalizar al máximo tu blog en Blogger con CSS. En el último tutorial publicado, te mostré cómo personalizar el footer del post y hoy le toca el turno al sidebar. Vas a ver qué fácil es darle estilo con un poquito de código ¿preparada? allá que vamos!




09 junio 2016

La gran ventaja de que surjan inconvenientes [Podcast]

la-gran-ventaja-de-que-surjan-inconvenientes

Seguramente conoces el dicho "Todo pasa por algo" y cuando lo que pasa es algo negativo, no hace ni pizca de gracia escuchar la dichosa frase. 

Pero es cierto, los inconvenientes son positivos, porque sin ellos, no podríamos avanzar. 


Este relato que te voy a mostrar, lo escribí justo hace un año, cuando andaba inmersa en la planificación de este blog. No me había vuelto a acordar de él, hasta que en estos días, haciendo un nuevo parón forzoso por el mismo tema, lo he descubierto repasando mis notas y me ha venido genial volver a replantearme todo lo que he desarrollado desde entonces:




demo