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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

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

    ResponderEliminar
  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

    ResponderEliminar
  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

    ResponderEliminar
  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

    ResponderEliminar
  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

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

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

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

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

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

    ResponderEliminar
    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

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

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

      Saludos.

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

      Eliminar
  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

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

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

Anexos

Bitacoras.com