Cómo editar y personalizar widgets y estilos Css en Blogger Mobile | Oloblogger Si eres usuario de Blogger y además utilizas una plantilla específica para móviles, aquí encontrarás cómo habilitar o no los widgets para la...

21 de enero de 2013

Cómo editar y personalizar widgets y estilos Css en Blogger Mobile

Gadgets en Blogger para móviles
Si eres usuario de Blogger y además utilizas una plantilla específica para móviles, aquí encontrarás cómo habilitar o no los widgets para la versión de móvil, para la de escritorio o para ambas. Esto es, tú decides si cada widget se muestra o no y en qué plataforma.

Configuración del widget en Blogger


Los widgets por defecto que aparecen en la versión para móvil son:

  • Header
  • Blog
  • Page List
  • Adsense (si usas)
  • Profile
  • Attribution

Blogger permite un atributo con tres posibles valores para controlar si el widget se mostrará o no: mobile="no" | mobile="yes" | mobile="only"


Por ejemplo, el código por defecto para el widget atributtion es:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Ocultar widgets


Así que si quisieras no mostrarlo sólo tienes que añadir mobile='no', quedando así:

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

Mostrar widget


Si por el contrario, lo que deseas es mostrar un widget cualquiera en la versión para móvil lo que debes hacer es declarar en el atributo mobile="yes" Por ejemplo:

<b:widget id='BlogArchive1' title='Archivo del blog' mobile='yes' type='BlogArchive'>

Mostrar widget sólo en móviles


La tercera opción es que un widget cualquiera se muestre sólo a los usuarios que acceden con un dispositivo móvil. Para ello basta con declarar mobile='only'

<b:widget id='BlogArchive1' title='Archivo del blog' mobile='only' type='BlogArchive'>

Personaliza la plantilla móvil de Blogger


Aviso: Esto no lo he podido verificar, así que no puedo garantizar lo exacto y riguroso que puede ser lo que sigue. Espero vuestras opiniones en los comentarios


Según he podido leer en alguna página, la plantilla para las versiones móviles incluyen en su etiquetado lo siguiente:

<body expr:class='"loading" + data:blog.mobileClass'>

Así que asegúrate que en tu plantilla para móvil existe esta expresión en el tag <body> para que lo siguiente te funcione.

En caso de que exista puedes estilizar de forma selectiva cualquier parte de tu blog. Sólo tienes que tener unos conocimientos mínimos de Css y añadir la clase .mobile al selector que te interese.

Por ejemplo, si tienes definido la tipografía de tus h1 de una manera concreta:

h1 {
font: 2rem/1.5 nunito, sans-serif;
color: #2D4261;
}

Para estilizarlo a tu gusto en la versión para móvil sólo tendías que añadir la clase .mobile en esa regla y declarar a tu gusto

.mobile h1 {
font: bold small-caps 120%/120% verdana, arial, sans-serif;
color: #222;
}

Créditos y autoría del original


Este artículo está realizado a partir de la información vista en realcombiz por Durodola Ridwan.

Así que a la fuente original te remito por si hubiese cometido algún error en la adaptación al español o interpretación del mismo.

Pero recuerda que en blogger como en cualquier código, antes de tocar nada es conveniente y muy saludable hacer una copia de seguridad.

Por @Kseso
Por una web con mucho estilo, para Argonautas con buen gusto.
Un Ramajero a la verita del Tormes.


Tal y como figura justo arriba, esta entrada se la debemos al autor de KsesoCss, que por segunda vez publica por estos parajes en lugar de hacerlo en los suyos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

80 comentarios :

  1. Interesante documento... otra para tareas casi pendientes ;)
    Gracias Oloman, un saludo.

    ResponderEliminar
  2. Voy a intentarlo siempre quise modificar el aspecto de la versión móvil, haber como sale

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Te has puesto fuerte desde la última vez que te vi XD

      Bueno, las plantillas dinámicas tienen poco para modificar y por eso nunca me he metido mucho en ellas. Cuando añadas un gadget te lo toma porque cualquier día puedes cambiar el tipo de plantilla y te lo toma, pero que yo sepa sólo se pueden instalar estos. Como ves los anuncios no están en la lista.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Están chulas, pero a mí lo que me gusta es modificar cosas, así que yo al revés que tú ;)

      Eliminar
  4. Ahí va!!! ¡Qué despiste el mío!
    Se me ha pasado darte las gracias por acoger en tu casa a este artículo.

    Ya, a allá por San Pedro echamos cuentas de lo que te haya comido y bebido y esas cosas xDD

    Espero que a alguien le sea de utilidad.

    Un saludo

    ResponderEliminar
  5. hola Oloman!! en primer lugar millones de gracias porque gracias a ti aprendi cosas que nunca hubiese imaginado :)
    He estado buscando por el blog pero no encontre nada y no se si sea el sitio adecuado pero queria preguntar si sabes cual es el gadget que suele llevar por titulo "hablan de nosotros en..", llevo meses buscando y seguro que es sencillo pero no doy con él, podrias ayudarme?? Un saludo!!

    ResponderEliminar
  6. Hola Oloman Oloman. Genial el Oloblogger y gracias por este post! Es lo que andaba buscando.
    Pero por alguna razón no lo consigo poner en mi blog. Tengo una lista de enlaces situada bajo el título y me gustaría que apareciese en el móvil como el widget de páginas (como un desplegable). Y aunque le añado el atributo mobile="yes", pues no aparece ni rastro.
    ¿Existe algún otro atributo a tener en cuenta para que un widget aparezca en versión móvil?
    Gracius

    ResponderEliminar
    Respuestas
    1. No que yo sepa. El problema es que las versiones móviles sólo admiten ciertos gadgets y si te fijas al principio del post, los tipo Blogroll, Lista de enlaces y los HTML/JavaScript (libre) no están en esa lista.

      Eliminar
    2. ¡Hum, es justo eso Oloman!
      Tengo esa lista de enlaces para imitar las categorías de Wordpress, pero parece que tendré que transformarla en lista de páginas de alguna forma.

      Gracias, al menos ya sé dónde estaba el problema! Por lo demás, geniales las ideas que das en el Oloblogger.

      Eliminar
  7. Hola buenas, en una plantilla dinámica se puede cambiar el formato de un widget? ponerle fotos cuando el widget salga de uno de los laterales o crear tú mismo un widget?
    Por ejemplo, se puede poner fotos de los enlaces de páginas en el widget de "LinkList"?

    ResponderEliminar
    Respuestas
    1. Sinceramente no lo sé, aunque sospecho que no porque esas plantillas dejan modificar muy pocas cosas.

      Eliminar
  8. Gran aporte! Sin embargo me tope con un pequeño detalle con el Attribution1. Resulta que cuando hemos suprimido este artilugio gracias a haber habilitado su eliminación del blog con el Locked='false' el atributo mobile='no' pierde su efecto en la plantilla móvil. Mostrandonos el denuevo: "Con la tecnología de Blogger". (al parecer un script fastidioso inmiscuido por allí)

    La idea es que no aparezca en ningúno de los dos lados, o que aparente visualmente eso. Por ello, luego de probar varias maneras de modificar el estilo del Attribution1, llegué a una propuesta no tan limpia pero útil para dejar de ver este texto. Lo que hice fué sacrificar mi footer en la plantilla visible por pc, agregando al primer div del footer el atributo Style='opacity:0.0;'

    Esto me saco de un apuro, sin embargo debe haber una manera mejor. Ahí se las dejo amigos.

    por lo demas les dejo un g+1 al blog!

    ResponderEliminar
    Respuestas
    1. Hola Genialnet. Como ya he comentado anteriormente lo de las plantillas móviles, al igual que las de Vistas dinámicas. casi que no lo toco, pero para las normales sirve con incluir en el CSS un simple .Attribution {display:none;} Puedes probar a ver si eso te funciona.

      Eliminar
    2. Y se me olvidó agradecerte tu idea que seguro funciona según nos cuentas :)

      Eliminar
    3. Perdón si es muy tarde pero yo elimine para que dejara de salir en la web el código por completo, luego no sabia como eliminar de la versión móvil y solo cree otra vez el gadget, le puse el codigo css y le puse al codigo mobile='no' y desaparecio de ambas :D gracias por la ayuda

      Eliminar
  9. Bingo! Gracias! sabía que habría una solución mas limpia, (e indudablemente obvia para los mas experimentados, como tu. jejeje). A la final, luego varias pruebas, simplemente habia optado con taparlo con otro div. Pues sacrificar el footer es perder demasiado. La solución rebuscada que di antes simplemente me sacó de ese apuro inmediato.

    Gran Blog!

    ResponderEliminar
  10. Como se puede cambiar el tamaño y tipo de letra de la frase Con la tecnología de Blogger

    ResponderEliminar
    Respuestas
    1. Mira sólo dos o tres comentarios más arriba. A ese mismo selector, si en lugar de display:none le pones font-size 20px (o lo que sea), le podrás cambiar el tamaño de fuente.

      Eliminar
  11. Cómo poner la foto sólo de la versión móvil más grande

    ResponderEliminar
    Respuestas
    1. Por lo poco que he visto de la versión móvil, la imagen ocupa todo el ancho, por lo que no creo que se pueda hacer más grande. De todas formas, si quieres saber cómo puedes manipular en algunos aspectos la cabecera, echa un vistazo a esto.

      Eliminar
  12. Buenas oloman, muchas gracias por el tutorial, quería saber si puedo modificar la vista previa de las entradas para la versión móvil.

    Saludos

    ResponderEliminar
    Respuestas
    1. En este caso el tutorial es de otro (ver el final del post) y yo no he practicado mucho con plantillas móviles. De todas formas pienso que lo puedes hacer en la manera en que se explica en el apartado "Personaliza la plantilla móvil de Blogger"

      Eliminar
  13. Necesito Ayuda! estaba viendo el post que hiciste de los comentarios, pero no logro ubicar el codigo, este es mi blog:
    http://imagenesderisas.blogspot.com/

    El problema es que no se que tengo que borrar, no tienes un tutorial donde analizas todo el codigo de blogger? me hace falta U.U


    Gracias

    ResponderEliminar
    Respuestas
    1. Pues por favor replica tu comentario en ese post "de los comentarios", porque calculo que debo tener como 10 entradas sobre ellos en sus diferentes formatos y no sé a cuál te refieres.

      Eliminar
  14. Hola
    La cosa es que yo tengo desactivada la plantilla para móviles y tu no. Esa plantilla apenas es modificable y por eso no puedes poner los gadgets que comentas. Bueno, sí los puedes poner, pero no se verán.
    En mi caso, lo que ves es una plantilla web, pero adaptada al tamaño de un móvil. Se trata de una plantilla adaptable a todas las resoluciones (RWD). Si lo ves desde un ordenador, prueba a hacer más pequeña la ventada poco a poco y verás como los elementos se van ajustando.

    ResponderEliminar
  15. No lo sé muy bien pues yo no uso la versión móvil, pero creo que es el propio Adsense el que te da un código especial para móviles que al insertarlo por ejemplo, en un gadget cualquiera, ya sabe que lo tiene que mostrar sólo en dispositivos pequeños.

    ResponderEliminar
  16. Y si no la tengo en la plantilla el código en el body, sólo es cuestión de ponerla, ¿no?

    ResponderEliminar
    Respuestas
    1. ¿Qué cosa Pepe? No entendí la pregunta...

      Eliminar
    2. Pues el codigo este:

      expr:class='"loading" + data:blog.mobileClass'

      Eliminar
  17. Hola Oloman, Sabrías como puedo quitar del pie de pagina del móvil "Ver versión web", lo que pretendo es que desde la versión móvil no se pueda pasar a la versión web.
    Gracias.

    ResponderEliminar
  18. ¿Puedes probar añadiendo esto a tu CSS y me cuentas el resultado?
    .mobile-desktop-link {display:none;}

    ResponderEliminar
  19. Saludos, Oloman.

    Quería saber si conoces como poder agregar botones para compartir en Facebook y twitter en la versión móvil de blogger. Ya que por defecto solo trae la de Google + y requiero colocar esas dos. ¿qué me dices? Saludos.

    ResponderEliminar
  20. Oloman vengo por aquí tambien:) Quiero poner algunos gadget o widget en la plantilla para móvily lo estoy intentando hacer tal como lo explicas pero no hay manera. Aparte me he fijado que el texto de mi widget es diferente.Estoy haciendo esto :. Pero mi widget es así: id='BlogArchive1' locked='false' title='...... Archivo del blog ......' type='BlogArchive'>. Tiene lo de locked='false' y no me sale. Que hago ???

    ResponderEliminar
    Respuestas
    1. Hola. El LOCKED no tiene nada que ver con eso, pues es simplemente para fijarlo en Diseño y que no se pueda mover de zona. En este caso lo que tienes que añadir es lo de mobile='yes'... o lo que corresponda.

      Eliminar
  21. Pues a mi me ha funcionado pero tuve que elegir la plantilla de móvil personalizada, si no no se veía el widget

    Gracias por todo Oloman

    ResponderEliminar
    Respuestas
    1. Lo he dicho ya anteriormente, pero este post no lo preparé yo y por eso no tengo esto casi nada experimentado. Si dices que te funcionó eligiendo la plantilla de móvil personalizada, esa debe ser la clave. Gracias.

      Eliminar
  22. hola.. me gustaria saber como hacer que un estilo css en particular no se muestre en mi plantilla movil, ya que no permite visualizar la informacion dado que se muestra con el pasar del cursor y obviamente en los telefonos no hay cursor...

    ResponderEliminar
    Respuestas
    1. Pues depende de cómo tengas estructurada tu plantilla, pero en un principio lo más fácil sería localizar en ella la parte que configura su aspecto para móviles (prácticamente todo está duplicado para ese fin, escritorio/móvil) y en esa parte meter unas etiquetas STYLE con las reglas CSS necesarias para anular lo que te interese.

      Eliminar
  23. Buenas amigo oloman, quiero que me diga como hago para que los videos que incrusto en blogger sean visibles en smarphone y tablet, ya que cuando abro la pagina no se dejan ver en dispositivos mobiles, Desde gracias por su colaboracion. el blog es:

    http://grupovea.blogspot.com/p/deportes.html
    http://grupovea.blogspot.com

    ResponderEliminar
    Respuestas
    1. Yo no veo vídeos en esas direcciones ni en la versión de escritorio ¿?

      Eliminar
  24. Hola buenas; quería saber como hacer que el menú desplegable y la cabecera que incluí en el diseño como gadget html, aparezca en la versión movil. Yo no tengo ni idea de esto, y lo hice todo buscando en blogs tan interesantes como el tuyo, pero para esto no encuentro la respuesta. Gracias

    recreateactividadesludicoeducativas.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Buenas. Para que un menú te funcione en la plantilla móvil de Blogger, este sólo puede estar hecho con el gadget Páginas. Por tanto, ese menú que tienes nunca te saldrá. Tienes que decidir si quieres un menú desplegable (sólo visible en web "normal") o uno simple que sería el de Páginas.

      La alternativa es hacer una plantilla adaptable e inhabilitar la plantilla móvil o bien -no siempre válido para todas las plantillas- seleccionar entre las opciones disponibles para la plantilla móvil la que reza "Personalizado".

      Eliminar
  25. Me has ayudado mucho, de veras.
    Ahora intentare personalizar la version movil.
    Tengo una pregunta... Mira, yo en la version web de mi blog quiero que mi perfil de Blogger este debajo de la cabecera y que en la version movil este debajo de las entradas. Es posible?
    Saludos :)

    ResponderEliminar
    Respuestas
    1. No que yo sepa Mapт. Si tuvieras un blog adaptable se podría hacer un truquillo duplicando el perfil en esos dos sitios y luego ocultando uno y mostrando el otro según el ancho de pantalla, pero como decía, usando la plantilla móvil nativa de Blogger no sabría hacer eso. De hecho intuyo que no se puede hacer.

      Eliminar
  26. Recuerden que en el BODY se deben colocar las correspondientes para que funciona mobile='no' y mobile='yes', osea:

    expr:class='"loading" + data:blog.mobileClass'

    ResponderEliminar
    Respuestas
    1. Disculpen, funciona=funcione :'v

      Eliminar
    2. No se si es así en todas las plantillas, pero a mi me funcionó de esa manera, cuando quería ocultar el gadget de 'Seguir por correo electrónico' en la plantilla móvil, quedo perfecto!

      Eliminar
    3. Así es Nicholas. Kseso lo explicaba en este su post, pero gracias por recordarlo.

      Eliminar
  27. Hola Oloman, en mi plantilla antigua de blogger, no quiero eliminar u ocultar como se explica en algunas webs el gadget attribution... querría moverlo a otra posición, donde tengo otros gadgets, en el footer.

    No encuentro la manera.

    ResponderEliminar
    Respuestas
    1. Pues la manera es editando la plantilla y quitándole el locked='yes' (o true, no me acuerdo exactamente).
      Y otra manera sería cortando entero el WIDGET e insertándolo dónde quieras como nueva ubicación.

      Eliminar
    2. Perfecto Oloman, solo cambié el valor de true por false y ya me desbloqueó el gadget.

      Gracias de nuevo.

      Eliminar
  28. Saludo!
    He intentado todo y no e podido hacer que la versión móvil se adapta a los móviles, se que el fallo son los estilos que no los tengo. no entiendo muy bien la explicación que tienen. ¿pueden ayudarme? lo necesito ya que voy a comprar el dominio y quiero tener eso listo. mi pagina www.negofinanzas.blogspot.com

    ResponderEliminar
    Respuestas
    1. Pienso que mi plantilla es un poco vieja ya que tengo unos años con ella aunque me mantengo actualizando la pagina no e cambiado la plantilla.

      Saludo Oloman.

      Eliminar
    2. A ver, para que tu sitio se vea adecuadamente en móviles tienes que activar la plantilla móvil desde el Escritorio de Blogger. Eso está en el apartado Plantilla, a la derecha del lugar desde dónde puedes editar la plantilla y allí puedes seleccionar entre unas pocas opciones estándar.

      Para que tengas un diseño personalizado ya tendrías que reconstruir tu plantilla pensando en que fuera adaptable a todos los anchos de pantalla.

      Eliminar
    3. Hola, ya la tengo activa y puesta en personalizar lo que pasa es que párese que faltan los códigos de adaptacion a la pantalla de table y móviles, creo que son unos códigos css, el caso es que me gustaría que se vea por lo menos como la tuya cuando entro desde el móvil, o bien que solo se vean las entradas y el logo.

      www.negofinanzas.blogspot.com

      Eliminar
    4. Seria todo un placer que me ayudaras con esto, ya que e buscado mucho y no e podido arreglarlo, lo necesito.

      Eliminar
    5. Creo que hay algún error de concepto...
      Ya tienes la plantilla para móviles de Blogger y si miras tu sitio desde uno verás que sale una versión "reducida" adaptada a este tipo de dispositivos. Para tabletas simplemente servirá con que tu sitio tenga menos de 1024 píxeles de ancho.

      Por otro lado, eso que dices de los códigos CSS es lo que te decía de que habría que reconstruir todo para crear un diseño adaptable (ver ejemplo). Con eso tendrías que desactivar la plantilla móvil de Blogger y entonces el diseño sería el de escritorio, pero que se va adaptando a otros anchos de pantalla.

      Eliminar
  29. Manolo Manolo, tu blog esta excelente, Felicitaciones por tan buen trabajo

    ResponderEliminar
  30. Disculpa una pregunta para eliminar las fechas de creacion de los posts en la version mobil que he de hacer?

    Muchas gracias

    ResponderEliminar
  31. O al menos para que en la version mobil no salgan es decir ocultar las fechas de la home de creacion de los posts

    ResponderEliminar
    Respuestas
    1. No lo sé en tu caso. Tu sitio no es Blogger...

      Eliminar
    2. Si si disculpa es www.alquilerdegoletas.net

      Eliminar
  32. Pero en la version movil salen las fechas de creacion del post, que he logrado ocultar en la version web, pero no se los cogigos para ocultarlo en dispositivos mobiles.

    ResponderEliminar
    Respuestas
    1. Yo creo que usando una plantilla estándar de Blogger (para móviles) no se puede tocar nada (o casi nada). Prueba con la "Personalizada" y quizás con esa si puedas poner un
      .mobile .main-inner .widget h2.date-header {display:none;}
      en tu CSS

      Eliminar
  33. Pero tu has podido eliminar de una plantilla estandard la frase Con la tecnología de Blogger

    No se puede hacer igual con las fechas?

    ResponderEliminar
  34. No funciona con este codigo.

    El problema es que a mi me gustaria utilizar una plantilla prederminada de blogger para la versión mobil.

    No hay otra forma de quitar las fechas.

    Con la frase "Con la tecnologia de Blogger" he podido.

    ResponderEliminar
    Respuestas
    1. Lo siento, pero como uso una plantilla adaptable, las de móviles de Blogger casi que nos la he tocado. Fíjate que este artículo ni siquiera es mío :(

      Eliminar
  35. Hola Oloman Oloman
    Muchas gracias por la información, mi problema es que estoy utilizando una plantilla ya preparada para dispositivos moviles sin necesidad de personalizar, o sea se adapta en los móviles sin tener que activarla desde blogger, necesito ocultar un anuncio de adsense en forma de menú que me desconfigura la pagina por completo en la version móvil, lo tengo puesto en un gadget, y llevo ya días buscando solucionarlo y nada.
    Te agradecería cualquier consejo y gracias por tu tiempo.
    Te dejo la dirección de mi blog por si le quieres echar un vistazo:
    http://www.quierosermanga.com/

    ResponderEliminar
  36. Saludos Oloman,

    Y si deseo que un video en un articulo solo aparezca en la versión movil?
    ¿Como podría hacerlo?

    ResponderEliminar
  37. Hmmmm... Si está en plantilla o en un gadget está claro como hacerlo, pero condicionar contenido de un post no sé cómo.

    ResponderEliminar
  38. genial todo eso me funciona la pregunta es en una plantilla el anuncio se ubica abajo y en otras ariba en la parte superior y como le doy la orden para que aparescan ariba o abajo, que le añado al codigo me gustaria anuncios de adsense en la parte superior y al final otro gracias

    ResponderEliminar
    Respuestas
    1. Hola Manuel. En principio es sólo cuestión de que añadas un gadget "Adsense" allí dónde queires que vaya el anuncio. Por lo que planteas tendrías que acceder al Escritorio > Diseño y luego añadir uno arriba y otro abajo. Así simplemente.

      Eliminar