martes, 24 de marzo de 2015
Como poner Adsense en vista móvil para blogger
Bien en esta entrada os voy a enseñar a poner un banner de adsense para la vista móvil en blogger justo debajo del título. Tenemos 2 opciones, una fácil con problemas que luego explicaré más adelante y otra un poco más complicada pero con óptimos resultados.
Antes de todo debemos habilitar la vista móvil en blogger/plantilla y donde pone móvil pulsamos abajo y la ventana que se nos abre la dejamos de la siguiente manera
Opción 1
Con esta opción debemos localizar el gadget o widget que queremos que sea visible para la vista móvil y añadiendo los atributos en HTML podremos elegir entre:
mobile='yes' para que sea visible tanto en vista de escritorio como en móvil
mobile='no' para que no sea visible en vista móvil
mobile='only' visible solo en vista móvil
Supongamos que queremos que el widget Adsense sea visible en vista móvil también, pues nos vamos a plantilla/editar HTML localizamos el widget y añadimos mobile='yes'
<b:widget id='Label1' mobile='yes' locked='false' title='Adsense' type='Label'/>
Recuerda que donde pone Label1 es el numero del widget y donde pone title es el nombre.
El problema de esto es que a la hora de poner mobile='only' para que sea visible solo desde la vista móvil, el widget desaparece del diseño y cuando queramos cambiar algo dará el error bX-7d26hw al guardar los cambios.
Opción 2
Para poner Adsense debajo de la descripción de nuestro blog para que quede de esta manera
Lo aremos con el siguiente condicional <b:if cond='data:blog.isMobile'> visible solo en vista móvil </b:if> de esta manera a la hora de cargar la página, le estamos diciendo a blogger que esa parte la queremos que sea visible solo en vista móvil. Entonces al lío.
Nos vamos a plantilla/editar HTML y pulsamos Ctrl+F para abrir el buscador y escribimos </header> justo debajo ponemos lo siguiente:
<!-- Adsense vista movil -->
<b:if cond='data:blog.isMobile'>
<div align='center'>
Tu código Adsense en texto plano aquí
</div>
</b:if>
<!-- Adsense vista movil -->
Para pasar adsense en texto plano
Una vez hecho esto, guardamos cambios y probamos la vista móvil, recuerdo que debes añadir /?m=1 de tal forma www.tublog.com/?m=1 para hacer visible la vista móvil desde el escritorio.
Explicación de lo que hemos hecho
</header> es el cierre de la cabecera donde va el título del blog
<!-- Adsense vista movil --> para localizar el widget facilmente ya que lo que escribamos dentro de <!-- --> no es visible
<b:if cond='data:blog.isMobile'> le estamos diciendo que sea visible solo en vista móvil
<div align='center'> que esté centrado en la pantalla
y los correspondientes cierres de cada atributo </div> </b:if>
jueves, 11 de marzo de 2010
Blogger estrena un Diseñador de Plantillas Propio
Para hacer la prueba de esta nueva funcion puedes hacerlo entrando por Blogger in Draft.
lunes, 24 de noviembre de 2008
Hospeda las imagenes de tu Blog en tu Blogger
El lugar más seguro para hospedar las imágenes de tu plantilla blogger
Uno de los principales problemas de las plantillas blogger es cuando las imágenes fallan y no se visualizan o son sustituidas por mensajes poco agradables. El problema se debe a que en muchos de los casos las imágenes de esas plantillas se encuentran hospedadas en servicios gratuitos (ej: imageshack, photobucket, googlepages, entre otros.) que limitan el número de veces que pueden mostrar (ancho de banda).
Por lo tanto lo ideal es cambiar el hospedaje a un lugar seguro. ¿Cual?, pues el mismo Blogger, el cual no pone un limite (o es muy alto) al ancho de banda de cada imagen.Para obtener las imágenes que usa tu plantilla puedes hacer lo siguiente:
- Entra a la pestaña “Diseño” y posteriormente a la opción de “Edición de HTML”.
- Busca todas las direcciones (URLs) de las imágenes, todas serán del tipo:
http://servicio.com/etc/nombre-imagen.jpgY terminaran en jpg, png, gif u otra extensión de imagen. Seguramente las encuentres entre códigos como …url(url-de-imagen-aquí)… , así que habrá que buscar con detenimiento. Puede pasar que al buscar las urls de las imágenes en el código de las plantillas estas ya estén en Blogger, para tal caso no hay necesidad de hacer ningún.
- Entra a cada URL y guarda la imagen en un carpeta con el nombre de tu plantilla.
Ahora, para subir imágenes a blogger y poder usarlas en tus plantillas puedes seguir estos sencillos pasos.
- Entra al editor de entradas (Creación de entradas > Crear).
- Da clic al icono para subir imágenes normalmente y sube todas las que componen tu plantilla.
- Al terminar de subirlas y regresar al editor, el código resultante es más o menos como sigue:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAJ5RcL5Fjsgkg6dBdGE-3nP8w0zFR7NNKNpD59Ys5Cyn3aTmYGHv0zN3ilnieOqqdL3SPKiKXbzpWtie381pXC3vU8P8VojQ4oUy8krb0l1xMWGL32YD3Wnl2C8qzuhIIqFMc1pAx2d3/s1600-h/footerpg5.jpg"><img style="cursor:pointer; cursor:hand;"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRAJ5RcL5Fjsgkg6dBdGE-3nP8w0zFR7NNKNpD59Ys5Cyn3aTmYGHv0zN3ilnieOqqdL3SPKiKXbzpWtie381pXC3vU8P8VojQ4oUy8krb0l1xMWGL32YD3Wnl2C8qzuhIIqFMc1pAx2d3/s400/footerpg5.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5243097480906068018" /></a>Como puede verse el código contiene dos URLs aparentemente de las imágenes, sin embargo ninguna de ellas puede usarse en las plantillas, así que:
- Copia la primer URL del código de cada imagen y ábrela en una pestaña o ventana del navegador.
- Al entrar veras la imagen correspondiente, da clic derecho y después “Copiar la ruta la imagen” (firefox).
- Esa URL ya puede usarse en las plantillas blogger, el siguiente paso será sustituir la antigua URL de la imagen en Diseño > Edición de HTML por la recién copiada en blogger.
- Repite los pasos 4, 5 y 6 para todas las imágenes que subiste correspondientes a las que usa tu plantilla.
Este puede ser un proceso un poco tedioso, pero hay que pensar en que solo se hace una vez y al hacerlo tendrás mayor seguridad de que las imágenes en tu plantilla no fallaran. Lo mismo aplica si eres creador de plantillas blogger, hacer este proceso puede ahorrarte dolores de cabeza futuros.

