Personalizando el blogger #6 – Añadir "Leer Más" y Resumen de la entrada

 

Una de las cosas que siempre he querido incluir es la posibilidad de reducir la visualización del texto de las entradas de forma que con un simple enlace “Leer más” se acceda a todo el contenido de dicha entrada. Ésto hace que el usuario no tenga que ver todo el contenido de la entrada si no le interesa, y poder ver enseguida el siguiente comentario.

 

Existen varios métodos para llegar a conseguir ésto. Yo voy a seguir los pasos que podeis encontrar en “http://chicablogger.com/distintas-maneras-de-poner-excerpts-leer-mas-en-blogger/” para la primera de éstas formas. De ésta manera, el enlace “Leer más” sólo se añadirá a aquellas entradas que queramos nosotros, y no a todas.

Vamos a ver cómo hacerlo:

1 – Lo primero, será descargar y posteriormente subirlo a otro hosting(tal y como hemos visto en entradas anteriores) éste Script.

2 – Iremos a “Personalizar” – “Diseño” – “Edición de HTML” para modificar e incluir algunas de las líneas de nuestra plantilla.

3 – Expandimos Artilugios.

4 – Localizamos la etiqueta </head> y añadiremos antes de ésta el siguiente código:

<script type='text/javascript'
src='URL-de-nuestro-archivo-hackosphere.js' />


5 – Una vez añadido el código anterior, localizamos la línea:

<div class='post hentry uncustomized-post-template'>

situada antes de: post-header-line-1

Y la reemplazamos por ésta:

<div class='post' expr:id='"post-" + data:post.id'>

6 – Justo debajo de <div class=’post-header-line-1′/>
Localizamos las líneas:


<div class=’post-body entry-content’>
<data:post.body/>


Y las sustituimos por:


<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p>
<a expr:onclick='"javascript:showFull("post-" +
data:post.id + "");"'
href='javascript:void(0);'>
Leer más...
</a>
</p>
</span>
<span id='hidelink' style='display:none'>
<p>
<a expr:onclick='"javascript:hideFull("post-" +
data:post.id + "");"'
href='javascript:void(0);'>
</a>
</p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>")
</script>
</b:if>


7 – Guardamos los cambios en la plantilla.

8 – Ahora, cada vez que queramos postear una entrada y que se muestre éste “Leer Más” lo haremos de ésta forma:


TEXTO A MOSTRAR
<span id="fullpost">
TEXTO A OCULTAR
</span>

Y ya está, parece algo más complicado de lo que en realidad es y como ven funciona.
Animense a probarlo.


Entradas y enlaces relacionados:
http://chicablogger.com/distintas-maneras-de-poner-excerpts-leer-mas-en-blogger/
http://elescaparatederosa.blogspot.com/2007/04/el-leer-ms-con-resumen.html

Deja un comentario

Maximum 2 links per comment. Do not use BBCode.