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;
}
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;
}
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 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.
Y muchos más artículos interesantes si nos sigues en...
Interesante documento... otra para tareas casi pendientes ;)
ResponderEliminarGracias Oloman, un saludo.
Voy a intentarlo siempre quise modificar el aspecto de la versión móvil, haber como sale
ResponderEliminares tu gatito?
EliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarTe has puesto fuerte desde la última vez que te vi XD
EliminarBueno, 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.
Este comentario ha sido eliminado por el autor.
EliminarEstán chulas, pero a mí lo que me gusta es modificar cosas, así que yo al revés que tú ;)
EliminarAhí va!!! ¡Qué despiste el mío!
ResponderEliminarSe 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
Gracias a tí por pasármelo ;)
Eliminarhola Oloman!! en primer lugar millones de gracias porque gracias a ti aprendi cosas que nunca hubiese imaginado :)
ResponderEliminarHe 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!!
¿Qué hace exactamente ese gadget?
EliminarHola Oloman Oloman. Genial el Oloblogger y gracias por este post! Es lo que andaba buscando.
ResponderEliminarPero 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
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¡Hum, es justo eso Oloman!
EliminarTengo 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.
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?
ResponderEliminarPor ejemplo, se puede poner fotos de los enlaces de páginas en el widget de "LinkList"?
Sinceramente no lo sé, aunque sospecho que no porque esas plantillas dejan modificar muy pocas cosas.
EliminarGran 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í)
ResponderEliminarLa 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!
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.
EliminarY se me olvidó agradecerte tu idea que seguro funciona según nos cuentas :)
EliminarPerdó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
EliminarBingo! 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.
ResponderEliminarGran Blog!
Como se puede cambiar el tamaño y tipo de letra de la frase Con la tecnología de Blogger
ResponderEliminarMira 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.
EliminarCómo poner la foto sólo de la versión móvil más grande
ResponderEliminarPor 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.
EliminarBuenas oloman, muchas gracias por el tutorial, quería saber si puedo modificar la vista previa de las entradas para la versión móvil.
ResponderEliminarSaludos
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"
EliminarNecesito Ayuda! estaba viendo el post que hiciste de los comentarios, pero no logro ubicar el codigo, este es mi blog:
ResponderEliminarhttp://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
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.
EliminarHola
ResponderEliminarLa 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.
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.
ResponderEliminarY si no la tengo en la plantilla el código en el body, sólo es cuestión de ponerla, ¿no?
ResponderEliminar¿Qué cosa Pepe? No entendí la pregunta...
EliminarPues el codigo este:
Eliminarexpr:class='"loading" + data:blog.mobileClass'
Ah, sí, claro ;)
EliminarHola 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.
ResponderEliminarGracias.
¿Puedes probar añadiendo esto a tu CSS y me cuentas el resultado?
ResponderEliminar.mobile-desktop-link {display:none;}
Saludos, Oloman.
ResponderEliminarQuerí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.
No Kelvis, eso no lo sé. Lo siento.
EliminarOloman 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 ???
ResponderEliminarHola. 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.
EliminarPues a mi me ha funcionado pero tuve que elegir la plantilla de móvil personalizada, si no no se veía el widget
ResponderEliminarGracias por todo Oloman
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.
Eliminarhola.. 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...
ResponderEliminarPues 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.
EliminarBuenas 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:
ResponderEliminarhttp://grupovea.blogspot.com/p/deportes.html
http://grupovea.blogspot.com
Yo no veo vídeos en esas direcciones ni en la versión de escritorio ¿?
EliminarHola 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
ResponderEliminarrecreateactividadesludicoeducativas.blogspot.com.es
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.
EliminarLa 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".
Me has ayudado mucho, de veras.
ResponderEliminarAhora 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 :)
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.
EliminarRecuerden que en el BODY se deben colocar las correspondientes para que funciona mobile='no' y mobile='yes', osea:
ResponderEliminarexpr:class='"loading" + data:blog.mobileClass'
Disculpen, funciona=funcione :'v
EliminarNo 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!
EliminarAsí es Nicholas. Kseso lo explicaba en este su post, pero gracias por recordarlo.
EliminarHola 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.
ResponderEliminarNo encuentro la manera.
Pues la manera es editando la plantilla y quitándole el locked='yes' (o true, no me acuerdo exactamente).
EliminarY otra manera sería cortando entero el WIDGET e insertándolo dónde quieras como nueva ubicación.
Perfecto Oloman, solo cambié el valor de true por false y ya me desbloqueó el gadget.
EliminarGracias de nuevo.
Saludo!
ResponderEliminarHe 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
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.
EliminarSaludo Oloman.
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.
EliminarPara que tengas un diseño personalizado ya tendrías que reconstruir tu plantilla pensando en que fuera adaptable a todos los anchos de pantalla.
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.
Eliminarwww.negofinanzas.blogspot.com
Seria todo un placer que me ayudaras con esto, ya que e buscado mucho y no e podido arreglarlo, lo necesito.
EliminarCreo que hay algún error de concepto...
EliminarYa 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.
Manolo Manolo, tu blog esta excelente, Felicitaciones por tan buen trabajo
ResponderEliminarDisculpa una pregunta para eliminar las fechas de creacion de los posts en la version mobil que he de hacer?
ResponderEliminarMuchas gracias
O al menos para que en la version mobil no salgan es decir ocultar las fechas de la home de creacion de los posts
ResponderEliminarNo lo sé en tu caso. Tu sitio no es Blogger...
EliminarSi si disculpa es www.alquilerdegoletas.net
EliminarPero 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.
ResponderEliminarYo 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
Eliminar.mobile .main-inner .widget h2.date-header {display:none;}
en tu CSS
Pero tu has podido eliminar de una plantilla estandard la frase Con la tecnología de Blogger
ResponderEliminarNo se puede hacer igual con las fechas?
No funciona con este codigo.
ResponderEliminarEl 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.
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 :(
EliminarHola Oloman Oloman
ResponderEliminarMuchas 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/
Pues para eso, nada mejor que esto, Hicham.
EliminarSaludos Oloman,
ResponderEliminarY si deseo que un video en un articulo solo aparezca en la versión movil?
¿Como podría hacerlo?
Hmmmm... Si está en plantilla o en un gadget está claro como hacerlo, pero condicionar contenido de un post no sé cómo.
ResponderEliminargenial 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
ResponderEliminarHola 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