CERCA DEL INFINITO: PERSONALIZACIÓN DE LA PLANTILLA MÓVIL #1

redes

ON-LINE

PERSONALIZACIÓN DE LA PLANTILLA MÓVIL #1

5 de junio de 2015

¡Hola a todos, infinitenses! Como ya sabréis algunos de los que me estáis leyendo, Google hace unas semanas avisó de que penalizaría a todas aquellas páginas que no estuvieran optimizadas para dispositivos móviles. Esto es porque el uso de los móviles, celulares, como-los-llaméis-en-vuestros-respectivos-países para acceder a la web se ha incrementado de tal forma que puedo estar 100% segura de que la mayoría de los que estáis leyendo este post lo hacéis desde el móvil. Ahora bien, no hay tutoriales explicativos que examinen a fondo cómo va esto de personalizar nuestra plantilla móvil de blogger (incoherencias de la vida y del mundo de Internet), por eso vengo hoy con esta entrada, que será la primera de una serie de post donde os iré explicando cómo podéis ir personalizando vuestra plantilla móvil.

PRIMER PASO: ELEGIR LA PLANTILLA

Antes de nada, y al igual que pasa con la plantilla de ordenador normal y corriente, tenemos que elegir nuestra plantilla para móvil. Para elegirla tendremos que seguir los siguientes pasos:

1. Entrar en la sección "Plantilla" dentro del escritorio de Blogger.
2. Pulsar la rueda de configuración debajo de la previsualización de la plantilla móvil.
3. Marcar la casilla "Sí, mostrar la plantilla para móviles en los dispositivos móviles".
4. Seleccionar la opción "Personalizado".





















PD: Para ver las fotos a pantalla completa tan solo tenéis que hacer clic en ellas.


SEGUNDO PASO: AJUSTAR LAS IMÁGENES

Bien, una vez que tengamos la plantilla ya podemos empezar a trabajar con el diseño. Utilizamos esta plantilla porque las otras son predefinidas y nos dejan tocar menos ajustes. Con la personalizada guardamos el diseño de nuestro blog original y podemos hacer tantos cambios como nos apetezca.

Algo tremendamente molesto cuando entramos a un blog desde el móvil son esas imágenes que son más anchas que nuestras pantallas de móvil y terminan descuadrando la página entera, por lo tanto vamos a toquetear un poquito de CSS para que esto no suceda. Para añadir un código CSS a nuestra plantilla solamente tenemos que seguir los siguiente pasos:

1. Entrar en la sección "Plantilla" dentro del escritorio de Blogger.

2. Hacer clic en "Personalizar".

3. Vamos a "Avanzado".

4. Bajamos hasta la opción "añadir CSS".

5. Pegar el siguiente código CSS:

/*Ajustar el ancho de las imágenes en dispositivos móviles*/

.mobile .post img{width:100%; height:auto;}

6. Hacer clic en "Aplicar al blog".
























Y con esto por hoy creo que es suficiente. Es poquito, lo sé, pero es mejor ir poco a poco que darse la paliza en un día. En casa una de los post de esta serie iré dando dos pasos a seguir. Después tendréis todos estos post seguidos en la pestaña de tutoriales, así que si queréis irlos acumulando tampoco pasa nada porque ya sabéis dónde encontrarlos.

PD: Como cada uno tiene necesidades diferentes según su tipo de blog, si os urge alguna cosilla en concreto podéis decírmelo en la sección "Aportación", en el apartado "Aportación de ideas". De esta manera priorizaré vuestras necesidades y trataré de hacer los tutoriales que necesitéis en la menor brevedad posible.

Espero que os haya gustado aunque haya sido poca cosita y que queráis seguir con esta serie de post/mini-curso de personalización de plantilla móvil. ¿Creéis que os será útil? Contadme en los comentarios. ¡Nos vemos el próximo lunes en un nuevo post!



¡ME SUSCRIBO! COTILLEA MI twitter GRANITOS DE ARENA