Crear un “Leer más"

En ocasiones resulta interesante crear una entrada que muestre un texto de introducción y oculte el resto de su contenido detrás de un enlace "Leer más". Cuando el usuario pulsa en este enlace o bien en el título del artículo, entonces la entrada se muestra completa y de forma individual en la página. Este enlace "Leer más" no se contempla por defecto en Blogger pero se puede conseguir utilizando la siguiente receta.

Paso 1. Modificar la plantilla

  1. Desde el interfaz de gestión de contenidos haz clic en Diseño > Edición de HTML.

Diseño > Edición de HTML

  1. En el cuadro del código HTML de la plantilla activa la opción Expandir plantilla de artilugios.
  2. Localiza el código siguiente: <div class='post-header-line-1'/>.

Editar plantilla

  1. Vamos a añadir dos fragmentos de código en las posiciones 1 y 2 que se indican en la figura siguiente:

Código post.body

  1. Debajo de la línea de código: <div class='post-body' entry-content> sitúa el siguiente 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>

  1. Debajo de la línea de código: <data:post.body /> sitúa el siguiente código:

<a expr:href='data:post.url'>Leer Mas...</a>

</b:if>

  1. El resultado final es un DIV con un CSS condicional de la siguiente forma:

<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 Mas...</a>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

  1. Clic en el botón GUARDAR PLANTILLA

Guardar plantilla

Paso 2: Crear una entrada

Una vez que hemos modificado la plantilla ahora es necesario crear una entrada utilizando el siguiente código HTML: <span class="fullpost"> </span>. Fuera de la etiqueta span situaremos el texto del artículo que se verá siempre y dentro de las etiquetas span el texto que sólo se verá cuando el lector pulse en el enlace "Leer más..."

  1. Descarga y descomprime el archivo mariecurie.zip. Como resultado obtendrás un archivo de imagen mariecurie.jpg y un archivo de texto mariecurie.txt.

Contenido de mariecurie.zip

  1. Haz doble clic sobre el archivo mariecurie.txt para abrirlo con el Bloc de Notas. Selecciona Edición > Seleccionar todo para seleccionar el texto completo que contiene este archivo y a continuación elige Edición > Copiar para copiarlo al portapapeles de Windows. Cierra la ventana del Bloc de Notas.
  2. Abre el navegador web y accede a la URL de inicio de Blogger: https://www.blogger.com/start?hl=es
  1. Introduce sus credenciales (usuario y contraseña) en el apartado Accede a través de tu cuenta de Google y pulsa en el botón Acceder
  2. Si el proceso de autentificación se ha producido con éxito te situarás en el Escritorio.
  3. En este panel aparecerán los distintos blogs que gestionas en Blogger.
  4. Clic en el botón NUEVA ENTRADA para acceder directamente al interfaz de edición del blog donde deseas publicar el artículo.
  5. Teclea el título: Marie Curie. Haz clic dentro del editor de artículos y a continuación haz clic derecho para elegir la opción Pegar. Esta acción pegará el texto copiado del archivo de texto anterior evitando tener que teclearlo.
  6. En la barra de herramientas del editor haz clic en el botón Añadir Imagen para añadir la imagen mariecurie.jpg que se ha descargado en un paso anterior. Reduce el tamaño de visualización y ajusta la imagen a la izquierda del primer párrafo.
  7. Selecciona la lista de elementos de su Biografía y de su Obra para pulsar a continuación el botón Lista de viñetas para asignarles este formato.
  8. Dentro del editor de entradas pulsa y arrastra sobre el enlace que aparece. Es un enlace a Google que ya incluye el término de búsqueda: http://es.wikipedia.org/wiki/Marie_Curie
  9. A continuación pulsa la combinación de teclas Ctrl+X para cortarla. Esta URL se ha copiado al portapapeles de Windows y se ha eliminado de la ubicación actual.
  10. Pulsa y arrastra para seleccionar el texto "Wikipedia" situado al final del documento.
  11. A continuación en la barra del editorpulsa en el botón Enlace.
  12. En el cuadro de diálogo Escribe una URL: haz clic derecho y elige Pegar.
  13. Clic en el botón Aceptar para guardar la dirección pegada.
  14. Hasta aquí el artículo se ha editado como cualquier otro. A continuación vamos a situar dentro de la etiqueta span class="fullpost"> </span> el texto que se ocultará inicialmente. Clic en la pestaña Edición HTML.

Edición HTML

  1. En el código HTML del artículo añade la etiqueta <span class="fullpost"> antes de la línea Su biografía. Y luego el cierre de esta etiqueta al final del texto: </span>.
  2. Clic en el botón PUBLICAR ENTRADA. Si accedes a la lectura del artículo verás que se muestra el primer párrafo y el enlace Leer más.

Detalle de la entrada del blog