Personalizando la plantilla móvil: Añade y adapta gadgets

por | Sep 24, 2015 | Cursos, Tips para Bloggers | 9 Comentarios

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.

 

Diseñoblogs

 

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

Posts relacionados:

  1. Curso personaliza tu plantilla móvil: cabecera especial
  2. Curso personaliza tu plantilla móvil: menú páginas
  3. Personaliza tu plantilla móvil: barra superior fija
  4. Personaliza tu plantilla móvil: Presentación y primeros pasos

Nota Importante: Todas la dudas referentes a los posts las intentaré contestar desde los comentarios de los mismos y NUNCA por email. De esta manera mi respuesta estará visible para todos. Un saludo.

9 Comentarios

  1. Elisabet Macias
    Elisabet Macias el 5 octubre, 2015 a las 13:00

    Ana! justamente te acabo de comentar en la lección del menú el problema de no poder cambiar los widgets, y es que a mi me resulta muy difícil cambiarlos desde la plantilla… jajaja
    Bueno, acabaré volviendo a poner el dichoso menú cuando tenga hechos los cambios que quiero y se acabó el problema!!
    Otro abrazo!!

    • admin
      admin el 5 octubre, 2015 a las 13:09

      Es verdad Eli, justo me di cuenta de ese inconveniente en la lección del menú. Por eso lo expliqué al final de este post con la única solución que eh encontrado hasta el momento. Son las consecuencias que a veces pasan de ir toqueteando y personalizando nuestra plantilla. A blogger no le debe gustar mucho porque nos pone trabas como esta. Lo único que a mi aunque me pone que no se guardarlos cambios, se me los guarda. Un saludo y perdón por no tener otra solución para este problema.

  2. Irene - El Desván de Ideas
    Irene - El Desván de Ideas el 30 octubre, 2015 a las 19:32

    Me ha chiflado el curso!
    He puesto mis gadgets deplegables en la plantilla móvil y quedan chulísimos!
    Mil gracias Ana!

  3. admin
    admin el 25 enero, 2016 a las 19:56

    Me ha encantado y ya tengo mi chachi plantilla. A mi como a ti me ocurrió lo de que MissLavanda me dejó a medias… gracias por currártelo!! Lo de añadir ese menú final, nada, no me sale chica!, que horror, demomento lo dejo!! jajaja
    Mil graciasssss!!! Besines

  4. Inspiraciones y letras Blog
    Inspiraciones y letras Blog el 7 agosto, 2016 a las 23:16

    Hola que tal, me llamo Eli, he puesto en práctica el tutorial, pero tengo un problema, añadí el gadget seguidores, que no se veía en la versión móvil del blog, y ahora se ve a ratos, hay veces que entro me logueo y no aparece, pero si le doy a salir si aparece y al revés, vamos que aunque seguí los pasos no siempre lo veo, la mayor parte de las veces no esta y lo veo cuando doy a refrescar la pagina varias veces seguidas.
    Gracias de antemano.

    • admin
      admin el 8 agosto, 2016 a las 9:13

      Hola, Ese gadget de seguidores de blogger esta un poco obsoleto y tiende a desaparecer. Puede que sea esa la razón por la que no aparezca siempre. Siempre que toqueteamos y modificamos la plantilla de blogger, sobre todo la versión móvil, puede no funcionar todo también como nos gustaría. Un saludo

  6. Inesa
    Inesa el 17 enero, 2017 a las 21:36

    Hola Ana María, gracias por compartir todos tus conocimientos.

    Quería preguntarte cómo puedo hacer que en la versión móvil de mi blog se vean las entradas de forma continua a medida que vas deslizando la pantalla hacia abajo, en vez de tener que pulsar el botón de «siguiente» para seguir leyendo.

    Muchísimas gracias de antemano! Un saludo.

  7. elmer antonio
    elmer antonio el 25 mayo, 2017 a las 2:49

    muchas gracias por conpartir pero ami no me sale el mobile’yes’ para modificarlo abra que agrearlo ?

Pin It on Pinterest