miércoles, 14 de octubre de 2009

Agregar miniaturas y resumen del post automáticamente en Blogger

Se ha agregado un cambio para que no muestre el vínculo en páginas estáticas.

Entre los nuevos apartados de códigos implementados a este blog está el resumen automático en portada y generación de miniaturas al vuelo, esto es que el blog, después de cierto numero de palabras agrega un vinculo de Leer más o Más información, si hay un post más pequeño a las palabras requeridas, el vínculo no aparece.

Para agregarlo debemos entrar a nuestra plantilla de Blogger, asegurándose que Expandir plantillas de artilugios este marcado.

Ubicamos ]]></b:skin> y justo después pegamos el siguiente código:
<!-- En esta sección no se mostrará el código en las páginas estáticas y los post -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>var thumbnail_mode = "no-float" ;
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><style type='css/text'>/* propiedades generales */
.rmlink{
border:none;clear:both;
margin:10px 0 0;
padding:0;
text-align:center;
}

.rmlink a, .rmlink a:hover{text-decoration:none;}
.rmlink a{text-weight:bold;
display:block;margin:0;
padding:6px 0;
color:#fff;
background: #ff4300;
border: 1px solid #000;
}
.rmlink a:hover
{
color:#fff;
background: #000;
}</style></b:if></b:if>

Ahora ubicamos la etiqueta <data:post.body/> y la reemplazamos por el siguiente código:
<!-- rmlink condicionales de paginas estáticas e interiores -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<!-- rmlink condicionales negativas -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&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> <div class='rmlink'><a expr:href='data:post.url'>Leer artículo</a></div><div class='clear'/>
</b:if>
</b:if>

<!-- rmlink fin -->
Yo no he modificado el código, trabaja perfectamente sin configurar, pero si desean modificarlo editen las siguiente propiedades del Script que puso antes de </head> las medidas son en pixeles, no agregue la unidad:
  • summary_noimg = 430; El número de palabras que aparecen cuando no hay imágenes en el artículo.
  • summary_img = 340; El numero de palabras del resumen cuando hay imágenes en el artículo.
  • img_thumb_height = 100; Corresponde al valor alto de la miniatura
    img_thumb_width = 120; Corresponde al valor ancho de la miniatura
Basado en la versión de vietwebguide.com, este artículo ha sido corregido y simplificado.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

21 comentarios:

  1. Muy bueno Hombre, yo he buscado muchos sítios intendando encontrar uno que funcione ..

    El suyo está cosa fina ^^

    Muchas gracias .. Me ayudó mucho .-.
    GRAAACIAS !!

    ResponderBorrar
  2. cómo hago para aplicar a una sola página del blog? y que las demás no lo muestren? ya que resume la info en otras páginas y la hacen inaccesible

    ResponderBorrar
  3. Bueno si por una página te refieres al index, para eso requerirías modificar las condicionantes:

    Mira en este blog
    http://vagabundia.blogspot.com/2009/02/optimizacion-de-titulos-y-condicionar.html

    Pero no confundas las páginas de contenido con los de navegación, si lo quieres hacer dentro de un post (página de contenido) es imposible, mejor usa miniaturas en artículos relacionados:

    http://cgnauta.blogspot.com/2009/10/articulos-relacionados-con-miniaturas.html

    ResponderBorrar
  4. Estimado, como puedo hacer para que tambien, el jpg de la miniatura tenga el link a la entrada...como lo tiene el titulo y el Continuar ...

    Muchas gracias por tu ayuda!

    Gonzalo Parada

    ResponderBorrar
  5. Mi versión de la navegación de blogger es excesivamente complejo para explicarlo en comentarios un método parecido está aquí:

    http://esblogmania.blogspot.com/2010/02/iconos-de-navegacion-blogger.html

    ResponderBorrar
  6. no me anduvo, no s epor que no me quiere mostrar las imagenes ni nada tan raro eso??

    mi blog es:
    On time 2.0
    http://atiiempo.blogspot.com/

    SAlu2..

    ResponderBorrar
  7. Sin tener la plantilla a la que quieres ponérsela no es posible saber porque no se aplicar, mi recomendación es que uses un blog limpio y con una plantilla de ourbloggerttemplates experimentes.

    Si ves mi portada es el hack que uso.

    ResponderBorrar
  8. Muy bueno pero me lo aplica a todas las páginas. ¿Como sería para que se aplicara solo a la página principal?. Otro compañero lo preguntaba pero no lo tengo claro. Gracias.

    ResponderBorrar
  9. Este es el tutorial:
    http://cgnauta.blogspot.com/2009/10/articulos-relacionados-con-miniaturas.html

    ResponderBorrar
  10. Hola, lo implemente y queda bien ahora quisiera aplicarle estrilos al thumbnail como bordes, como lo hago, gracias

    ResponderBorrar
    Respuestas
    1. Si tienes Chrome da clic derecho sobre la miniatura implementada y luego en Inspeccionar elemento, este te dice las reglas CSS a las cuales está regido un objeto.

      Mi sugerencia es que al código CSS de este ejercicio agreges la regla .post img y a esta le agregues padding para la separación o la propiedad border.

      Ve para manejar el padding:
      http://cgnauta.blogspot.com/2011/06/padding-en-css-aprendiendo-sus-secretos.html

      Borrar
  11. Hola, nosé si sea demasiado tarde para preguntar, pero de qué manera puedo cambiar la alineación del texto? (me aparece a la izquierda)

    Saludos y muchísimas gracias.

    ResponderBorrar
    Respuestas
    1. Disculpa, me refiero al post (al resumen).

      Saludos.

      Borrar
    2. Si tienes una dirección web donde lo aplicaste y qué es lo que falla puedo ayudarte.

      Borrar
  12. Este resumen es el único que me ha funcionado perfectamente, lo felicito. En el blog de pruebas funcionó de maravillas, pero hoy lo pasé el blog final y no hay manera que funcione, si pudiera revisar que se descompuso en ese pase se los agradecería mucho : http://venezuelasolo1.blogspot.com

    ResponderBorrar
  13. Interesante aporte, muy útil.
    Te invito a pasar por mi web: OK Hosting

    ResponderBorrar
  14. LO intente pero no me funciono .. alguien que me pueda ayudar ?

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.