Leer más con miniatura de imagen en páginas de etiquetas

Son varias las personas que están interesadas en saber como hacer para que el efecto que habíamos visto anteriormente de "leer más con miniatura de imagen" solamente se aplique a las páginas de etiquetas.

Si vamos a usarlo por primera vez procedemos como hicimos en esa entrada anterior y aplicamos el script directamente en la plantilla para no depender de alojamientos externos.

[1] Colocamos el script antes del </head> de nuestra plantilla.

<!-- Entradas leer mas en etiquetas -->
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<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 = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>
<!-- Fin de entradas leer mas en etiquetas -->

[2] Guardamos cambios.

[3] Marcamos entonces la casilla de "Expandir las plantillas de artilugios" para localizar este código en la plantilla: <data:post.body/>

[4] Eliminamos ese código y colocamos esto en su lugar:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span><b:else/>
<data:post.body/></b:if><b:else/><data:post.body/></b:if><b:else/><data:post.body/></b:if>

[5] Guardamos cambios.

El resultado entonces será el mismo que en la entrada de la que hablo a comienzo del post, pero solo se aplicará a las páginas de etiquetas.


Leer más


Notas:
Si ya estabas usando el método anterior donde el efecto se aplicaba también a la página principal y quieres usar este, tendrás que pasar directamente al paso [4] y sustituir el código que colocaste según la entrada anterior por el de esta entrada (paso [4]).

En el código está incluida la condicional que hace que si usamos la nueva función de Blogger "Páginas estáticas", en esas páginas las entradas se vean completas, sin el "leer más" añadido.

0 comentarios:

Publicar un comentario