Source: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger-para.html
Timestamp: 2017-02-21 16:29:42+00:00

Document:
8 nov. 2013 BuscarPersonaliza tu plantilla Blogger para móviles. Claves y fundamentos necesarios para lucir tu blog en estos dispositivos.Por: Miguel García Sánchez - ColomerEn: Diarios de la nube.0:08 En: propuestas El enorme incremento en el uso de dispositivos móviles o tabletas como medio para navegar por Internet es un factor fundamental a tener en cuenta a la hora de crear páginas web o blogs.
Si visualizaras la presentación móvil en un ordenador a pantalla completa, la letra sería excesivamente grande. Los ordenadores de sobremesa o portátiles suelen manejarse con un ratón y teclado. Los móviles y tabletas suelen ser táctiles y en algunos casos tener dispositivos miniaturizados que cumplen similares funciones a las de un teclado o ratón:
Por ejemplo, si yo en una hoja de estilos de una plantilla digo en el código: "la cabecera de la plantilla se va a dibujar en este "sitio fijo" y con este "tamaño fijo", en cuanto ese Blog que yo estoy visualizando en mi pantalla con la cabecera en el sitio que yo quiero, cuando se dibuje en una pantalla más pequeña o más grande con distinta resolución, va a aparecer "descuadrado". Un ejemplo con "diseño adaptativo"
<head> <b:if cond='data:blog.isMobile'>
</b:if> La etiqueta XHTML <b:if cond='data:blog.isMobile'> establece la condición de "si se está presentando el blog por una pantalla de móvil", entonces:
.mobile .body-fauxcolumn-outer { background: $(mobile.background.overlay);} Ahí podrás editar tamaños, estilos de letra y colores para tu presentación para móvil. Localiza siempre la palabra .mobile y altera la clase según tus necesidades.
Puedes establecer <b:if cond='data:blog.isMobile'> y <b:else/> dentro del CDATA de la plantilla para incluso utilizar los mismos nombres de clase pero con diferentes valores en sus atributos para móvil que para ordenador. Recuerda siempre antes de establecer el <b:if cond='data:blog.isMobile'> que la etiqueta CDATA debe estar correctamente cerrada y que después puedes volver a abrir otro CDATA cuando termine el <b:else/> y siempre cerrar luego todo el condicional con </b:if >. EN EL BODY DE LA PLANTILLA:
Escrito por Miguel García Sánchez - ColomerDispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.Entrada más recienteEntrada antiguaPágina principal108comentarios: Ricardo Sacchetto10 de noviembre de 2013, 8:27Muy buen contenidoResponderEliminarRespuestasMiguel García Sánchez - Colomer10 de noviembre de 2013, 19:22Muchas gracias Ricardo, una alegría que pueda servir. Aquí estoy a tu disposición, un saludo y muchas gracias.EliminarResponderJose Maria Acuña Morgado10 de noviembre de 2013, 20:00Hace dos meses publiqué un artículo dando las instrucciones básicas para cambiar el diseño de un blog instalando una nueva plantilla ( http://bit.ly/1bkA5sN ).Tengo que darte la enhorabuena porque el enfoque que das al artículo es muy completo y didáctico, tocando algunos conceptos fundamentales de programación.Un saludo, Chema.ResponderEliminarRespuestasMiguel García Sánchez - Colomer10 de noviembre de 2013, 20:40Gracias chema, te agradezco mucho tu aporte. La intención es esa, ser didáctico y explicar con sencillez cosas complejas. Todos los tutoriales de Diarios de la nube lo intentan... lástima que me falta tiempo para dedicarle...Un saludo y gracias de nuevo.Eliminarjose manuel16 de diciembre de 2013, 11:48I read your article. It was superb and very informative for me. Please keep continue to posting. ThanksJosemanuelhttp://www.globaltelco.es/EliminarResponderRetube Videos8 de diciembre de 2013, 21:05Buena Info ;)ResponderEliminarRespuestasMiguel García Sánchez - Colomer8 de diciembre de 2013, 22:51Gracias retube videos!!! a tu servicio. Un saludo!EliminarResponderJon García14 de diciembre de 2013, 0:07Enhorabuena por el artículo Miguel, creo que has hecho un gran trabajo que espero sirva de mucha ayuda, a mí al menos me has dado unas pistas. ResponderEliminarRespuestasMiguel García Sánchez - Colomer14 de diciembre de 2013, 11:21Muchísimas gracias Jon, es justo lo que intento con cada artículo que hago, así que me das mucha alegría. Te lo agradezco. Un saludo.EliminarResponderVeronica Corrales17 de diciembre de 2013, 20:08Hola Miguel, estoy intentando modificarlo pero me sale desbordado de ancho en la plantilla móvil la plantilla de mi blog y no se donde arreglarlo para que se vea mejor. Saludos y quedo a la espera de lo que me digas.ResponderEliminarRespuestasMiguel García Sánchez - Colomer17 de diciembre de 2013, 22:40Hola!, lo que te comenté por correo compañera. Debes establecer un viewport (la parte de arriba de la guía) para que tu página se dibuje acorde al tamaño de la pantalla del dispositivo donde se presente. Ve a punto 1) El Viewport y prueba.Un saludo!,EliminarResponderElia Brosed12 de enero de 2014, 23:18Muchas gracias MIguel por el artículo. ¿ Tienes uno para meter un menú de categorías en el blog? Muchas graciasResponderEliminarRespuestasMiguel García Sánchez - Colomer13 de enero de 2014, 21:43Tengo para menús: http://www.diariosdelanube.com/2013/04/crea-un-menu-con-subopciones-en-blogger.html y este otro http://www.diariosdelanube.com/2013/04/aprende-crear-un-menu-sencillo-con.html. Un saludo!!!EliminarResponderIván Dangerfield17 de enero de 2014, 22:45Muy buen tutorial y muy buen blog, gracias por tu ayuda, se agradece enormemente. por el aporte. gran blog, sí señor, así se hace.ResponderEliminarRespuestasMiguel García Sánchez - Colomer17 de enero de 2014, 22:49Mil gracias a ti Iván, son muchas horas de dedicación y a veces se hace agotador pero cuando alguien te escribe algo así, cuando ves que esto sirve y que puede ayudar, es cuando recojo con creces el fruto de ese esfuerzo. Muchas y muy sinceras gracias por tu apoyo, cualquier cosa aquí estoy.EliminarIván Dangerfield18 de enero de 2014, 0:21Hola Miguel, es exactamente lo que me pasa a mi, aveces, tengo una web con algunos truquillos Blogger, diseño y entretenimiento, que se basa, más que nada en el entretenimiento, cómo televisión online, que se denomina; www.aizumblog.com, en está pagina hay varios apartados, cómo radios, juegos, diarios, etcétera. Y perdona por el enlace, no pretendo hacer spam, sólo quiero que me visites, a ver que te parece mi sitio, luego borra el mensaje, si crees que estoy haciendo spam, Si quieres, y te parece bien, podemos intercambiar links, ya que está página me parece de lujo, por el esfuerzo y esmero que presentas en tus escritos, se merece que sea reconocida. Saludos desde Aizum Blog.EliminarMiguel García Sánchez - Colomer20 de enero de 2014, 11:49No te preocupes, no es spam para nada.Me ha gustado la verdad, el diseño es correcto y los contenidos muy divertidos cuando tienen que serlo.Un saludo,EliminarResponderManu González Martínez15 de febrero de 2014, 16:48Buenas Miguel!!Pese a modificar el diseño de la plantilla, en la versión móvil se ven algunos textos algo descuadrados, respecto a la versión de pc. A parte de que los videos en móvil no se cargan. ¿A que se puede deber eso?Un saludo y muy bueno el tutorialResponderEliminarRespuestasMiguel García Sánchez - Colomer17 de febrero de 2014, 10:22Se trata de las hojas de estilo y la resolución en un dispositivo en comparación al otro. Tengo pendiente hacer un artículo al respecto, pero básicamente, puedes sobreescribir la clase para que con la resolución menor de los móviles te quede centrado igual. Dame tiempo y preparo un tutorial al respecto. Es hacer "adaptavivo", lo que llaman "responsive-design" el contenido. Intentaré hacer muy sencillo, dame unos días y te aviso.Un saludo!,EliminarManu González Martínez18 de febrero de 2014, 19:58Muchas gracias. Probaré a ver que tal queda.Un saludoEliminarMiguel García Sánchez - Colomer18 de febrero de 2014, 23:17Hola Manu,esto es asequible pero te recomiendo las nuevas entradas sobre diseño adaptable porque van genial no sólo con móviles sino con cualquier dispositivo:- http://www.diariosdelanube.com/2014/02/que-es-responsive-design.html- http://www.diariosdelanube.com/2014/02/como-funciona-el-responsive-design.htmlEstos días iré haciendo varias entregas para que se entiendan bien los conceptos. Un saludo!EliminarResponderManu González Martínez19 de febrero de 2014, 18:38Buenas de nuevo Miguel. Le he echado un vistazo y he mirado de modificarlo, pero nada. La cosa es que solo se me ve descentrado las cosas que he tenido que colocar con la barra espaciadora. No se si eso afectará a que se vea mal en el móvil o que.SaludosResponderEliminarRespuestasMiguel García Sánchez - Colomer20 de febrero de 2014, 23:07Hola Manu, aún tengo pendiente la guía para poder hacer una metodología de transformación a responsive design de un Blog. En cuanto la tenga te aviso.Con respecto a lo de los espacios en blanco, eso no es buena idea porque son "valores fijos" y poco exactos a su vez. Lo mejor es aplicar los estilos correctos, si quieres mándame la URL e indícame con exactitud un párrafo que esté mal para poderte indicar. En tu caso lo más probable es que tengas que usar un @media con la resolución concreta del móvil donde se visualiza mal y reescribir el estilo de párrafo de aquellos textos que salen mal.Un saludo!,EliminarManu González Martínez22 de febrero de 2014, 23:43Buenas Miguel,te dejo el link: eddp88.blogspot.com.esEn cualquier entrada de las que hay, abajo del todo donde la discografía, a partir d ela canciín 13 está modificado con los espacios para poderlo ajustar el resto.Muchas graciasEliminarResponderMiguel García Sánchez - Colomer24 de febrero de 2014, 21:52Por lo que he visto, tu Blog no tiene un diseño responsive y no se ve "cuadrado" en un móvil. No te preocupes, a lo largo de la semana que viene (esta no puedo) haré un post al respecto sobre la metodología a seguir para hacerlo responsive. Mientras en Blogger puedes activar la plantilla para móviles y hará que quede todo más ajustado (En la zona de plantilla). Otra opción es bucarte una buena plantilla responsive de lo tuyo y ponerla para hacer pruebas y dejártelo ok.Cualquier duda si con esto no te he respondido pregunta. Es que es complicado porque cada móvil o tableta tiene una resolución, activa en Blogger lo de la plantilla para móviles y vigila el rendimiento.Un saludo!.ResponderEliminarRespuestasManu González Martínez25 de febrero de 2014, 17:04Perfecto Miguel, estaré al tanto de tus actualizaciones.Un saludo y muchas gracias por todo!!EliminarMiguel García Sánchez - Colomer25 de febrero de 2014, 17:40Genial Manuel... en cuanto tenga tiempo haré la guía para facilitar el tema. Un saludo y gracias a ti.EliminarResponderAngelica Velasquez7 de marzo de 2014, 3:40Buenas, he intentando con diferentes plantillas poner en el witget directamente la orden 'mobile='yes' y me sale siempre lo siguiente:Error al analizar XML, línea 1224, columna 31: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>"Por favor ayudaResponderEliminarRespuestasMiguel García Sánchez - Colomer10 de marzo de 2014, 21:10Es porque debes construir el código fijándote en que cierres las etiquetas "<" "/>" correctamente. Observa en el código que añades y fíjate que estás cerrando las etiquetas correctamente. Fíjate en el ejemplo b) del paso 3), y cómo se cierra toda la línea correctamente, cómo debe escribirse el código para daptarlo a tu Blog.Un saludo!EliminarResponderMario10 de abril de 2014, 20:48Me ha parecido muy interesante, muchas gracias por la ayuda y las aclaraciones respecto el tema de las plantillas, merciResponderEliminarRespuestasMiguel García Sánchez - Colomer11 de abril de 2014, 10:04Gracias Mario, a tu servicio. La verdad que con el tema de los móviles, el código de las plantillas es fácil una vez que te explican estos detalles. Me alegro que te sea útil. Gracias por participar.EliminarRespondersebas8 de septiembre de 2014, 18:59Saludos y Enhorabuena por el Blog!Mi problema es que la imágen de cabecera no me aparece en la versión móvil. Seleccioné plantilla predeterminada y sí aparece en la previsualización pero no en el móvil.Gracias de antemano y saludos!ResponderEliminarRespuestasMiguel García Sánchez - Colomer8 de septiembre de 2014, 19:13Hola Sebas, es que sucede que cuando utilizas la plantilla para móviles predeterminada de Blogger, se quita la mayor parte de información que presentas en la plantilla estándar. Puedes probar a seleccionar dentro de las plantillas para móviles la que pone "personalizada" y ahí podrás visualizar cómo queda tu plantilla normal para móviles.Cualquier duda me dices.Un saludo,EliminarFlosite12 de noviembre de 2014, 17:18Hola! Me pasa lo mismo, le he dado a personalizado pero no se ve la imagen de cabecera.Gracias!Saludos.EliminarMiguel García Sánchez - Colomer13 de noviembre de 2014, 23:24Hola Flosite,la plantilla para móviles de Blogger que sale de una plantilla estándar elimina de pantalla todo aquello que pueda hacer poco usable en un móvil la información. Esto lo hace así para que el usuario pueda manejarse con mayor facilidad (viendo bien las letras, pudiendo poner bien los dedos, etc...).Mi consejo es que si no te gusta mucho la plantilla para móviles por defecto, pruebes a buscar una plantilla general de Blogger que sea responsive: http://www.diariosdelanube.com/2014/02/que-es-responsive-design.htmlUn saludo!!!EliminarResponderPatricia Sánchez12 de octubre de 2014, 11:53Muchas gracias por el post. Me ha servido de gran ayuda.ResponderEliminarRespuestasMiguel García Sánchez - Colomer13 de octubre de 2014, 9:53Me alegro Patricia, cualquier cosa aquí estamos. Un saludo.EliminarResponderMarian Vazquez6 de noviembre de 2014, 18:54Fantastico... Explicado facil y con ejemplos...Al menos ya conseguí que se visualicen los post por el movil, ahora voy por las pestañas. Un abrazo enorrrrrme Miguel, me traía por la calle de la amargura...ResponderEliminarRespuestasMiguel García Sánchez - Colomer6 de noviembre de 2014, 21:09Encantado que pueda servirte. Es lo que intento, que a la gente le pueda servir cada explicación que aquí doy para que puedan mejorar su web. Una gozada cuando veo un feedback tan positivo. Te lo agradezo a ti. Cualquier cosa tienes Diarios de la nube a tu disposición.Un saludo!.EliminarResponderRafa Partida1 de diciembre de 2014, 14:36Me ha encantado, muy buen articulo ;-)ResponderEliminarRespuestasMiguel García Sánchez - Colomer2 de diciembre de 2014, 15:07Me alegro que te guste Rafa. Un saludo, siempre un placer leerte por aquí.EliminarResponderAlejandro Sevilla29 de diciembre de 2014, 16:12ei muchas gracias!He podido solucionar mi problema con la configuración!seguiré leyendo tus posts!un saludoResponderEliminarRespuestasMiguel García Sánchez - Colomer29 de diciembre de 2014, 16:28Me alegro Alejandro, gracias por tu feedback. Un saludo!EliminarResponderMonkey Motor9 de marzo de 2015, 22:04Hola Miguel! Tengo un problema con mi plantilla, no puedo cambiar la personalizacion para movil. Elimino todos los b:include que tienen la palabra mobil, pero luego vuelven a aparecer automaticamente. El problema es que la pagina es re lenta y si pongo las responsive de google no puedo agregar un banner que necesito que la pagina tenga. Espero puedas solucionarme el problema. Mi pagina es monkeymotor. Blogspot Muchisimas gracias amigo!ResponderEliminarRespuestasMiguel García Sánchez - Colomer10 de marzo de 2015, 15:58Lo mejor es que pongas una plantilla responsive de las que puedes adquirir a bajo coste para Blogger. El resultado es muy profesional y quedan bien. No todos los include donde ponga mobi son de móvil. Intenta seguir los pasos de la guía para que sin borrar nada (utilizando los if condicionales o los mobile=false) te salga lo que necesitas.Mi consejo es que cambies la plantilla.Un saludo!EliminarMonkey Motor10 de marzo de 2015, 16:34Ok Migue muchas gracias! Voy a hacer lo de la guía otra vez y si no funciona voy a ver de cambiar la plantilla. Muchas gracias!EliminarMiguel García Sánchez - Colomer10 de marzo de 2015, 16:39Es lo mejor, cualquier cosa aquí estoy. Un saludo!EliminarResponderMarco Montero12 de marzo de 2015, 10:52Por fin alguien que explica como cambiarlo en condiciones, gracias.http://curiosidadesasombrosasweb.blogspot.com.es/ResponderEliminarUshiku Draven23 de marzo de 2015, 14:35Buenas!Me ha servido de mucho tu tutorial para empezar a personalizar mi plantilla actual y adaptarla a móviles, pero sigo teniendo un problema: cuando añado un widget a la versión móvil con mobile='yes', efectivamente me aparece pero se descuadra y se alarga al final de la página, no sé si me explico... El texto del widget se muestra como una letra debajo de otra en vez de formar frases, por ejemplo.Además los fondos semitransparentes del widget (rgb) directamente pasan a transparente. ¿Puedo hacer algo al respecto? Gracias de antemano!www.ooakcraft.eswww.eng.ooakcraft.esResponderEliminarRespuestasUshiku Draven23 de marzo de 2015, 14:37Y se me había olvidado, cuando adapto la plantilla para móviles me hace una lista de las páginas que tengo en el blog pero al pinchar en ellas me dice que no existen... ¿qué estoy haciendo mal? :(EliminarMiguel García Sánchez - Colomer5 de abril de 2015, 20:41Hola!,no estás haciendo nada mal, es que tu plantilla tiene en sus css un estilo especial para el móvil para que aparezca el menú con ese aspecto que indicas. Pienso que dado que todos esos cambios requieren retocar código y es complicado, si quieres prueba a ponerte una plantilla responsive que seguro te servirá para móviles y ordenador y te vendrá bien. Esta guía te puede ayudar a conseguirlo: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger.htmlUn saludo!EliminarResponderAna Maria Almendro Oliva31 de marzo de 2015, 19:39Enhorabuena es el post mas completo que lei sobre el tema. Yo voy poco a poco adaptandola pero el problema mas gordo que tengo es que me sale un mega boton de pin it que no se como quitar y me gustaria añadir los botones que instale en la plantilla paea compatir los posts. Un saludo.ResponderEliminarRespuestasƸ̴Ӂ̴Ʒ Rebeca Ƹ̴Ӂ̴Ʒ DIY. Mi desván de artesana2 de octubre de 2015, 23:38Quizá me meto donde no me llaman... ¿Has probado a poner class="nopin"? Si el botón de pin-it es el que sale en las fotos de tus post con eso puede que funcione. Seguro que hablas de otra cosa, pero bueno...EliminarMiguel García Sánchez - Colomer8 de octubre de 2015, 9:35Claro que si, gracias por tu ayuda. Participa con tus sugerencias.Ana María, para Pinterest te recomiendo esta guía: http://www.diariosdelanube.com/2013/10/disfruta-de-pinterest-con-blogger.htmlTe vendrá genial para hacer lo que necesitas.Muchas gracias por participar.EliminarResponderAna Maria Almendro Oliva31 de marzo de 2015, 19:40Enhorabuena es el post mas completo que lei sobre el tema. Yo voy poco a poco adaptandola pero el problema mas gordo que tengo es que me sale un mega boton de pin it que no se como quitar y me gustaria añadir los botones que instale en la plantilla paea compatir los posts. Un saludo.ResponderEliminarRespuestasMiguel García Sánchez - Colomer1 de abril de 2015, 20:04Paciencia que al final sale. Lo del PIN IT, podrías meterlo en un gadget de la barra lateral cuya propiedad mobile=false o poner un if cond para que no se muestre en el móvil. También tienes soluciones con AddThis.Cualquier cosa aquí estoy.Un saludo!EliminarResponderJulio Rios cisneros21 de abril de 2015, 1:57Y no se puede poner articulos relacionado con mi blog en la version movil? la verdad ayudaria mucho si se pudieraResponderEliminarRespuestasMiguel García Sánchez - Colomer21 de abril de 2015, 22:32Claro, puedes poner por ejemplo el gadget de linkwithin (aquí tienes un artículo http://www.diariosdelanube.com/2013/10/anade-un-componente-de-entradas.html) y le pones encima el b:if cond='data:blog.isMobile' y lo tendrías.Un saludo.EliminarResponderNoemí González24 de abril de 2015, 10:27Muchas gracias me ha sido de gran ayuda. Un abrazo :)ResponderEliminarRespuestasMiguel García Sánchez - Colomer24 de abril de 2015, 20:12Gracias a ti Noemí, es todo un placer ayudar y más a ti que eres una "antigua" seguidora de Diarios de la nube. Muchas gracias y un abrazo.EliminarValeria Cáceres26 de abril de 2015, 16:22Hola, tengo una duda con la versión móvil, he buscado por todas partes y no encuentro solución. Al ver el blog desde el celular sale una imagen miniatura junto con la publicación, mi problema es que la imagen que aparece es la última que coloco y no la primera (que es la que quiero que aparezca como imagen principal) ¿hay algún modo de elegir qué imagen va a salir en ese cuadro miniatura? Saludos EliminarMiguel García Sánchez - Colomer26 de abril de 2015, 19:34Hola,si es en plantilla, la pequeña pantalla sirve para hacer una vista previa de la visualización para móviles. En los blogs, siempre se ordenan las entradas cronológicamente, es decir sale primero la última.Un saludo,EliminarResponderJavi3 de mayo de 2015, 22:16Muy interesante , lo llevaré a la práctica graciasResponderEliminarRespuestasMiguel García Sánchez - Colomer4 de mayo de 2015, 9:30Un placer ayudar, cualquier cosa aquí estoy. Un saludo.EliminarResponderMusica Nueva 20159 de junio de 2015, 7:23hola buen blog tneog un problema lo que pasa es que en mi web Triple W Punto Laeramusical Punto Net (la escribo asi para evitar spam u otra cosa) si puede visite alguno de mis post y vea que debajo del titulo aparecen la fecha las etiquetas y mas abajito aparece un anuncio de adsense, ese anuncio esta en el codigo de fuente de mi bloglo que quiero es hacer que ese anuncio en la version movil no aparesca, quiero que aparesca otro de otro tamaño pero no entendi muy bien el documental me podria hacer el favor de ayudarme graciasResponderEliminarMusica Nueva 20159 de junio de 2015, 7:58hola buen blog tneog un problema lo que pasa es que en mi web Triple W Punto Laeramusical Punto Net (la escribo asi para evitar spam u otra cosa) si puede visite alguno de mis post y vea que debajo del titulo aparecen la fecha las etiquetas y mas abajito aparece un anuncio de adsense, ese anuncio esta en el codigo de fuente de mi bloglo que quiero es hacer que ese anuncio en la version movil no aparesca, quiero que aparesca otro de otro tamaño pero no entendi muy bien el documental me podria hacer el favor de ayudarme graciasResponderEliminarMiguel García Sánchez - Colomer9 de junio de 2015, 9:53Hola,tienes diversas opciones: o utilizar un if condicional que haga que el anuncio no salga en móviles, o utilizar el formato de anuncio Responsive.A- Puedes poner justo antes del anuncio el if condicional (quito el > para que deje poner el comentario). Pon <b:if cond='data:blog.pageType !== "data:blog.isMobile" y añade el código del anuncio justo debajo.B- Puedes meter el anuncio en un gadget HTML/Javascript y hacer lo que aparece en esta guía de poner: <b:widget id='HTML1' mobile='yes' locked='false' title=' type=''/ Es decir, en el widget HTMLn que se te cree en el código de la plantilla al meter el anuncio en un gadget HTML/Javascript de Blogger, poner la propiedad mobile='yes' para que sólo aparezca en móviles.C- Utilizar el tipo de anuncio Responsive para que el anuncio se adapta a la resolución del móvil. Crea un anuncio nuevo de tipo responsive (adaptable) y ponlo en la zona donde te interesa para ver cómo queda. Un saludo y muchas gracias.ResponderEliminarRespuestasFrancisco Marqués10 de febrero de 2016, 13:30Hola Miguel;Me has salvado el pellejo, maestro!!!He usado la opción "B" para meter un banner en mi blog "macallisteros.blogspot.com" para el formato móvil y: HA FUNCIONADO!!!Ya me veía quitando el banner y lamentando no tener más publicidad en un medio que tiene muchas visitas.El pero lo verás enseguida y es que, me sigue saliendo la etiqueta del nombre "adpv07" encima del banner.De todas formas, muchísimas gracias por tus guías, Miguel.Recibe un cordial saludo.EliminarResponderAntonio José De León24 de junio de 2015, 14:22Hola amigo yo uso este metodo:http://www.ciudadblogger.com/2010/01/adsense-en-medio-de-las-entradas.htmlpero yo quiero que salga en el ordenador y tambien salga en el movil ¿como hago?.ResponderEliminarRespuestasMiguel García Sánchez - Colomer1 de julio de 2015, 15:58Hola Antonio,para móviles mi recomendación es utilizar los anuncios "Adaptables" (Responsive) de AdSense. Si el anuncio sale en el móvil, tu plantilla debería ser responsive porque si no ocupará toda la pantalla o gran parte de la misma.El método explicado por los compañeros de CiudadBlogger está pensado para ordenador o móvil, lo que sucede es que si tienes la plantilla para móviles estándar de Blogger activada, no se mostrará el anuncio como deseas.¿Es ese tu problema?.Un saludo.EliminarResponderMonkey Motor11 de julio de 2015, 4:34Hola Miguel! Tengo un problema bastante extraño, yo uso una plantilla para móviles diseñada por mí, el problema es que adsense me cuenta mal las visitas y como la mayoría proviene de celulares, quiero volver a usar alguna de las predeterminadas por blogger. Hasta ahí todo parece marchar bien, el problema es que al poner cualquiera de las plantillas para móviles de blogger, no me sale adsense. Es rarísimo, no se si capaz tengo algo mal en mi html o que. Ahora tengo puesta la plantilla diseñada por mí porque sino me pierdo adsense. Espero puedas guiarme hacia la solución. Muchas gracias!ResponderEliminarRespuestasMiguel García Sánchez - Colomer13 de julio de 2015, 9:44Hola!,es que las plantillas de Blogger para móviles no tienen AdSense. Creo que las de vistas dinámicas eran las únicas que lo permitían. Pero aún así, por si no lo hicieran, mi recomendación es que te instales alguna plantilla responsive para Blogger. Hay miles de sitios web y su coste es muy bajo (30$ como mucho), simplemente pon "plantillas blogger responsive" y dale a buscar en Google, verás que hay cientos de sitios y esas plantillas si te permitirán utilizar anuncios AdSense.Un saludo!EliminarMonkey Motor13 de julio de 2015, 21:38Muchas gracias Migue!EliminarMiguel García Sánchez - Colomer14 de julio de 2015, 10:29A ti, cualquier cosa estoy aquí para las dudas. Un saludo!EliminarResponderƸ̴Ӂ̴Ʒ Rebeca Ƹ̴Ӂ̴Ʒ21 de agosto de 2015, 17:11Un post muy completo y bien explicado, con nada de un lenguaje técnico incomprensible para la gente de a pie. Así da gusto. Gracias de veras.Te expongo mi problema, ¿de acuerdo? Cuento con plantilla personalizada para visualizar en móviles, pero no sé por qué, algunos de los elementos salen por duplicado. P. Ej.: desde el menú de configuración de entradas, inserté en su dia una imagen con enlace para suscripción y en el móvil se duplica siempre. Y otro elemento que se suele duplicar son los comentarios: siempre que comento o alguien me comenta vía móvil, sucede igual, a qué se puede deber. ¿Cómo puedo solucionarlo? Gracias.ResponderEliminarRespuestasMiguel García Sánchez - Colomer21 de agosto de 2015, 20:38Hola Rebeca!, gracias a ti, para mí es un placer ayudar.A mí me ha sucedido que a veces los comentarios se duplican, pero es algo "incontrolable" porque depende de si el usuario le da dos veces a publicar seguidas o de factores que son imposibles controlar.Lo de los gadgets duplicados, muchas veces sucede porque la vista de diseño en Blogger da problemas. A mí me pasa especialmente al recuperar copias de seguridad de la plantilla. Limpia la caché del navegador por completo antes de añadir nuevos gadgets para asegurarte que no hay problemas con los archivos que hacen que Blogger determine la colocación de un componente nuevo que añadas. También, cuando pongas gadgets nuevos, si alguno se duplica, compruebes si se te ha puesto dos veces en la vista de diseño y elimina en ella la que sea sobrante. También a veces sucede que en la vista móvil tenemos "filtros" que provienen de las hojas de estilo que dicen "muestra esto si es móvil o no lo muestres si es móvil" y a veces si lo ponemos erróneamente puede duplicar algún componente de la web (es donde se pone en ocasiones display:none al estilo de un componente que se quiere dibujar).Por último, también ocurre que la plantilla se queda corrupta, lo cual tiene solución pero hay que hacerlo con delicadeza. Y yo sólo lo haría como último recurso. Así pues, prueba las otras dos cosas que te he comentado y si te continúa sucediendo, vuélveme a escribir para que te explique la manera de arreglar una plantilla que pueda haberse quedado corrupta.Cualquier cosa aquí me tienes.Gracias por participar.EliminarResponderquierosermanga.com3 de septiembre de 2015, 4:10Hola Miguel!Muchas gracias por la información, mi problema es que estoy utilizando una plantilla ya preparada para dispositivos móviles sin necesidad de personalizar desde blogger, de echo en blogger tengo que escoger la opción (No, mostrar la plantilla para ordenador en los dispositivos móviles) para que se vea bien, el problema es que me he vuelto loco intentando ocultar un anuncio de adsense en forma de menú que me desconfigura la pagina por completo en la versión móvil, y estoy obligado a mantenerlo en versión PC porque es el anuncio que mas ingresos me genera, lo tengo puesto en un gadget, y llevo ya días buscando solucionarlo y nada.Solo quiero que ese anuncio se deje de ver en versión Movil. Te agradecería cualquier consejo o recomendación y muchas gracias por tu tiempo.Te dejo la dirección de mi blog por si le quieres echar un vistazo:http://www.quierosermanga.com/ResponderEliminarRespuestasMiguel García Sánchez - Colomer4 de septiembre de 2015, 13:46Fíjate donde pone:b) Puedes ir "widget" a "widget" y poner: - Donde mobile='yes' significaría que quieres que el "widget salga por el móvil".- O mobile='no' para indicar que "ese widget NO salga por el móvil".- También puedes poner mobile='only' para que "sólo se dibuje el widget en móviles". Puedes igualmente combinar las opciones a y b siempre que no entren en contradicción.Eso debes hacer.Un saludo.EliminarResponderquierosermanga.com5 de septiembre de 2015, 3:52Hola Miguel García Sánchez - ColomerYa lo he echo en todos los widget (mobile='no' ), y no desaparece ninguno en la versio movil, no se que puede ser la verdad, ya llevo tiempo probando de todo y nada, seguramente es el diseño de la plantilla que no lo permite, o no se que puede ser, pero vamos de momento tengo desctivado el Menu adsense hasta que encuetre una solucion. Gracias. ResponderEliminarRespuestasMiguel García Sánchez - Colomer6 de septiembre de 2015, 13:36No, tienes otra opción, utiliza los condicionales: donde pongo de ejemplo <b:if cond='data:blog.isMobile' y <b:else/ Lo que pongas debajo de "isMobile" saldrá en móvil y lo que pongas en "else" no saldrá en el móvil. Prueba también con esta entrada: http://www.diariosdelanube.com/2014/09/como-utilizar-condiciones-en-blogger.htmlUn saludó y ánimo que al final sale. Haz pruebas si no en un Blog de pruebas antes.EliminarResponderMi vida acuatica5 de septiembre de 2015, 17:59Enhorabuena por el blog, es muy instructivo.Estoy probando una plantilla externa que en teoría es responsive, pero me surgen dudas. 1.- Voy al icono de la rueda dentada y aunque elija "No, mostrar la plantilla para ordenador en los dispositivos móviles" luego al hacer el test oficial de friendly mobile de google dice que la plantilla esta optimizada para móviles, ¿cómo es posible esto, no se supone que si elijo esta opción no le estoy dando versión para móvil y debería salir que no está optimizada?2.- En esos casos en que la plantilla ya es responsive ¿Que opción hay que elegir para que la versión mobile sea la que ya trae la plantilla en su código y no coja una de blogger?.Saludos y graciasResponderEliminarRespuestasMiguel García Sánchez - Colomer6 de septiembre de 2015, 13:39Hola,no te preocupes que lo tienes todo bien. Cuando la plantilla es responsive, NO hay que activar la plantilla para móviles de Blogger, déjala sin activar directamente. Puedes comprobar que es Responsive porque si vas por ejemplo reduciendo el navegador hasta el tamaño de un móvil, tu web se debería ir adaptando. Prueba esta entrada que te vendrá muy bien para ver tu web en móvil rápidamente: http://www.diariosdelanube.com/2014/07/como-se-ve-el-blog-en-moviles.htmlCualquier cosa aquí estoy.Un saludo y gracias por participar.EliminarResponderMi vida acuatica7 de septiembre de 2015, 1:13Me ocurre lo que a muchos, intento ir a un widget para que no salga en versión movil pero no me funciona solo con añadir mobile='no'.Lo que hago es si tengo esto<b:widget id='HTML12' locked='false' title='' type='HTML'Lo convierto en esto <b:widget id='HTML12' mobile='no' locked='false' title='' type='HTML'Y no funciona, sigue saliendo el widget que no quiero en versión móvil. Así que supongo solo me queda optar por el condicional if, pero en el ejemplo que pones está pensado para poner algo en la versión móvil<b:if cond='data:blog.isMobile'Lo que quiero para movil<b:else/Lo que quiero para ordenador</b:if y lo que busco es justo lo contrario, es decir lo que no entiendo es la manera de poner un condicional para negar que salga un widget en versión móvil y solo salga en versión pc a pesar de haber leido ya tu post sobre como usar condicionales en BloggerResponderEliminarRespuestasMiguel García Sánchez - Colomer7 de septiembre de 2015, 9:45Prueba con esto: <b:if cond='data:mobile == "false"' (cerrando el b if y las etiquetas :bif y de más, es que en los comentarios no se permite código.Un saludo!EliminarResponderMi vida acuatica8 de septiembre de 2015, 21:24Probé una plantilla que se venden en internet de una empresa especializada y está bastante bien posicionada en google, de hecho es de las que siempre sale en cualquier recopilatorio de plantillas modernas para blogger. Le haces el test mobile y supuestamente es responsive tal cual dice, pero en mi móvil no se ve bien, hago la misma comprobación con el enlace que pusiste http://mobiletest.me/ y efectivamente tiene el mismo problema en algunos teléfonos. Me pongo en contacto con ellos y la respuesta es que como el test de google lo da por bueno ellos dicen que es responsive y que no pueden hacerse cargo de que funcione en 1300 tipos de móviles diferentes.Mi pregunta es ¿esto es así y es lo habitual?ResponderEliminarRespuestasMiguel García Sánchez - Colomer10 de septiembre de 2015, 9:31Hombre, deberían de darte un soporte mejor, la verdad. La mía se ve bien en prácticamente todos los móviles pero dependiendo de algunas resoluciones puede darte problemas en algunos márgenes o detalles pequeños. Los problemas suelen venir producidos de pequeños ajustes que hay que hacer en las hojas de estilo, prueba con esto: http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.htmlCualquier cosa aquí estoy.Un saludo!EliminarResponderMi vida acuatica8 de septiembre de 2015, 21:55En visto de que no puedo contar con su creador, me propongo como reto intentar resolverlo yo. Para ello planeo que no salga en la versión mobile la parte de la plantilla que queda demasiado ancha para una pantalla pequeña, que es el principal error que le veo. Pero no se trata de un widget sino de un trozo de código, por lo que cuando pongo <b:if cond='data:mobile == "false"Aqui la parte que no va bien en móvil</b:ifel resultado es que da un error al mostrar la web que diceTEMPLATE ERROR: Invalid data reference mobile: No dictionary named: '' in: ['blog', 'skin', 'view']Muchas gracias por tu respuesta y por tu paciencia.SaludosResponderEliminarRespuestasMiguel García Sánchez - Colomer10 de septiembre de 2015, 9:41Muchas veces sucede eso porque la plantilla completa depende de parte de la plantilla para conformarse. Prueba a buscar dónde tienes que cerrar el </b:if porque puede que lo estés cerrando en algún punto crítico para que se dibuje el resto de la plantilla. El problema de porqué se dibuja incorrectamente en algunas resoluciones tu plantilla será porque no tiene mediaqueries para esas resoluciones.Las Mediaqueries sirven para decirle al navegador "cuando tu resolución sea tal, adapta las hojas de estilo para que dibujen los objetos a tal tamaño". Por ejemplo, en Diarios de la nube yo uso esta Media query para los móviles que tienen como resolución 1080p:@media only screen and (max-width:1080px) {#header-wrapper, #outer-wrapper, #footer-widgets, .container, #featuresticker, #featuredhome-wrap {width: 960px;}.span-24 {width: 709px;}#featurehomer .label_with_thumbs li, #featurehomer img.label_thumb, #featurehomer .label_with_thumbs a {width: 200px;}#main-wrapper {width: 625px;}post h2 {width: 340px;}#main-wrapper {width: 620px;}#rsidebar-wrapper {width: 300px;}.post h2 {width: 340px;}}Si te fijas, lo que hace es alterar el tamaño de varias clases de las hojas de estilo para que los componentes se adapten al tamaño de la resolución sobre la que se van a dibujar.Cualquier duda aquí estoy.Un saludo.EliminarCloo!3 de octubre de 2015, 20:12Hola! me ha servido mucho este articulo, pude colocar los widget pero estos me salen al final del blog, y yo los quiero a un lado :( y el fondo de blog por alguna no se ve bien en el celular no se si puedo establecer otro color de fondo para la vista del celular? ayuda y gracias!EliminarResponderCloo!3 de octubre de 2015, 20:14Hola! me ha servido mucho este articulo, pude colocar los widget pero estos me salen al final del blog, y yo los quiero a un lado :( y el fondo de blog por alguna no se ve bien en el celular no se si puedo establecer otro color de fondo para la vista del celular? ayuda y gracias! ResponderEliminarRespuestasMiguel García Sánchez - Colomer3 de octubre de 2015, 21:20¡Hola!, se hace utilizando las hojas de estilo en combinación con los condicionales de Blogger.En Diarios de la nube tienes varias guías para aprender a utilizar las hojas de estilo y lis condicionales, a la derecha tienes el buscador para localizar los temas que necesitas.Básicamente debes bucar la joja de estilo que se encarga del "background-color" de tu plantilla y poner un "if cond" (condicional de Blogger) para activarlo sólo si se cumple la condición de que se esté visualizando la web por un móvil.Tienes varias guías para hacerlo en esta web y mi ayuda en todos los comentarios.Un saludo!EliminarResponderRamon Blanca10 de diciembre de 2015, 18:47Hola Miguel,quiero crear un blog y recomendar productos de afiliado de Amazon, y cuando pego el codigo HTML si visualiza correctamente des de la tablet o móbil, pero en canvio no se visualiza la imagen del enlace cuando lo visualizo des del escritorio.Tengo un post de prueba en http://booksandvinils.blogspot.com.es/¿Sabes por que motivo no se visualiza en el escritorio?Gracias.ResponderEliminarRamon Blanca10 de diciembre de 2015, 19:32Ya he encontrado el problema, estaba con el complemento de Adblock que no me dejaba visualizar el anuncio.Gracias.ResponderEliminarRespuestasMiguel García Sánchez - Colomer11 de diciembre de 2015, 8:55Hola Ramón, me alegro de que descubrieras el problema. Un saludo y muchas gracias a ti por participar y aportar.EliminarResponderChelenko17 de febrero de 2016, 15:26Hola! Tengo una consulta, quiero inhabilitar la versión móvil de mi blogger desde el código html. Cómo lo hago?Desde la opción del menú de plantilla a pesar de tenerla inhabilitada, no funciona al ver el sitio desde tablet o celular.Te agradecería pudieras ayudarme, saludos cordiales!Te comparto nuestro sitio que es un diario digital www.elchelenko.clResponderEliminarRespuestasMiguel García Sánchez - Colomer21 de febrero de 2016, 20:12La activación o desactivación de la plantilla para móviles sólo se puede hacer desde la zona de configuración de la plantilla, donde sale una "preview" del móvil a la derecha de la plantilla con una ruedecita dentada debajo. Ahí desactiva el uso de la plantilla para moviles. Cuando alguien se pone una plantilla externa de tipo responsive o simplemente no quiere utilizar la plantilla para móviles, es ahí donde tiene que desactivarla.Un saludo y muchas gracias por participar.EliminarResponderAnónimo2 de mayo de 2016, 5:33holaResponderEliminarClaudio Casco30 de junio de 2016, 20:32Hola Miguel, una consulta. En mi blo www.agendadepagos.blogspot.com tengo colocado un menu horizontal que esta hecho de un código html puesto como widget en el cross-col y luego con CSS darle un buen aspecto. QUiero en la versión movil de mi pagina modificarla para que el menú salga -como he visto en otros- un botón y al hacer click sobre éste se desplieguen los elementos del menú de forma vertical para que puedan ser vistos cómodamente. Trato de interpretar tu lección sobre el tema en el apartado a) y que dice: «a) Puedes dividir código poniendo y justo debajo los widgets que quieres que se dibujen para móvil y después un con los que quieres para ordenador, o simplemente cerrar con el , de manera que lo de dentro del es lo que quieres que se muestre para móvil.» No lo puedo interpretar Miguel. En mi plantilla el widget de HTML esta identificado con el título 123 Espero, como otras veces, tu sugerencia. Saludos y graciasResponderEliminarRespuestasMiguel García Sánchez - Colomer9 de julio de 2016, 19:43Yo te recomiendo que pruebes este tipo de menú: http://www.diariosdelanube.com/2016/03/como-crear-un-menu-pantalla-completa.htmlCualquier cosa pregunta lo que necesites. Un saludo!EliminarResponderMargarita Martínez26 de octubre de 2016, 23:02Muy útil esta información que comparten, espero poder aplicarlo.ResponderEliminarRespuestasMiguel García Sánchez - Colomer12 de noviembre de 2016, 20:10Me alegro que te sirva. Haz pruebas en un blog de pruebas y luego lo trasladas al tuyo. Cualquier duda aquí estoy.EliminarResponderRafael Leyva29 de octubre de 2016, 19:14¡Hola!, Quiero cambiar el tipo de letra para la platilla movil, entendí el paso en el que encuentro como cambiarlos, pero... tendrás o sabrás que linea de codigo debo escribir para poder hacerlo...¡Muy buen post, saludos!ResponderEliminarMiguel García Sánchez - Colomer12 de noviembre de 2016, 20:05Hola, es tocar la hoja de estilos de tu web. Escríbeme la dirección y te digo dónde.Un saludo!ResponderEliminarpromoción Yoigo3 de enero de 2017, 10:33Gracias me ha ido muy bien para una webResponderEliminarRespuestasMiguel García Sánchez - Colomer4 de enero de 2017, 18:47Me alegro. Feliz año. Cualquier cosa aquí estamos.EliminarResponderZJ24 de enero de 2017, 9:55hola, una pregunta he puesto un vídeo en mi blog (el vídeo esta subido desde mi computadora, no es de youtube), la cosa que al ver el blog en la computadora va bien se reproduce bien el vídeo, pero al ver el blog en mi celular android no se puede reproducir el vídeo y sale un mensaje de "no se puede cargar la pagina". ¡como puedo hacer para reproducirlo en mi celular? Espero me puedas ayudar saludos.ResponderEliminarRespuestasMiguel García Sánchez - Colomer29 de enero de 2017, 15:21Es mejor publicarlo en Youtube y luego compartir con el enlace "incrustado". Se puede dar la situación de que el móvil no tenga el "codec" necesario para descodificar el vídeo que subiste y por ello, en el ordenador que si lo tiene, funciona correctamente.Publica en tu canal de Youtube y lo introduces dentro de tu web, el resultado es bueno y se verá en móviles también.Un saludo, EliminarGabriella Yu15 de febrero de 2017, 0:54Disculpa, ¿habrá otra forma que no sea usar Youtube? porque yo subo mis videos por el mismo Blogger pero lamentablemente no se pueden ver en la versión móvil...EliminarResponderAñadir comentarioCargar más...

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución