Para mostrar HTML en webs y blogs, debemos tener cuidado que el propio explorador, no interprete esas líneas como HTML y las muestre procesadas, sino que las muestre como texto plano. Para ello, podemos ir manualmente, reemplazando los símbolos menor y mayor ( < >) por estos códigos:

< por &lt;

> por &gt;

Un ejemplo, lo tendríamos con esta instrucción:

<img src=”" alt=”" />

donde deberíamos escribir esto para que el explorador no lo interprete como HTML.

&lt;img src=”" alt=”" /&gt;

Pero para lo que he hecho esta entrada, es precisamente para mostrar cómo existen ya algunas páginas que te ahorran la engorrosa tarea de reescribir los códigos y lo hacen automáticamente.

En Blogcrowds, tenemos una herramienta que nos servirá para procesar los códigos de Adsense, de tal forma que los podamos insertar en la edición HTML de plantillas de Blogger, pues no sé porqué, pero el código tal y como nos lo da Adsense, no parece funcionar en la edición de plantillas de Blogger. Si lo hacemos con gadgets, la cosa funciona bien, pero si queremos insertar el código de Adsense en algún lugar específico de la plantilla, debemos procesarlo con la herramienta antes mencionada.

Si queremos separar los posts de Blogger para mostrar extractos y luego que aparezca el típico enlace de “Leer más” (“More”) que lleva al post entero, debemos modificar algunas cosillas en la plantilla.

Primero, debemos ir en el panel de contr0l del blog, a la pestaña de DISEÑO y la subpestaña EDICIÓN DE HTML. Luego, señalamos la casilla de EXPANDIR PLANTILLAS DE ARTILUGIOS.

Buscamos este código:

<data:post.body/>

Debajo de esa línea, copiaremos este código:

<a expr:href='data:post.url'>Leer más »</a>
</b:if>

Pudiendo cambiar lo de “Leer más” por otro mensaje parecido que nos parezca mejor, como “Pincha aquí para seguir leyendo” o cosas parecidas.

Ahora nos toca buscar este código:

<div class=’post-body’> (también puede ser <div class='post-body entry-content'>)

Debajo de esta línea, copiaremos este código:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Luego, en cada entrada o post que hagamos, debemos separar la parte que es el extracto, que se ve siempre, y la parte restante, que sólo se verá al leer los posts individuales. Para ello, utilizaremos los códigos <span class=”fullpost”> y </span> como se muestra en el ejemplo de abajo.

Aquí escribimos el extracto
<span class=”fullpost”>
Aquí el resto del post o entrada
</span>

Para que la tarea de copiar este texto sea más fácil, podemos dejarnos la chuleta copiada por defecto en cada entrada nueva. Vamos en el panel de control a la pestaña CONFIGURACIÓN y la subpestaña FORMATO. Buscamos el campo PLANTILLA DE ENTRADA, y es ahí donde podremos copiarnos la chuleta como el ejemplo de arriba. De esta forma, empezaréis siempre cada entrada nueva con los código preparados automáticamente.