Después de un mes aprendiendo a personalizar la plantilla móvil de blogger, hoy llegamos a la lección final que seguro estarás esperando como agua de mayo ya que la versión que nos da blogger por defecto no nos incluye ningún gadget. No olvidemos que una gran mayoría de seguidores lo hacen a través del móvil (en la presentación del curso os enseñe como averiguar este dato) y si no personalizamos nuestra plantilla , involuntariamente estamos haciendo que el lector se pierda muchas cosas y frenando el crecimiento de nuestro blog. Añadiendo y adaptando algunos gadgets como redes sociales, etiquetas, suscripción o banners específicos, facilitamos la usabilidad de nuestra web.

Antes de empezar me gustaría recordarte las lecciones vistas hasta ahora:

Añadir un gadget que ya esta en nuestra plantilla

Antes de todo como consejo antes de toquetear la plantilla de blogger es hacer una copia de seguridad por si las moscas. Dicho esto, vamos al lío !!!

Lo primero que tenemos que hacer identificar el id del gadget que queremos incluir. Desde diseño ponemos el cursor encima de Editar de gadget en cuestión y abajo nos saldrá una barra muy larga donde podremos sacar el Id para después incluirlo en nuestra plantilla móvil y adaptarlo a ella.

 

 

Ir a plantilla→editar→buscar widget. Hacemos click en el id del gadget que queremos añadir a la versión móvil. En mi caso quiero añadir el Sobre mi (Image1) y el gadget de etiquetas(Label3) que me sirve como un índice de temas/secciones del blog . Procedemos añadir el atributo mobile=’yes’ que indica que se mostrara en el móvil. Así quedará la parte de nuestro código:

 

 

A continuación buscamos en la plantilla <b:skin>….</skin>, hacemos click en lo puntos para ver todo nuestro código CSS. Bajamos hasta encontrar la sección de móvil:

 

/*Mobile
————————————*/

 

Añadimos el código de estilo de los gadgets que queremos adaptar a la versión móvil.

 

→Código para adaptar el gadget de Sobre mi (Image1)
.mobile #image1  { margin:0 auto; width:100%;padding: 20px; margin-top: 20px; }

 

 

→Código para adaptar el gadget de Etiquetas
.mobile #Label3  {margin:0 auto; width:90%; padding:5px; margin-top: 20px;}

 

.mobile #Label3 h2 {
font: normal normal 14px arial; /*fuente y tamaño del texto*/
text-transform: uppercase; /*para transformar texto en mayúsculas*/
border:1px solid #333333; /*estilo del borde*/
padding: 5px; /*tamaño del fondo de cada etiqueta*/
text-align: center !important; /*estilo del título del gadget*/
}

 

Podéis modificar todo lo marcado en rosa y/o incluir otros atributos si necesitáis adaptar el espacio inferior (margin-bottom), en positivo para agrandar y en negativo para disminuir. La propiedad width se refiere al tamaño del gadget. A mi me quedaba muy grande al 100% y se me salia de la pantalla por eso tuve que reducirlo un poco.

 

Una vez personalizado los códigos, le damos a vista prevía para comprobar que no hay ningún error, guardamos plantilla y comprobamos como se ve el móvil.

 

Este mismo proceso lo podéis seguir con cualquier gadget de vuestra plantilla. Lo importante es localizar su ID y adaptar los códigos CSS a nuestra plantilla. Normalmente no queda perfecto a la primera y es cuestión de ir variando valores.

 

Todo salio bien pero no encontraba la manera de centrar el gadget de imagen por más que ajustaba los margenes con el atributo margin. Así empecé a trastear por la plantilla y di con la solución. Ir directamente a editar la plantilla Html, localizar el gadget en cuestión como comento más arriba.

 

En mi caso la Imagen de Sobre mi corresponde al HTM1 como marco en la siguiente imagen. A continuación debemos hacer click en los puntos suspensivos que marco.

 

 

Y a continuación volvemos a hacer click en los siguientes puntitos y así tendremos abierto el gadget en su totalidad.

 

 

Para finalizar deberemos añadir <center></center> justo en la línea que marco en la imagen. Fíjate bien de ponerlo en la primera línea por que a otra más abajo igual.
La línea quedaría así:

 

 <center><img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + &quot;_img&quot;’ expr:src=’data:sourceUrl’ expr:width=’data:width’/></center>
 

 

 

Como siempre antes de guardar, comprobamos la vista previa y si todo va bien guardamos la plantilla. Solo nos queda comprobar como queda en nuestro móvil.

 

Crear un gadget nuevo solo para móvil

Os pongo el ejemplo de mi blog donde tengo un buscador integrado en la barra fija que no esta visible en el móvil. Por ese motivo me gustaría crear un buscador exclusivo para el móvil. Hay varias formas de incluirlo. Os voy a mosrtar una basada en un post de El Perro de Papel.

Primero creamos el gadget en la zona del footer así nos evitamos moverlo de sitio. Este seria el código a añadir en un witget Html en la sección Diseño de blogger.

<form action=’/search’ id=’search’ method=’get’ name=’searchForm’ style=’display:inline;’>
<input id=’search-box’ name=’q’ onblur=’if (this.value == &quot;&quot;) this.value = &quot;Buscar…&quot;;’ onfocus=’if (this.value == &quot;Buscar…&quot;) this.value = &quot;&quot;;’ size=’28’ type=’text’ value=’Buscar…’/></form>

Después le indicamos que solo lo muestre en la versión móvil con el atributo que ya hemos visto anteriormente mobile=’only’. Para esto seguimos el mismo procedimiento que siempre. Identificamos el Id del gadget desde diseño poniendo e cursor encima de Editar, saldrá una línea de código en la parte de abajo de donde podemos sacar el Id . En mi caso HTML1.

 

 

Añadimos el estilo CSS desde Plantilla→personalizar→avanzado→añadir CSS

 

#HTML1  { /*id del gadget*/
margin:0 auto;
display: block;
width: 325px; /* Ancho del buscador */
background: #b5f2f2; /*color del fondo*/
margin-top: 10px;/*distancia superior*/
text-align: center; /*texto centrado*/
}
#search-box { /*cuadro interior*/
width: 175px;  /* Ancho del cuadro blanco de búsqueda */
border: 0px; /*estilo del borde. en mi caso no hay borde*/
background: #FFFFFF;  /* Color de fondo del cuadro de búsqueda */
font: normal normal 10px arial; /*fuente y tamaño*/
text-align:center; /*texto centrado*/
}

Como siempre todo lo marcado en rosa lo podéis modificar y personalizar a vuestro estilo. Guardamos y si vais al móvil os quedará algo así.

 

Nota: Según he apreciado en este proceso, manejar y adaptar la plantilla a nuestro antojo puede traer algún que otro inconveniente que no tiene que pasar a todos pero a mi me paso y por eso debo comentar. Después de hacer lo primeros cambios en el código html, me di cuenta que blogger no me dejaba cambiar los gadgets de lugar desde el panel diseño. Esto no es un problema aunque puede ser un pequeño incordio si sois de los que no paráis de mover las cosas de sitio. La solución, después de buscar por la web. está en este post de Oloblogger que explica la causa. Yo me he acostumbrado a si quiero mover los gadgets hacerlo directamente desde la plantilla que es una solución. Otro posible error fantasma que me ha pasado es que al querer guardar , blogger me decía que No se han podido guardar los cambios pero luego comprobaba que en el blog si que se reflejaba, por eso lo califico como error fantasma.

 

Solo me queda daros las gracias por acompañarme en este curso que espero que os haya ayudado a tener una versión móvil más personal y atractiva. Espero vuestras dudas y opiniones en los comentarios. Recordad que me encantaría que este curso llegara a la mayor número de bloggers posible y que aunque ésta sea la última lección, encontrareis el curso entero en mi página de Cursos Gratis. Un abrazo y nos vemos por las redes.

 

 

¿Te ha sido de utilidad el artículo?
(Votos: 0 Promedio: 0)

¿Quieres descubrir las "7 Claves para tener un negocio online Rentable y Visible con menos de 200 visitas diarias?

Recuerda, el tamaño aquí tampoco importa...

The following two tabs change content below.

Ana María

Mamá, bloguera y emprendedora por sorpresa con alma inquieta. El diseño es mi pasión y la redes sociales mi hábitat preferida. Mi misión: ayudar a otros bloggers a crear su proyecto online de una manera creativa, personalizada y profesional.

Pin It on Pinterest