Leer más sin imágenes. Sólo texto.

No sé si ya funciona bien el artilugio del nuevo editor Blogger, que sirve para crear resúmenes de posts con "leer más". Algunos me habeis comentado recientemente que todavía daba algún que otro problema, así que mientras se solucionan todos, se puede seguir usando el script que vimos anteriormente para este mismo fin.

Aquel código mostraba también una imagen en miniatura, pero por cuestión del propio diseño de cada cual, algunos necesitais que esta no se muestre. Es decir, que el "leer más" sea sólo para controlar la cantidad de caracteres a mostrar y de esta manera, la página Inicio y las de navegación (etiquetas, recientes/antiguas) sean sólo cómo los titulares de un periódico.

Esto es más fácil que lo anterior, porque lo que hay que hacer es precisamente quitar cosas del código original (el estilo para la imagen y las líneas que generaban la miniatura) y dejar sólo lo que nos interesa. Para instalar esto y que se queden vuestras entradas como en este ejemplo, hay que hacer lo siguiente:

Con Expandir plantillas de artilugios seleccionado, buscamos el </head> y justo antes pegamos este script (si lo teníamos ya, se trata de sustituir el anterior por este):

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1) {
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;
var summary = imgtag + '<div class="resumenes" >' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
sumario_noimg = 300;
//]]>
</script>

El valor 300 de la antepenúltima línea es el que determina el número de caracteres a mostrar. Podeis cambiarlo por el que os convenga.

En segundo y último lugar, buscamos data:post.body y se sustituye por esto otro (este es igual que en la anterior versión, por lo que no habrá que incluirlo si ya teníamos instalado este sistema de sumarios) :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;);</script>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

¡Voila! Resúmenes sin imágenes.

En el script he incluido la clase resumenes, que en un principio no come pan. Si no haceis nada más, los resúmenes saldrán con el mismo estilo que las entradas normales. Sin embargo, si quereis darle un estilo especial, esa inserción en el script os permitirá hacerlo tan sólo añadiendo ese selector con las propiedades que querais, en en la parte CSS. El del ejemplo tiene este estilo:

.resumenes {
background:#e1e1e1;
border:3px double black;
padding:10px;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter