Leer más... en las entradas del blog

Hoy mostraré como podemos insertar un “leer más” o un “read more” en blogger.

En esta ocasión, al pulsar encima del “leer más”, veremos nuestro artículo completo en la página del artículo. El procedimiento que tendremos que seguir será el siguiente:

1. En primer lugar iremos a la pestaña “Diseño” de nuestro panel de Blogger y elegiremos la opción “Edición de HTML”. A continuación pulsamos “Expandir plantilla de artilugios”.

2. A continuación buscamos en nuestro plantilla el código (dependerá del blog y solo habrá uno de los dos)

1	<div class='post-body entry-content'>

o

1	<div class='post-body'>

3. Posteriormente, introduce justamente debajo el siguiente código:

1 2 3 4 5

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

4. A continuación localizamos el código

1	<data:post.body/>

y justamente después copiamos el siguiente código:

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

En conclusión, la zona del código del leer mas tendría que ser algo similar a:

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class='post-header-line-1'/> <div class='post-body entry-content'> <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none}</style> <data:post.body/> <a expr:href='data:post.url'>Leer más...</a> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'>

5. Una vez hecho esto ya podemos guardar la plantilla, y para poder usarlo con facilidad haremos lo siguiente. Iremos a la pestaña “Configuración” y elegiremos la subpestaña “Formato”, y en la opción “Plantilla de entrada” copiamos el siguiente código:

1 2 3 4

Esto saldra antes del leer mas <span class="fullpost"> Esto saldra en la pagina al pulsar leer mas </span>

Finalmente, guardamos los cambios y vamos a escribir una nueva entrada. Solo tendremos que cambiar nuestro texto por lo que deseemos publicar y ya funcionará perfectamente.

---

Nota: Si queremos que en lugar de "Leer más" como texto veamos una imagen en su lugar, sustituiremos en el primer código "Leer más" por:


<img src="aquí-la-url-de-la-imagen" />

Leer más...