DISEÑO Y SERVICIO WEB, RECURSOS EN LINEA, TUTORIALES, PROGRAMAS Y MÁS...

lunes, 24 de agosto de 2009

Ver parte de una entrada con una imágen y la opción "leer más"

En muchos blogs la página principal tiene las entradas resumidas con la opción "leer mas" para poder leer la entrada completa.
Para poder lograr esto es necesario hacer unos cambios en la plantilla
Aquí voy a dejar como modificar la plantilla para lograr esto y que además las entradas tengan una imágen como miniatura

1)Ir a la zona de Edición de HTML
2)Lo primero que deben hacer es descargar su plantilla, para asegurarse de que si algo no sale bien puedan volver a como están ahora
3) Luego deben asegurarse que la opción "Expandir las plantillas de artilugios" este activada
4) Localizar este código
<data:post.body/>

Si tiene dificultad para buscarlo pueden usar la opción edición buscar y escribir el código para buscar más rápido
5)Luego borramos este código y lo remplazamos por este otro:

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<span class='rmlink' style='float:right'><a expr:href='data:post.url'> Leer más...</a></span>

</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


6)Ahora pegar este código justo antes de la etiqueta
</head>


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



Si tienen algún conocimiento de HTML pueden cambiar los tamaños del recuadro de la imágen y un para de cosas más

Si quieren ver un ejemplo entren a www.naciceleste.blogspot.com

¡Queda muy bueno!

4 comentarios:

  1. Gracias por el dato me quedo buenazo...
    Se un poco de Html pero no logre cambiar el tamaño ni el diseño... ¿Podrías aydarme con esto?

    Darwin

    ResponderEliminar
  2. Darwin si te fijas en la primera parte del script
    aparece summary_noimg=40 y otras lineas similares a esta. Tu puedes cambiar esos valores en este caso el 40. Width es el ancho y height es el alto en el caso de que quieras cambiar el tamaño de la imagen. Prueba distintos valores verás que es muy fácil. Despues pasanos tu blog para que le veamos

    ResponderEliminar
  3. No tengo ni idea de html pero me ha quedado de lujo lo de
    LEER MAS. Gracias

    ResponderEliminar