Últimas entradas por categorías con imagen en miniatura

Algunas veces queremos tener todo muy organizado para que nuestros lectores puedan encontrar con mayor facilidad los temas de su interés, y es ahí cuando en lugar de poner un gadget con las últimas entradas queremos poner sí las últimas entradas pero por categorías, de manera que puedas mostrar las últimas entradas por cada etiqueta que quieras y además mostrar la miniatura de dicho elemento.

Para poner en tu blog este gadget de últimas entradas por categorías realizaremos estos sencillos pasos:
1.- Entra en Diseño | Edición de HTML y antes de ]]> pega lo siguiente:

/* Últimas entradas por categorías
--------------------------------- */
img.label_thumb{
float:left;
border:1px solid #8f8f8f; /* Borde de las miniaturas */
margin-right:10px !important;
height:55px; /* Alto de las miniaturas */
width:55px; /* Ancho de las miniaturas */
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {padding-left:0px;}

2.- Luego antes de  pega este script:

3.- Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

En donde dice Nombre-de-la-etiqueta va el nombre de la etiqueta que quieres mostrar, tal como es, respetando mayúsculas y minúsculas. En el caso que la etiqueta contenga espacios o acentos lo mejor es que ingreses a la etiqueta y te fijes en la URL que aparece en la barra de direcciones del navegador, al final de la URL vendrá el nombre de la etiqueta tal como debe ponerse, por ejemplo, si tuviera espacios se vería así:

http://Nombre-de-mi-blog.blogspot.com/search/label/Nombre%20etiqueta

También dentro de éste último código hay unas áreas que podemos personalizar, true significa que lo mostrará y false que no lo mostrará.

var numposts ← Número de entradas a mostrar
var showpostthumbnails ← Mostrar o no las miniaturas
var displaymore ← Mostrar o no el enlace para leer más
var displayseparator ← Mostrar o no un separador
var showcommentnum ← Mostrar o no el número de comentarios
var showpostdate ← Mostrar o no la fecha de las entradas
var showpostsummary ← Mostrar o no el resumen de las entradas
var numchars ← Número de caracteres en los resúmenes

Y en el segundo código hay una URL en color naranja, esa es la imagen que se mostrará cuando la entrada no contenga ninguna imagen, puedes cambiarla por otra imagen si lo deseas.

Recuerda que el gadget muestra las ultimas entradas de una etiqueta en particular, por lo tanto, si quieres mostrar las últimas entradas de otras etiquetas entonces sólo tienes que repetir el paso #3 por cada categoría adicional que quieras agregar.

Read more »

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

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/AVvXsEhM1txx_jqIw0lj0GpJG66Dahn3uPBYJ1njEM8SnDw1Vum5Uj7O5SWDMDEKNzGOLfrVtDTsZtLHymCYQCKv65pR6P1nEA3AQsd1ZjuB5pWZp6KqwWW1nodMZuQTBsJ0ZfttO3tGGYyjuXY/" 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, marca la casilla Expandir plantillas de artilugios 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>

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/AVvXsEhM1txx_jqIw0lj0GpJG66Dahn3uPBYJ1njEM8SnDw1Vum5Uj7O5SWDMDEKNzGOLfrVtDTsZtLHymCYQCKv65pR6P1nEA3AQsd1ZjuB5pWZp6KqwWW1nodMZuQTBsJ0ZfttO3tGGYyjuXY/" 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.

Read more »

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

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/AVvXsEhM1txx_jqIw0lj0GpJG66Dahn3uPBYJ1njEM8SnDw1Vum5Uj7O5SWDMDEKNzGOLfrVtDTsZtLHymCYQCKv65pR6P1nEA3AQsd1ZjuB5pWZp6KqwWW1nodMZuQTBsJ0ZfttO3tGGYyjuXY/" 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, marca la casilla Expandir plantillas de artilugios 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>

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/AVvXsEhM1txx_jqIw0lj0GpJG66Dahn3uPBYJ1njEM8SnDw1Vum5Uj7O5SWDMDEKNzGOLfrVtDTsZtLHymCYQCKv65pR6P1nEA3AQsd1ZjuB5pWZp6KqwWW1nodMZuQTBsJ0ZfttO3tGGYyjuXY/" 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.

Read more »

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

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/AVvXsEhM1txx_jqIw0lj0GpJG66Dahn3uPBYJ1njEM8SnDw1Vum5Uj7O5SWDMDEKNzGOLfrVtDTsZtLHymCYQCKv65pR6P1nEA3AQsd1ZjuB5pWZp6KqwWW1nodMZuQTBsJ0ZfttO3tGGYyjuXY/" 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, marca la casilla Expandir plantillas de artilugios 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>

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/AVvXsEhM1txx_jqIw0lj0GpJG66Dahn3uPBYJ1njEM8SnDw1Vum5Uj7O5SWDMDEKNzGOLfrVtDTsZtLHymCYQCKv65pR6P1nEA3AQsd1ZjuB5pWZp6KqwWW1nodMZuQTBsJ0ZfttO3tGGYyjuXY/" 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.

Read more »