Leer m?s con im?genes en miniatura mejorado (2)

Este script no es compatible con Internet Explorer por lo que se recomienda seguir usando el m�todo anterior.

Hace un par de meses les presentaba una mejora del Leer m?s con im?genes en miniatura el cual incluye una imagen predeterminada para las entradas que no tienen im?genes, tama?os proporcionales en las miniaturas y la posibilidad de ingresar a la entrada haciendo click en la imagen. Y aunque cre?a que ya no hab?a nada m?s que hacerle a ese script siempre hay inquietudes de los usuarios; y algo que preguntan con frecuencia es porqu� las entradas resumidas no respetan los espacios entre cada punto o salto de l?nea; o por qu� si sus entradas tienen negritas y cursivas no se ve?an en los res?menes, en otras palabras, que los sumarios se ven muy planos al no mostrar los formatos del texto.

Y bueno, haci�ndole unas ligeras modificaciones consegu? que la entrada resumida pueda mostrar cualquier formato que tenga el texto, ya sean negritas, cursivas, colores, espacios, saltos de l?nea, etc. De manera que pueda verse tal como han escrito la entrada.

ATENCI?N: Si est?s usando el truco para elegir qu� resumen mostrar en el Leer m?s autom?tico no apliques estos cambios de lo contrario dejar?n de verse los res?menes personalizados.

Si ya hab?as puesto el Leer m?s con im?genes en miniatura mejorado (1) s?lo elimina el script que va antes de </head> y en su lugar pon este:

<script type='text/javascript'>
summary_txt = 450;
img_thumb_width = 125;
</script>


<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<img")!=0)
{
var s = strx.split("<img");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=0){
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgut8kRHM3S58FJw33OWZcqYcG_SrdknewMC5NfGj-kbpCfICr7BWHL2Y-v1o41tToY3lxRZraAljDfUXZbfRCx7tFHTMWgKSqNxYzUbUPX_HVWZN7Gt1GHk2v6J_9g_YHiYj8q3GBZESI/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Y con eso bastar? para que se apliquen las mejoras que adem?s de las que ten?a tambi�n podr?n verse los textos enriquecidos.

RECOMENDACI?N: Como las entradas resumidas respetar?n cualquier cantidad de espacios o saltos de l?nea que haya es preferible que no dejes espacios antes del primer texto, por lo que si tienes una imagen al comienzo escribe tu entrada justo despu�s del c?digo de la imagen sin dar un salto de l?nea.

---

Si es la primera vez que vas a usar el Leer m?s autom?tico entonces entra en Dise?o | Edici?n de HTML y busca esta l?nea:

<data:post.body/>

Elim?nala y en su lugar agrega esto:

<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' style='font-size:13px; text-align:justify;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>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>

NOTA: La etiqueta <data:post.body/> en la mayor?a de las plantillas aparece 2 o 3 veces, regularmente se debe cambiar la segunda, en caso de que no obtuvieras los resultados esperados aplica los cambios en las dem?s hasta que des con la indicada.

Ahora antes de </head> pega lo siguiente:

<script type='text/javascript'>
summary_txt = 450;
img_thumb_width = 125;
</script>

<script type='text/javascript'>
//<![CDATA[
// Script original de Anhvo, modificado por ciudadblogger.com
function removeHtmlTag(strx,chop){
if(strx.indexOf("<img")!=0)
{
var s = strx.split("<img");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=0){
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, pURL){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgut8kRHM3S58FJw33OWZcqYcG_SrdknewMC5NfGj-kbpCfICr7BWHL2Y-v1o41tToY3lxRZraAljDfUXZbfRCx7tFHTMWgKSqNxYzUbUPX_HVWZN7Gt1GHk2v6J_9g_YHiYj8q3GBZESI/" width="'+img_thumb_width+'px" /></a></span>';
summ = summary_txt;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'" title="'+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px"/></a></span>';
summ = summary_txt;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Y listo.

Los que ya ten?an el script mejorado notar?n que el cambio en el script es m?nimo pero los resultados son muy notables.

?Algo m?s que mejorar? Probablemente s?, pero por ahora me parece que est? bastante completo.