He estado pensando últimamente en cómo poder mostrar resúmenes en la entrada del blog, para que al llegar la gente pueda ver mas entradas. La verdad es que hay mucho escrito sobre esto, pero los scripts de los resúmenes automáticos de Blogger Plugins (en los que se basan todos los demás) eliminaban todas las etiquetas, dejando sólo el texto.

Ésto a mí no me venía bien ya que tengo, por ejemplo, códigos muy cerca del principio de las entradas, por lo que quedaban como simple texto, y no me gustaba.

Ésto me ha llevado a pensar dos soluciones:

1-Cambio del script

Si al script le añadimos una función para eliminar etiquetas y el interior de las mismas, solucionamos parte del problema. Supongamos que tenemos un post cuyo código sea:
Esto es un <style>.rojo{color:red} </style>texto de <br/>prueba con <script>var Emilio </script>scripts y <a href="#">links</a>

Si ponemos:

<script>
var etiquetas=["script","style"],
post="Esto es un <style>.rojo{color:red} </style>texto de \n prueba con <script>var Emilio <\/script>scripts y <a href=\"#\">links</a>";
borraretiquetaycontenido(etiquetas,post)
</script>

Resultado:

Pero nos queda otro problema: Hay etiquetas que sí podríamos querer eliminar a la hora de contar las letras del resumen (como los links, negritas, etc). Por eso he hecho una función similar a la que tenía el script original, pero con opción para seleccionar etiquetas:

<script>
var etiquetas=["script","style"],
post="Esto es un <style>.rojo{color:red} </style>texto de \n prueba con <script>var Emilio <\/script>scripts y <a href=\"#\">links</a>";
borraretiqueta(etiquetas,post,15)//ahí va el número de caracteres a los que queremos resumir.
</script>

Resultado:

Como podréis ver, ahora el contenido de la etiqueta style ahora es visible, en vez de ocultado. Ese era el mayor problema que tenía yo para poner el script.

Con estas modificaciones es posible que lo implemente en el blog...

2-La idea más simple (y efectiva) que os podáis encontrar

Es una tontería, pero este método es muy efectivo, personalizable y además, sólo hace falta un poquito de CSS y las Condicionales de Blogger.

Se trata de, en la entrada, crear un párrafo como resumen, donde podéis poner lo que se os antoje(imágenes, etc.), y a continuación usar la opción de "leer más" de Blogger. El truco está en que, en la entrada, no se verá ese párrafo, ya que usaremos condicionales para ocultarlo.

Sería poner en nuestra plantilla:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.resumen{display:none}
</style>
<b:else/>
<style>
.resumen img{
width:90px;/*La anchura*/
height:90px;/*La altura*/
float:left;/*Cambiar por "right" para que la imagen salga a la derecha*/
background:white;
border:1px solid #EEE;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
padding:7px;
}
</style>
</b:if>

Y en nuestra entrada:


<p class=resumen><img src="UrlImagen"/>...Resto del contenido del resumen...</p>
<!--More--><!--Ésto es lo que pone blogger para generar el link de leer más-->
El resto de la entrada
...

Ventajas e inconvenientes

El primer método nos permite hacer resúmenes automáticos en todas nuestras entradas. No obstante, el resumen será las primeras frases de la entrada

Sin embargo, el segundo no es automático, por lo que tendremos que poner manualmente el resumen. Pese a eso, lo cierto es que nos permite una personalización total.

Próximamente publicaré cómo usar el script nuevo tal y como lo he incluido en el blog, y como poner variaciones. Siento que no esté todavía, pero creo que la espera merecerá la pena... Por si queréis echarle una ojeada aquí está el script:

Descargar script

2 pensamientos en “Dos formas diferentes de usar resúmenes automáticos

  1. Imagen de La Vengadora el dijo:

    Necesito ayuda para incluir un area editable debajo de la columna central de posts, en una plantilla custom. y no se como :/

    Tengo que agregar un widget… pero la plantilla no me da la opción de agregar.. hay que hacerlo desde el codigo.. y no entiendo mucho.. haha…
    helppp.. bueno cualquier cosa este es mi correo celestefassbinder@gmail.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.