2/19/2011

Leer más con miniatura de imagen y páginas estáticas

Nos decía Rosa en su querido Escaparate:

Son muchas las personas que me consultan sobre el tema y que aún tienen problemas para saber como alojar los script en algún servidor externo a Blogger.
Como algunos ya sabéis, muchos de los scripts que usamos en el blog, pueden alojarse sin problemas en la misma plantilla.

En el caso de la entrada que publiqué hace algún tiempo "Leer más" con miniatura de imagen, es bastante aconsejable hacerlo así, ya que además de ahorrarnos problemas de dependencia con algún servidor externo, el script no ocupa demasiado tamaño.

Nota:

Si vais a añadir este efecto por primera vez, es aconsejable que leáis antes la entrada anterior al respecto, más que nada porque encontraréis información de como funciona exactamente, así como un ejemplo en funcionamiento y las modificaciones que pueden hacerse.

Para los que ya lo estáis usando, fijaros que la única diferencia está en el código del paso [3] y que no deberéis modificar nada más.

[1] Nos situamos en la pestaña de "Edición HTML" de nuestro panel y marcamos la casilla de "Expandir las plantillas de artilugios" para localizar este código: <data:post.body/>

[2] Una vez lo hemos localizado, lo eliminamos y en su lugar colocamos este otro:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='summary' 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'>--&gt; Leer más...</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>


[3] Subimos ahora hacia arriba en el código de la plantilla hasta localizar la etiqueta: </head>

Justo antes de esa etiqueta (</head>) colocamos este código:

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



2 comentarios:

  1. Hola Disculpa pero seguí los pasos que indicas pero no se efectúa ningún cambio sera que me puedes ayudar es que enserio lo necesito ya que tengo que entregar un proyecto y uno de los requisito para la realización por favor si lees este comentario te agradecería que ayudaras ;(( ;( ;-(

    ResponderEliminar
    Respuestas
    1. Admi. Primero debes tener en cuenta que las nuevas plantillas de blogger (oficiales) tienen otra forma mucho más sencilla de hacerlo que aquí no verás. Por el otro lado si usas una plantilla de aquellas que andan por allí y son gratuitas, ésta entrada debería funcionar bien para convertirlas en estilo magazine.
      También puedes intentar lo que en Ciudad Blogger nos indican al respecto:
      http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

      No tiene mayores secretos, así que tu problema debe tener que ver con lo primero.

      Un abrazo.

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.