Artículos con introducción + enlace “Leer más”

Este proceso viene explicado en las páginas 75 a 78 del manual del curso. Gracias a este proceso nuestros artículos son menos extensos a primera vista al estar visible en un primer momento únicamente un fragmento del contenido del artículo y poder visualizar el artículo completo al pinchar en el enlace “Leer más...”, lo que hace que nuestro blog tenga un aspecto menos denso y sea más agradable.

Entramos en el backend o gestor de contenidos del blog y pinchamos en diseño/Edición de HTML, activamos la casilla Expandir plantilla de artilugios y buscamos en el contenido del editor HTML <div class='post-body entry-content'> Un truco interesante cuando buscamos un texto en una página web es control + f, así accedemos al buscador y allí escribimos simplemente div class y vamos buscando hasta encontrar la línea que deseamos.



Tras la línea <div class='post-body entry-content'> hacemos un salto de párrafo e introducimos:

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

Y tras la línea <data:post.body/> hacemos de nuevo un salto de párrafo e introducimos:

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

Finalmente el código debe quedarnos así:

<div class='post-header-line-1'/>

</div>

<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>

Tras asegurarnos de haber escrito el código correctamente pinchamos en Guardar Plantilla y nuestra plantilla ya se modifica. Sin embargo, el proceso que acabamos de ver sólo nos permite tener la posibilidad de utilizar el enlace “Leer más...”. En nuestros artículos antiguos no se modifican sólo añade el enlace al final de cada artículo, en todo caso tenemos la posibilidad de modificarlos posteriormente introduciendo en la edición HTML los códigos necesarios para que el enlace “Leer más...” se active y desactive donde nosotros deseamos. Este proceso viene explicado en la página 77, punto 17 y siguientes.



Para ello debemos entrar en la edición HTML del artículo, buscamos el final del párrafo e introducimos un salto de párrafo y el siguiente texto:

<span class="fullpost">

Y al final del artículo introducimos </span> pinchamos en publicar entrada y nuestro artículo se modifica, de tal manera que ahora ya sólo está visible la fotografía y el primer párrafo, junto con el enlace “Leer más...” que nos abre el resto del contenido del artículo.

Veamos un ejemplo. En el blog http://epatics.blogspot.com/ existe un artículo titulado El Bolígrafo Digital Parte 1 Dicho artículo (bastante extenso) fue creado sin haber introducido los códigos necesarios en la edición HTML de la plantilla para activar el enlace “Leer más...”.

Tras introducir los códigos en la Edición HTML de la plantilla ya aparece el enlace “Leer más...”, sin embargo, aparece al final del artículo y se ve el artículo completo, por lo que aún no hemos ganado nada en lo que a fluidez y vistosidad se refiere.

Entramos en la edición del artículo y comprobamos dónde deseamos que aparezca nuestro enlace “Leer más...”, en este caso, justo tras el primer párrafo (en el lugar que indica la flecha roja).



Ahora el artículo resulta mucho menos pesado e invita a que aquellas personas que lo encuentren interesante y deseen ampliar la información del artículo accedan a ella mediante el enlace “Leer más...”.

Este mismo proceso lo podemos utilizar en los artículos de nueva creación, para ello redactamos el artículo en la manera habitual y después pasamos a la edición en HTML introduciendo el código <span class="fullpost"> antes de que comience el texto que deseamos ocultar y el código </span> al final del artículo.

Sergio M. Martínez Rodríguez correosergiomartinez@gmail.com Tutor del curso Mentor Multimedia y web 2.0

viernes 19 de febrero de 2010

El Bolígrafo Digital Parte 1

DIGITAL

Si aún ne naa descubierta el neligrafe ‘digital te anirne a que Ieaa este articule ‘ya que ea una nueva herramienta que tiene un precie

asequible "51’ rnuenaa peainiliriariea.