Modificar las plantillas móviles de Blogger

Desde que Blogger habilito la versión móvil de nuestras paginas, solo podíamos seleccionar algunas plantillas predeterminadas y nada mas. Ahora desde el blog de desarrolladores de Blogger nos indican que es posible modificar y seleccionar algunas cosas en esa versión móvil que se muestra automáticamente al acceder desde un dispositivo móvil a nuestras paginas.



La primera opción es poder seleccionar que widget queremos que se vean en la versión móvil y cuales no queremos que se vean, para ello solo deberemos acceder a la edición de nuestra plantilla y añadir las siguientes etiquetas:

Esto es lo que tenemos habitualmente



<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>



Si queremos que se vea ese widget en concreto le añadimos



<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>



Si no queremos que se vea le añadiremos



<b:widget id='BlogArchive1' title='Blog Archive' mobile='no' type='BlogArchive'>



Si queremos que se vea solo en la versión móvil, pondremos



<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>

También es posible añadir el condicional <b:if cond="data:mobile"> en los códigos de los widget por si queremos mostrar una cosa u otra dependiendo de que la versión sea vista móvil o no.

Os dejo el ejemplo



<div class="widget-content">

<b:if cond="data:mobile">

<!-- Show a text link in mobile view.-->

<a href="http://www.blogger.com">

Powered By Blogger

</a>

<b:else/>

<!-- Show an image link in desktop view.-->

<a href="http://www.blogger.com">

<img expr:src="data:fullButton" alt="Powered By Blogger"/>

</a>

</b:if>

</div>

También es posible modificar las plantillas mediante CSS pero es algo más complejo y lo explicaremos mas adelante

Como poner Adsense en vista móvil para blogger

Vito en: 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>

Ver o Incrustar otra web en tu blog

Fuente Blog de Lujo

Hacer que se vea en una entrada, columna, footer... otra web es bien sencillo con una simple orden. Basta usar "iframe" para darle una anchura y altura que nos guste.

Alguien se preguntará, ¿para qué sirve?. Sólo puedo responder:

1. Sobre todo enseña una web sin que salgan de la tuya o tu blog. Puede ser una fórmula para que tus visitas se queden algo más de tiempo al mostrarle esa facilidad.
2. Para reducir el número de pestañas abiertas en los navegadores.
3. Mostrar una entrada antigua sin necesidad de colocar un enlace para abrir o cerrar una página.
4. Un truco para experimentar.

■ En este blog lo he usado varias veces con los siguientes ejemplos:




<iframe src="http://www.ismyblogworking.com" width="520px" height="210px"></iframe>


<iframe src="http://blogdeladymarian.blogspot.com" width="550px" height="200px"></iframe>


El modelo a seguir es:

<iframe src="url-de-la-web-que-desees-mostrar" width="nº-de-ancho px" height="nº-de-alto px"></iframe>

**Recordad que width o height se expresan en píxeles (px). P.ej: 420px - 550px - 670px ...

Estas instrucciones se pueden colocar en una entrada de nuetro blog o en un gadget HTLM/Javascript si queremos colocarlo en algún lado de nuestra sidebar, footer, crosscol...

Actualización:

Para que no salgan las líneas deslizantes en los bordes es necesario añadir la orden:

scrolling="no"

dentro de la opción iframe .P.ej:


<iframe scrolling="no" src="url-del-sitio-web" width="550px" height="200px"></iframe>