Sumarios automáticos. Casi definitivo. | Oloblogger Desde hace aproximadamente un año, Blogger incorpora un sistema para crear sumarios de entradas ( leer más ; read more ), de manera que pod...

14 de octubre de 2010

Sumarios automáticos. Casi definitivo.

Desde hace aproximadamente un año, Blogger incorpora un sistema para crear sumarios de entradas (leer más; read more), de manera que podamos mostrarlas truncadas a discreción.  Personalmente nunca me ha gustado el sistema, porque si bien permitía realizar el corte en el punto exacto deseado, también obligaba a meter código extra post a post. Principalmente por este motivo, siempre he preferido los sumarios automáticos.

Sin embargo, este último sistema tiene unas cuantas carencias:
  • las entradas que sólo contenían una imagen o muy poco texto se quedan cojas con respecto a otras más extensas.
  • las imágenes en miniatura se mostraban deformadas si las originales no eran cuadradas.
  • en las páginas estáticas, las entradas se truncaban indebidamente
Estas y alguna cosilla extra más, son las que he pretendido solucionar con este nuevo código.

Ahora se comprobará la longitud del texto de la entrada y si es menor que el que queremos mostrar en los sumarios, simplemente no truncará la entrada y la mostrará completa. Asimismo si el post tiene sólo imágenes.

Por otra parte, en lugar de forzar el tamaño de la imagen que acompaña los resúmenes, lo que haremos será mostrar un recorte si la original es mayor que el recuadro que fijemos para los sumarios o un mosaico si es más pequeña. Y en ambos caso, la imagen también enlazará con el post.

Y ya que estábamos, también se aportan tres estilos (CSS) para elegir el que más os guste. Uno para situar la miniatura flotando con el texto (derecha o izquierda), otro para mostrar una imagen grande en la cabecera del resumen y un tercero para no mostrar imagen alguna.

Aunque un poco largos, sólo tenemos que generar dos trozos de código para que todo funcione. Seleccionamos la casilla Expandir plantillas de artilugios y en primer lugar insertamos el estilo y el script antes de </head>. Si ya estábamos usando este truco, antes de nada tendremos que eliminar el código del anterior script. Es fácil reconocerlo porque es muy similar. Este es el nuevo que se propone:


<!-- SUMARIOS AUTOMATICOS -->
<style type='text/css'>
.contemini {
position:relative;
width:125px;
height:125px;
float:right;
overflow:hidden;
margin:0px 0px 0px 10px;
border:1px solid #aaaaaa;
-webkit-box-shadow: 2px 2px 5px ;
-moz-box-shadow: 2px 2px 5px ;
box-shadow: 2px 2px 5px ;
background:#000000;
}
.miniaturas {
width:125px;
height:125px;
background: no-repeat scroll 50% 40% #eeeeee;
}
.leermas {
/* Las propiedades que gusteis para el enlace */
}
</style>

<script type='text/javascript'>
//<![CDATA[

function createSummaryAndThumb(pID,enlacetitulo){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = sumario_noimg;

if(img.length>=1) {
imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';
summ = sumario_img;
}

var summary = removeHtmlTag(div.innerHTML,summ,imgtag,enlacetitulo);
div.innerHTML = summary;
}

function removeHtmlTag(strx,chop,imagen,enlace){
var original=strx;
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("");
}
if(strx.length<=chop) {
return original;
}
else {
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);
var devolver = imagen + '<div>' + strx + '... (<a class="leermas" href="' + enlace+ '">Leer más</a>)</div>';
return devolver;
}
}

sumario_noimg = 380;
sumario_img = 255;
//]]>
</script>


Ahora, para que lo de los enlaces en las imágenes funcione y que no nos den la tabarra las páginas estáticas, localizamos <data:post.body/> y sustituimos esa variables por lo siguiente. Si teníamos otro código distinto para sumarios, lo sustituimos igual que antes.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary-&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
</b:if>
</b:if>


Ya podemos pinchar en Vista Previa y comprobar que todo funciona correctamente. Si estais en un blog de prueba (que es lo que deberíais hacer antes de meter nada nuevo en vuestro blog), a continuación podeis crear algunos posts extremos para ver el resultado: uno con poco texto, otro con poco texto y una imagen, una imagen sola...

¿Contentos con el sistema? Pues ahora las posibles configuraciones alternativas de estilo.

En la primera parte del primer código teneis todas las propiedades CSS. El alto y el ancho puede ser cambiado para aumentar/disminuir el tamaño de las miniaturas y sólo hay que tener en cuenta que hay que hacerlo simultáneamente en las dos clases (.contemini.miniaturas). También podeis cambiar los efectos de bordes y sombras (border, box-shadow), así como el fondo por defecto. Evidentemente, el float:right; podría ser un float:left; sin problemas; sólo habria que ajustar el margin para que se generará el espaciado con el texto en el lado contrario.

Si ya nos metemos en la parte del script, encontramos el texto "(Leer más)", que podemos cambiarlo por el que más nos guste. Al final del todo encontramos las variables que controlan el número de caracteres que queremos que se vean en los sumarios: sumario_noimg es para los posts sin imágenes (más caracteres) y sumario_img para el otro caso (con miniatura, menos caracteres).

Si quereis mostrar una gran imagen central (cuando la haya) encima del resumen de texto, entonces teneis que cambiar todo lo que está entre etiquetas STYLE por esto otro:


.contemini {
position:relative;
width:400px;
height:200px;
text-align:center;
margin:0px auto 10px;
overflow:hidden;
border:1px solid #aaaaaa;
-webkit-box-shadow: 2px 2px 5px ;
-moz-box-shadow: 2px 2px 5px ;
box-shadow: 2px 2px 5px ;
background:#000000;
}

.miniaturas {
width:400px;
height:200px;
background: 50% 50%;
/*Para que la imagen no se repita si es pequeña, incluir un no-repeat*/
}

.leermas {
/* Las propiedades que gusteis para el enlace */
}

Una vez más, podeis cambiar el tamaño de la miniatura y el resto de propiedades visuales.

Y para terminar, el estilo más fácil que es el que no mostrará ninguna miniatura en las entradas a resumir:


.contemini {
display:none;
}

.miniaturas {
}

.leermas {
/* Las propiedades que gusteis para el enlace */
}

Seguro que este último es el más os ha gustado ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

175 comentarios :

  1. Oloblogger eres lo máximo, aun no he intentado colocar este truco en mi blog, yo uso el sumario automático q aun me da problemas con las paginas estáticas. Me muero de ganas por probar este truco, ya te contare luego. Según entiendo ahora ya no habrá problema en que las paginas estáticas aparezcan a medias o si? X cierto Oloblogger.. no se si sabes algo al respecto pero hoy intente publicar un comment pero no habia logueado en mi cuenta gmail, al escribir y comentar con cuenta google y pinchar publicar comentario sale un error. Luego tienes que volver cargar la pagina y volver a escribir... seguro q esto a un nuevo le costaria mucho mas no crees? salu2

    ResponderEliminar
  2. No RobX, no deberías tener problemas con las páginas estáticas si pones este código. El condicional que incluye salva ese caso.

    Sobre lo del comentario, es cierto que el formulario da a veces problemas, pero no sabría cómo solucionarlo. Pienso que es problema de Blogger. Un saludo.

    ResponderEliminar
  3. Hola que tal espero que este bien, muy bueno el tutorial pero prefiero el otro automatico aunque no tome encuentan el numero de letras que se necesita para que aparesca el "leer mar", ya lo probe, pero no me gusta que a los que tiene menos palabras los abra completo el post con la imagen queda feo, no se si me entiendes y no me gusta como quedan la minituaras aun si las ajusta no quedan como el del automatico de antes

    lo que yo quiero esque haga el mismo efecto como el otro automatico mostrando miniaturas ajustadas y que sin importar si es corto el post no muestre todo el post claro mostrando todo el texto dependiendo si es corto o no pero mateniendo la miniatura ajustada, no se si entendistes... saludos y gracias por el tutorial.

    PD: muy buena la pagina de donde sacastes la plantilla XD

    ResponderEliminar
  4. Debe ser por el tipo de plantilla que usas. Quizás le fuera bien la opción de imagen grande centrada, pero en fin...

    Sobre lo que comentas, si quieres que funcione igual que el anterior, pues no hay que hacer nada nuevo, sino usar el que se publicó antes. Lo que no entiendo es qué quieres decir con "imágenes ajustadas".

    ResponderEliminar
  5. osea que la imagenes se vean completas pero reducidas como en el automatico anterior, si quizas sono confuso xd

    ResponderEliminar
  6. Completas, pero deformadas salvo que uses siempre imágenes con la misma proporción alto-ancho. No olvides eso.

    ResponderEliminar
  7. Hola Oloman

    Pues yo me emocione con lo de "recorte", yo deseo y mucho un script que recorte la imagen en lugar de redimencionarla, ya que como sabes si la imagen es pequeña y se amplia considerando las dimenciones que le des en el script, no se ve muy bien que digamos, esto que propones lo logra?

    Tienes un demo?

    saludos y regreso ;)

    ResponderEliminar
  8. La demo la tienes precisamente en este blog. Sólo tienes que acceder a la página Inicio para comprobar cómo funciona el recorte. Si quieres comparar con las imágenes originales, sólo tienes que ir luego al correspondiente post.

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Oloman he querido probar como quedaría en mi blog, pero me daba error en la vista previa. Lo he probado tanto el blog oficial como en el blog de pruebas y nada. Supongo que es mi plantilla. Me puedes dar alguna solución?

    http://elantepenultimomohicano.blogspot.com

    Emilio Luna

    ResponderEliminar
  11. No debe ser tu plantilla. Es más fácil que sea el código que puse, pero para ahorrarme un montón de trabajo, ¿me podrías reproducir el error exacto?

    ResponderEliminar
  12. El error que sale después del fallido intento de vista previa es:

    No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
    Mensaje de error de XML: The element type "b:skin" must be terminated by the matching end-tag "".

    ResponderEliminar
  13. Traducido al cristiano Emilio, que no se ha cerrado bien alguna etiqueta. Lo curioso es que hace referencia a SKIN y en teoría no deberías meter nada nuevo antes de ese cierre. ¿Podrías volverlo a intentar de nuevo? Si acaso, descarga tu plantilla e inténtalo en un nuevo blog de pruebas.

    ResponderEliminar
  14. :D Hola Oloman, ya lo probé y me encantó, solo hay que tener en cuenta el tama/no de la imagen, ya que si es menor a las medidas que se establecen en el script, se repite dentro del contenedor.

    Me quede con las ganas de que el enlace (leer más) tuviera una clase, para poder darle estilos :P ...

    Gracias y que tengas un estupendo día ;)

    ResponderEliminar
  15. Karla, yo sugiero este código, pero se puede modificar al gusto.

    Por ejemplo, en .miniaturas hay un background que especifica no-repeat para evitar lo que dices. En mi caso particular lo he eliminado porque prefiero que en el caso de imágenes pequeñas sí que se repitan. Me gusta más que ver una imagen diminuta en medio de un cuadrado. Pero como decía, cada cual que haga lo más le guste.

    Y con respecto a la clase para el leer más, tienes razón; se me olvidó incorporar ese detalle. Pero si lo quieres hacer, sólo hay que incluir un STYLE en la parte del SCRIPT dónde se define el valor de la variable "devolver".

    Lo voy a incorporar. Gracias.

    ResponderEliminar
  16. Ahora me he dado cuenta de que en el segundo estilo que propuse (imagen central grande) no incluí el no-repeat. Seguramente te referías a ese. Bueno, pues ya sabes lo que hay que hacer para que no se repita el fondo ;)

    ResponderEliminar
  17. Hola oloman, Uso este sumario desde hace algun tiempo, pero ahora puse en mi blog una imagenes en cada post con unas banderitas para seleccionar el idioma, Por lo que en el sumario, me salen las banderitas xD, No me atrevo a tocar el codigo javascript ya que no lo he usado nunca, Que deberia hacer para que el script seleccione la 3 imagen que se encuentre?? Ya que las dos primeras son las banderitas.
    Aqui dejo el blog.
    blog
    Gracias.

    ResponderEliminar
  18. Bueno, ya lo solucioné.
    Si a alguien le pasa lo mismo, modifiqué lo siguiente en el código:

    if(img.length>=3) {
    imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[2].src + ')"></a></div></div>';
    summ = sumario_img;
    }
    Con if(img.length>=3) Compruebo que como mínimo en el post, para que se muestre la imagen en el sumario, debe haber 3 imagenes.
    Y con img[2], selecciono la 3 imagen del post, ya que las dos anteriores en mi caso, son las banderitas de escojer idioma.
    Espero que sirva de ayuda si a alguien le pasa lo mismo,

    ResponderEliminar
  19. Fantástico Alejandro. Gracias por la aportación... y por ahorrarme el trabajo ;)

    ResponderEliminar
  20. Gracias a ti por esta entrada, Mi blog está mejorando considerablemente en su diseño gracias al tuyo.
    Saludos

    ResponderEliminar
  21. Hola Oloman

    Eres un crack, he estado utilizando tus trucos para mi blog y están geniales.

    Este de sumarios automáticos no hay forma de que me funcione, actualmente tengo instalado el de sumarios antiguos de tu blog y me va bien, pero las páginas no funcionan correctamente.

    Cuando instalo este nuevo, no me aparece el enlace de leer más.

    Hay alguna forma de arreglar el viejo para que las páginas se vean bien?

    La url es: http://mymusic-me.blogspot.com

    ResponderEliminar
  22. Hola Marc si el problema es sólo lo de las páginas estáticas, quizás te convenga ver esta entrada que se limita a solucionar eso.

    ResponderEliminar
  23. Perfecto, ya funcionan bien. No podía insertar un formulario y ahora ya si.

    Muchas gracias!

    ResponderEliminar
  24. Marc, de gracias nada. Son 250€. Admito pagos con tarjeta o mediante transferencia ;)

    ResponderEliminar
  25. Uso desde hace tiempo los sumarios automáticos que publicaste, pero me dan un problema en el blog Mis Fotografías: se reduce el número de entradas de la página principal. Sin embargo en los otros blogs no pasa. Cambié a una plantilla del diseñador, y sigo igual. Por supuesto he comprobado las variables de configuración.
    Ayudame por favor.
    http://lorienfotos.blogspot.com

    ResponderEliminar
  26. Lorien, no tiene nada que ver con los sumarios o el tipo de plantilla. Y lo peor es que no tiene arreglo. Sólo depende de Blogger y del peso de tus entradas.

    Más info en la segunda parte de esta entrada.

    ResponderEliminar
  27. Muchas gracias por esta entrada, la he implementado en mi blog y ha funcionado a la primera.
    Tienes cantidad de cosas interesantes para los blog. Felicidades!

    ResponderEliminar
  28. increiblemente esto solo me pasa a mi no encuentro esta etiqueta pero si encuentro donde cierra osea asi que no se que variables debo sustituir, uso una plantilla nueva que me ha dado algunos problemas aqui esta http://bit.ly/fBENJj no se entonces que agregar, gracias por tu ayuda

    ResponderEliminar
  29. mm el sistema de comentarios no me deja mostrar la etiqueta a ver si asi: data:post.body (evite los simboles mayo que y menor que.

    ResponderEliminar
  30. Dreamare, es que esa variable DATA se abre y se cierra en el mismo sitio: <data:post.body/>

    Esa que encuentras es la referencia.

    ResponderEliminar
  31. Te estoy muy agradecido Oloman! ya casi termino de arreglar mi blog como lo queria, por un momento me asuste porque el codigo no me funcionaba, pero era porque habia restos del script anterior que hacia los sumarios, pero ya lo resolvi, me gusta el hecho de que la imagen se corta en lugar de achicarla.
    Gracias otra vez!

    ResponderEliminar
  32. hola buenas tardes y gracias por la informacion de este blog es muy util, sin embargo y ya que llevo poco en esto no he podido encontrar informacion si puedo colocar un plantilla diferente por pagina la idea es que tengo la pagina principal, noticias,articulos para niños, en esta ultima quiero dejar una plantilla alusiva, muchas gracias.

    ResponderEliminar
  33. Hola, me ha encantado esto, pero em mi blog cuando lo he puesto ha pasado algo raro.
    Sale lo que tu has dicho pero un renglon mas abajo aparece de nuevo toda la entrada sin resumir.
    Te doy el enlace de mi blog para que lo veas:
    http://milegontx.blogspot.com/

    Gracias

    ResponderEliminar
  34. Alex, no puedo ver esa parte del código desde aquí, pero con seguridad es que has dejado un data:post.body de más, fuera de las condiciones. Compruébalo, quítalo cuando lo encuentres y con Vista Previa verifica que borraste el adecuado antes de Grabar.

    ResponderEliminar
    Respuestas
    1. Hola Oloman. A mí me pasa lo mismo y no sé qué hacer exactamente. Mi plantilla —Fantástico SA— del nuevo blogger incluye además muchos data:post.body y el efecto solo sale cuando pego el código justo delante de uno. Sin embargo, tras el resumen sale el post completo. ¿Podrías decirme qué línea quitar o qué parte exactamente tengo que sustituir por el código? Muchas gracias.

      Eliminar
    2. Hola Juan Enrique. No se trata de ponerlo delante del data:post.body, sino en lugar de él. Sustituir es lo que dicen las instrucciones de la entrada.

      Eliminar
  35. Hola oloman estas en tu blog por que no contestas mi preguntas?? o ya abandonaste tu blog??

    ResponderEliminar
  36. Rodrigo, sólo estoy medio ausente. Creo que ya lo habrás visto ;)

    ResponderEliminar
  37. Ya puse los sumarios ahora una pregunta como se edita leer mas osea lo quiero poner de este lado >> y un poco mas separado y tb le quiero cambiar el color y el tamaño

    http://seducevip.blogspot.com/

    este es mi blog por las dudas

    ResponderEliminar
  38. Tienes que modificar esta parte del código que se publica aquí:
    .leermas {
    /* Las propiedades que gusteis para el enlace */
    }

    Entre los corchetes hay que colocar las propiedades que necesites. En tu caso...

    .leermas {
    color: #990000;
    text-align:right;
    margin-top:10px;
    }

    ...por ejemplo.

    ResponderEliminar
  39. Hola amigo puse todo tal cual me dijiste pero a .leermas no le afectan los cambios, re repito los unicos cambios ke puede hacer son : aumentar el tamaño de leer mas (con font-size) y cambiar el color de fondo de letras.

    Con los condigos que me acabas de pasar no cambio nada

    ResponderEliminar
  40. tb te aclaro que no tengo el sumario casi definitivo tengo los codigos de este post

    http://oloblogger.blogspot.com/2009/06/post-en-forma-de-sumarios-leer-mas-en.html

    No se si cambiara en algo la modificicacion de .leermas pero lo aclaro por las dudas

    ResponderEliminar
  41. Prueba a añadir una a a la clase:

    .leermas a{
    color: #990000;
    text-align:right;
    margin-top:10px;
    }

    ResponderEliminar
  42. no amigo no anda agregando una a tampoco no sera ke tengo ke reemplazar en otro lado??

    ResponderEliminar
  43. .leermas solo anda font-size y el codigo para cambiar el fondo lo otro no cambia no se por que

    ResponderEliminar
  44. Rodrigo, sólo tienes esto y eso sólo hace cambiar el tamaño:
    .leermas {font-size: 16px
    }

    Pero creo que ya encontré el fallo. Esa línea debe llevar un punto y coma al final, tras el 16px. De lo contrario el resto no se interpreta bien.

    ResponderEliminar
  45. oloman pruebo asi tu codigo sin el font size pero no suerte efecto el font size no tiene nada ke ver en por que no anda lo demas del codigo por lo probe de varias formas y nada (sin la "a" con la "a" y nada, y tb probe sin el font-size) con esto me refiero a que la falla debe ser otra el agregado de la "a" no varia en nada

    .leermas a{
    color: #990000;
    text-align:right;
    margin-top:10px;
    }

    ResponderEliminar
  46. oloman vagabundia me ayudo a hacer los cambios y ya lo hice jejejeje es un groxo el tipo ese igualmente tu tb sabes mucho y gracias por tu buena onda

    ResponderEliminar
  47. Vagabundia es una máquina en esto Rodrigo, pero me pica la curiosidad en cuanto a conocer cual era el problema ¿lo explicas aquí?

    ResponderEliminar
  48. Rodrigo:
    Para cambair el color, debes agregarle la palabra !important:

    .leermas {
    color: #990000 !important;
    }

    margin-top y text-align no tendrán ningún efecto ya que es un elemento inline; si quieres alinearlo a l adeecha, debes transformarlo en un elemento de bloque; por ejemplo:

    .leermas {
    display:block;
    color: #990000 !important;
    text-align:right;
    margin-top:10px;
    }

    En ese caso, deja de tener el tamaño que tiene para ocupar toda la línea y abarcar el ancho del post.

    ResponderEliminar
  49. eso me puso y pensar que yo a su pagina no le daba bola por que su diseño es muy feo y pensaba que era un blog abandonado jajajaaj pero el tipo se las sabe todas, veo que hasta tu le consultas jajaja loco no??

    ResponderEliminar
  50. Así es Rodrigo. Vagabundia sabe mucho de estas cosas ;)

    ResponderEliminar
  51. hola de nuevo amigo una pregunta como hago para ke el texto salga mas separado de la imagen??

    ResponderEliminar
  52. Rodrigo, en .contemini, tienes que cambiar el valor del margen que te interese (margin:0px 0px 0px 10px;). Están en este orden: arriba-derecha-abajo-izquierda.

    ResponderEliminar
  53. Hola amigo como hago para que la imagen de sumarios definitivos se muetre como en el anterior sumario?? por que en sumarios definitivos la toma a la foto mas de cercaa, no se si me entiendes a que me refieroo

    ResponderEliminar
  54. Rodrigo, para no tener que alterar muchas cosas, tendrías que sustituir...

    imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';

    ...por...

    imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas"><img src="'+img[0].src+'" style="width:125px;height:125px;"/></a></div></div>';

    Pero como comento en la entrada, eso provocará que las imágenes que no sean cuadradas se vean distorsionadas. La única manera de que no sea así es "recortando" el cuadrado central de la imagen, que es precisamente lo que hace el código que presento como opción.

    ResponderEliminar
  55. gracias oloman sos un maestro disculpa ke sean tan molesto pero de verdad me da mucha curiosidad saber estas cosas

    ResponderEliminar
  56. amigo sabes como encuadrar, osea ponerle borde a: categoria, entradas populares, buqueda por autor asi como tiene esta pagina de este lado?? >>

    http://www.intercambio-elite.com/

    eso le quiero hacer al mio

    gracias por tu ayuda

    ResponderEliminar
  57. Rodrigo, prueba a atacar la clase .widget más o menos así:
    .widget {border: 1px solid #000000; padding:5px;}

    Si funciona ya sólo es cuestión de añadir las sombras y el resto de efectos que quieres.

    ResponderEliminar
  58. Hola olo!

    Vamos a ver, necesito que me digas que tengo que introducir en mi CSS para poder poner una imagen de fondo en el sumario del mismo modo que tienes tu esta:

    http://lh3.ggpht.com/_0eC4K-qZ7AM/SjwVrwGLFSI/AAAAAAAAHwE/PbxGxQagONA/sumariosfondo.jpg

    Mi web | www.elultimoduelo.com

    ResponderEliminar
    Respuestas
    1. Pues yo tuve que meter un montón de condiciones para formatear mis sumarios así y que todo quedara dentro del fondo (por ejemplo la fecha), pero un arreglo fácil sería meter una etiqueta style en este trozo:
      <div expr:id='&quot;summary-&quot; + data:post.id' style='background:url(imagen_de_fondo)'><data:post.body/></div>
      <script type='text/javascript'>createSummaryAndThumb(&quot;summary-<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>

      Eliminar
    2. Lo probaré y te cuento más tarde, gracias como siempre olo.

      Un abrazo.

      Eliminar
    3. Perfecto, funciona a la perfección olo.

      Un fuerte abrazo y gracias otra vez.

      Eliminar
    4. ¿Lo dudabas? XD
      Añade un padding:5px; tras el background y creo que te quedará mejor. Por cierto que tras el paréntesis del cierre se me olvidó un punto y coma (;).

      Eliminar
  59. Excelente post!!!

    Solo me quedan dos pregunta, me quedó el texto alineado a la derecha, como se puede alinear el texto en justificado?
    Y se puede cambiar el tamaño del texto?

    Lo usé acá: http://www.alquimiadelplaneta.com.ar/

    ResponderEliminar
    Respuestas
    1. Prueba con...
      .entry {
      text-align:justify;
      font-size: 14px;
      }

      ...y cambia lo que te convenga.

      Eliminar
    2. Muchas gracias Oloman!! :) Me sirvió mucho la data!

      Eliminar
    3. Oloman, una pregunta más... En algunos blogs me funciona el justificado y en otros no, tenés idea de porque puede ser esto? Acá por ejemplo, no funcionó (por más que le agregué lo que me indicás): http://www.tambiental.com.ar/
      En otro blog se justifico solo el texto, entonces pensé que tal vez tenga que poner "justify" en alguna otra parte del html, no se.
      Se que es un poco gral la pregunta, pero seguro más que yo sabés del tema! :P

      Eliminar
    4. Eso es porque cada plantilla utiliza unos nombres de clases distintas, aunque se trate del mismo tipo de elemento. En ese blog que me pasas, en lugar de .entry, mejor utiliza .post-body

      Eliminar
    5. EXCELENTE! ;) Gracias!

      Eliminar
  60. Gracias, he quedado muy satisfecho por los resultados obtenido con este code! Salu2 de Peru :)

    ResponderEliminar
  61. ola y si deseo colocar el enlace leer mas en post footer como lo hago ayudame :)

    ResponderEliminar
    Respuestas
    1. Se supone que en los sumarios mostramos sólo la información esencial para remitir al post completo. Esto es, un resumen de texto y una imagen ilustrativa como mucho. El enlace vale para acceder a esa entrada y si lo quieres poner más abajo en lugar de a continuación del texto, entonces deberás modificar esta parte incluyendo las propiedades que quieras. Para que salga más abajo le puedes añadir un display:block; y un margin-top:20px;, por ejemplo:

      .leermas {
      /* Las propiedades que gusteis para el enlace */
      }

      Eliminar
  62. Gracias, Oloman. Tendre en cuenta tus conejos.. x cierto, puedo enlazarte en mi blog roll ya que aki encuentro muy buena info y me gustaria que mi amigos conozcan mas de tu blog y asi, aprender tanto como yo lo estoy haciendo :)

    ResponderEliminar
    Respuestas
    1. Eso ni se pregunta. A todo el mundo le viene bien ser enlazado :D

      Eliminar
  63. Hola de nuevo Oloman :)

    Te quería preguntar una cosilla al respecto de este truquito. En mi blog, el de cocina (www.cocinaconbeyka.blogspot.com) está puesto este código, pero las imágenes son muy grandes y por tanto en la miniatura apenas se diferencia lo que sale en la foto. Me preguntaba si es posible que el "recorte" se haga sobre la imagen redimensionada. Por ejemplo, mis imágenes hacen 550 de ancho por 418 de alto, prácticamente siempre que sean horizontales.

    En lugar de que sea así, podría con el código redimensionar dicha imagen al 50% (275x209px) y de ahí hacer el recorte al tamaño de la miniatura? Así el recorte se haría sobre una imagen más pequeña y se verían más cosas útiles en la imagen.

    Es más o menos lo que usa blogger en las miniaturas de las entradas populares. Se ve la imagen cuadradita, sin distorsionar, cortada, y pequeñita. Mi problema es que no sé encontrar el código de este artilugio para compararlo, si no no daría tanto la vara por aquí!

    Muchas gracias, y perdona por este testamento!!

    ResponderEliminar
    Respuestas
    1. Nada que perdonar. Me aclaro más cuando describís bien el problema que cuando os quedáis cortos.

      Y la respuesta es... ¿viste esta entrada?

      Eliminar
  64. Hola Oloman gracias por el tutorial, yo uso los sumarios manuales de blogger, me funciona perfectamente cuando hago click en el enlace leer mas. Pero yo quiero que me funcione también con las imagenes, como hago para que cuando haga click en las imagenes también me muestre el post completo.
    Este es el código que uso para mi resumen.






    Ayudame por favor.

    ResponderEliminar
    Respuestas
    1. Este es el código que estoy usando:
      http://chicablogger.com/leer-mas-en-blogger-%C2%A1al-fin/
      disculpa el post doble.

      Eliminar
    2. Por lo que veo no usas ningún sistema especial, sino el de Blogger, incluyendo <!--more--> dónde quieres el corte del post. No hay ninguna forma fácil de incluir un enlace en la imagen, pues "de serie" llevan ya un enlace a la imagen a tamaño original.

      Sólo se me ocurre que se podría hacer una sustitución mediante un script, de manera que en página principal ese enlace cambie por la dirección de la entrada. Lo dicho, no sé si merece la pena.

      A mano si lo podrías hacer sin ningún código extra. Se trataría de que cada vez que creas una entrada y subes una imagen, a continuación cambies ese enlace.

      Eliminar
  65. Anónimo7/5/12, 2:44

    Hola oloman, me quedo padrisimo los sumarios pero los que son de imagen central. Lo que no pude hacer es quitarle las comas al leer mas, ya lo situe a la derecha pero las comas no las puedo sacar, quiero ponerle un boton con efecto hover y con las comas se ven feisimo.
    Ayudame a darle estilo.

    http://blogingweb.blogspot.com/

    ResponderEliminar
  66. Anónimo7/5/12, 2:47

    disculpe oloman ya lo solucione, pondre mi boton con efecto hover, si tengo problemas le aviso muchas gracias. Y a ti rodrigo, por decirme como editar el leer mas

    ResponderEliminar
    Respuestas
    1. No hay nada que disculpar. Al contrario. Se agradece que comentes que ya está solucionado para no trabajar inútilmente.

      Eliminar
  67. Muy bueno este post.
    Gracias.

    ResponderEliminar
  68. Bueno Oloman aunque veo que estás disfrutando de unas vacaciones, cuando tengas tiempo me gustaría que me dijeras ¿porqué en mis comentarios siempre sale &#39:s. Lo pregunto porque también me sucede en mi blog de prueba: agrplant1.blogspot.com.es

    Hace tiempo leí algo sobre éste tema y creo recordar que tiene algo que ver con el nuevo sistema Responder de blogger......
    gracias.

    ResponderEliminar
  69. No soy capaz de cuadrar la imagen y separarla con un margen del resumen del post.
    Lo pude hacer con IE8 pero en Chrome se jode otra vez.
    http://agrplant1.blogspot.com
    si le pegas un vistazo.... Gracias.

    ResponderEliminar
  70. Resuelto con padding por un lado y eliminando los box-xhadow por otro. Ya me funciona en IE8 y en chrome.
    Gracias.

    ResponderEliminar
    Respuestas
    1. No hay de qué ¡Tú solo! XD

      Sobre lo del 's, sale eso por qué así es tu nick: blogger's
      Ese apóstrofe no le sienta bien y lo que hace es transformarlo en su equivalente HTML.

      Por ejemplo, un & saldría como &amp;

      Esa es la razón, pero no le veo otra solución mas que cambiar de nick :(

      Eliminar
  71. Hola Oloman,

    Tengo un problemilla y es que ya llevo tiempo utilizando este código y me va muy bien, no sé cómo dejó de funcionar el enlace de la imagen hacia la entrada completa y no me importó al principio, pero ahora el enlace "leer más" lo he cambiado por dos flechitas y cuesta más acceder desde ahí por lo que me gustaría que la imagen también enlazara, lo que pasa es que no sé cómo se quitó, y aunque he vuelto a cargar el código entero no funciona, ¿qué me recomiendas?

    Muchas gracias :)

    ResponderEliminar
    Respuestas
    1. ¿Qué te recomiendo? Qué dejes de trastear la plantilla :)

      No, ahora en serio. Creo que he detectado un error en el código que os mostré. Por favor prueba a cambiar en el script esta línea:
      imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';

      ...por esta otra:

      imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></div></a></div>';

      Es casi igual pero no es lo mismo. Por favor dime si se resolvió el problema.

      Eliminar
    2. Muchas gracias Oloman, va bien, no, lo siguiente... :D

      Gracias y lo siento por ser tan cansina!! Un abrazo :)

      Eliminar
  72. Hola Oloman,

    Te quiero hacer una consulta, estoy intentando editar este blog (http://www.algo-especial.com.ar/) para que tenga los sumarios automáticos que explicás acá.

    Ya había seguiso tu explicación para otros blogs y me funciono a la perfección, el tema es que al ir al código html y buscar: no me aparece. Entonces no se donde poner el segundo cógico que indicás. No se si me podrías indicar en donde tengo que poner el código, con otra referencia.

    Gracias!! Ana

    ResponderEliminar
    Respuestas
    1. El segundo código es CSS, el estilo. Ese siempre (o casi siempre) va entre las etiquetas SKIN de la plantilla. En cualquier parte entre ellas.

      Eliminar
    2. ¿El segundo código es CSS?

      Yo hablo el código que hay que poner en lugar de"" (esta parte no la encuentro en en código html). Uso la plantilla Ethereal de Blogger.

      Si no aparece lo que te digo, no se por que parte tengo que reemplazarlo, me explico?

      Eliminar
    3. No me deja pegar lo que va entre " ", de todos modos, ya pude solucionar el problema!!! Saludos!!!

      Eliminar
    4. Si es algo distinto de un simple despiste, sería bueno que lo explicaras para que pudiera servir para otros.

      Sobre lo que intentaste poner y no salió, supongo que era código. En este enlace tienes un conversor para que en el futuro puedas pegar HTML en cualquier comentario.

      Eliminar
    5. Fue un simple despiste nomás. Buenísimo el conversor Oloman, lo voy a tener en cuenta para la próxima!.

      Ahora, te hago una consulta que tengo en mente desde hace un tiempo, y no se si nos quieras o puedas explicar como hacerlo. Me encanta como quedan las entradas resumidas en este blog, con diferentes formas rectangulares y la primera más grande. Comparte el truco! ;)

      Eliminar
    6. Algún día con tiempo lo haré con más detalle, pero básicamente uao el sistema de sumarios sin JavaScipt (ya publicado) y añado una condición para hacer el primer post distinto. Lo de las cajas distintas es cuestión de poner los posts (outer-wrapper) flotando y usar nth-child para ir cambiando alineación y tamaño. Casi todo está explicado aunque sea para otros fines y por separado.

      Eliminar
    7. Bueno, más adelante con más tiempo voy a ver si lo logro armar y te comento. Es cuestión de ponerse con tiempo, en general estas cosas se logran así.

      Te mando un saludo! y Gracias!

      Eliminar
  73. Oloman una pregunta. Ya puse los sumarios exitosamente, lo que sucede es que no puedo quitar en las entradas que se muestran con leer mas el molestoso "Sin comentarios". Voy a diseño y en entradas desmarco la casilla mostrar numero de comentarios, pero en vez que solo desaparezcan en los sumarios desaparecen tambien en las entradas completas... si me ayudas mi blog es..

    lagacetaturistica.blogspot.com

    ResponderEliminar
  74. Oloman tu crees que desde el codigo que brindas se pueda poner un fondo a las entradas, es decir solo al sumario, y cuando entre a las entradas completas que se vea normal sin ese fondo. Lo que quiero es ponerle un fondo plomo. Ayudame gracias

    ResponderEliminar
  75. un estilo como este mira con ese fondo plomo en los sumarios

    http://sadabombon.com/

    ResponderEliminar
    Respuestas
    1. Por partes Renzo...

      Para que no se vea el cartel de los comentarios tienes que buscar algo como esto que es lo que construye el numerito que sirve de enlace a los comentarios:
      <a expr:href='data:post.addCommentUrl'>
      <data:post.numComments/></a>

      Cuando lo encuentres lo tienes que meter dentro de un condicional para que sólo se vea en el tipo de páginas que quieras.

      Para cambiar el fondo de los sumarios tienes que modificar las propiedades de la clase .contemini. Para lo que pides tendrías que cambiar el color del background

      Eliminar
  76. Gracias Oloman, estoy muy perdido en esto de blogger.. no entendi apesar de que leí

    ResponderEliminar
    Respuestas
    1. Me tienes que perdonar, pero no puedo ser más específico cuando se tratan de casos particulares. Comienza con lo de modificar las propiedades de .contemini que eso es fácil.

      Eliminar
  77. Sigue sin poder ponerle fondo plomo.. lo otro ya lo solucione

    ResponderEliminar
  78. Los cambios que haga solo se aplican a la imagen no al texto...

    ResponderEliminar
    Respuestas
    1. No tienes el nombre/dirección de tu blog en tu perfil, por lo que no puedo ver lo del color. Es muy fácil, pero necesitaría ver tu blog para comprobar qué es lo que falla.

      Y otra cosa... Intenta usar el enlace "Responder" de los comentarios para poder seguir un hilo ;)

      Eliminar
    2. lagacetaturistica.blogspot.com ayudame por favor

      Eliminar
    3. Busca esta parte en tu plantilla y añádele ese background que ves aquí. Yo le añadiría también un padding:10px;
      .post {
      margin: 0 0 45px 0;
      background: #EEE;
      }

      Eliminar
    4. Gracias oloman, pero ahora tengo el ultimo problema, solo quiero que se ponga plomo el sumarios mas no en la entrada completa... se puede hacer eso?

      Eliminar
    5. Como cosa fácil (que no correcta del todo), a continuación del body pon esto:
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <style>
      .post {
      padddin:10px;
      background: #EEE;
      }
      </style>
      </b:if>

      O en lugar de #eee, una imagen tal y como ya hiciste.

      Eliminar
  79. Antes de nada, muchas gracias por todas tus aportaciones, nos solucionan muchos problemas a los novatos.

    Aun así, tengo un problemilla que no consigo resolver, no se si es porque no se puede hacer o porque meto mal el código.

    Tengo el código correctamente para poner resumen de la entrada pero, quiero que se muestre la descripción de la búsqueda configurada por mi en vez del resumen de las primeras lineas de la entrada.

    He cambiado "data:post.body/" por "data:blog.metaDescription/" pero no me funciona, no se muestra el resumen.

    Haber si me puedes solucionar mi duda. Muchas gracias

    ResponderEliminar
    Respuestas
    1. Es que no todas las etiquetas DATA funcionan en cualquier parte y esa creo que sólo lo hace cuando está en el HEAD, por lo que no te funcionará en el BODY. De todas formas si funcionara te saldrían todos los posts con la misma descripción, ya que esa DATA es para la descripción general del blog y no hay que yo sepa, otra para las descripciones individuales de cada post.

      Eliminar
    2. Gracias Oloman, creo haber encontrado otra solución, un poco más chapucera pero quizá funcione. Empezando el articulo con un span dispay:none y la descripcion que aparezca como resumen.
      Muchas gracias. Un saludo

      Eliminar
    3. Tal como lo has indicado no lo entiendo ¿quizás lo que que quieres hacer es incluir texto extra a modo de descripción en la entrada y ocultar el principal con display:none;? Lo que no sé es cómo piensas después hacer para que sí se vea el texto de la entrada y que se oculte el otro.

      Desde luego, si encuentras una solución para hacer lo que comentas me lo dices y lo publico, porque a mí no se me ocurre ninguna.

      Eliminar
    4. La cosa es añadir (como primer párrafo de la entrada) esa descripción que quiero que aparezca en el sumario ocultándola en el html de la entrada con display:none;.
      Una vez hecho esto, en la entrada completa no aparece el texto extra añadido pero, cosas de la vida, el código de javascrip del sumario si que lee ese primer párrafo extra y lo presenta como sumario de la entrada. Esta verificado porque yo ya lo estoy utilizando. Puedes echarle un vistazo http://www.aritzcalvo.com/.

      Un saludo

      Eliminar
    5. Ah, claro. Soy muy torpe... Es que no cai en que usas una función JavaScript para construir los sumarios. La función se ocupa de quitar todas las etiquetas HTML y lo que en otros casos seria una desventaja, en este concreto se convierte en una ventaja, pues efectivamente te quita el DISPLAY y entonces se ve tu "comentario oculto".

      Pero dependiendo de lo que quieras exactamente la solución te valdrá del todo o no, porquepuede que en otros sitios como agregadores basados en el feed no se vea.

      Eliminar
  80. Hace tiempo que utilizo este código en varios blogs y funciona perfectamente, mucho mejor que otras soluciones que utilizaba antes.

    Últimamente, en algún blog, he optado por la opción de mostrar una imagen encima del texto del resumen, ocupando todo el ancho, pero, ¿sería posible colocar dicha imagen encima del título de la entrada.

    Muchas gracias por tu ayuda y un saludo

    ResponderEliminar
    Respuestas
    1. Para hacer eso se me ocurre que tendrías que "hacer hueco" debajo de la imagen insertando un DIV vacío de alto fijo y luego "mover" el título de la entrada jugando con POSITION.

      Otra opción sería modificar este script para que no extrajera la imagen (también se podría ocultar con CSS) y que sólo sacara el resumen de texto. Luego habría que modificar la plantilla para añadir la DATA que contiene la imagen de cada post, justo debajo de la parte dónde se genera el título.

      No puedo desarrollarte todo el código porque eso daría para un post completo. Es sólo la idea sobre un par de sistemas que se me han ocurrido sobre la marcha.

      Eliminar
  81. Hola Oloman,

    Sólo quiero agradecerte este trabajo titánico que llevas a cabo con tu blog y decirte que aunque hace tiempo que te leo, porque me interesa lo que explicas, no me he atrevido nunca a lanzarme a la piscina con los cambios. Pero ahora, que por fin he empezado, parece que no puedo parar, porque tus explicaciones son fantásticas y hacen que entender este complicado lenguaje y saber qué estoy haciendo y por qué esa palabra va en ese lugar y no en otro, ha hecho que me quede enganchada... ;)

    Quizá pueda por fin tener un blog decente y a mi gusto. Si te apetece ver cómo va evolucionando la cosa, te dejo el link:

    http://vadepunto.blogspot.com.es/

    No es gran cosa todavía, acaba de nacer, pero espero convertirlo en algo potente y de paso, arreglar los otros que los tengo un poco mal. Todo se andará... De momento voy a darme un paseito por tus tutoriales sobre los sliders shows o similar, a ver si soy capaz de hacer algo, ya que las imágenes serán importantes en el tipo de blog que voy a tener.

    De nuevo gracias por ayudarme a entender mi blog un poco mejor y sigue con ello, por favor.

    Luna.

    ResponderEliminar
  82. Hola Luna. Mi intención no es sólo pasaros códigos de copiar y pegar, sino también eso que dices, que se entienda lo que se está haciendo. Es la única manera de luego poder personalizar cada cosa al propio gusto. Gracias por hacérmelo saber :)

    ResponderEliminar
  83. Hola Oloman,
    muchas gracias por esta entrada tan clara y útil. Me gusta mucho, pero tengo algún problema. Por ejemplo no me funciona el enlace por la imagen (he probado tb lo que aconsejaste a Beyka y no me funciona). También probé a obtener el texto alineado justificado como lo esplicaste a Anabel y no funciona ni con .entry, ni con .post-body. Luego me gustaría poner una miniatura de default para las entradas sin imágenes y me gustaría saber como hacer para que junto con el resumen de cada entrada no salgan los enlaces a otras entradas que normalmente salen cuando la entada está abierta (link within).
    Me podrías ayudar?
    Daniela

    ResponderEliminar
    Respuestas
    1. El problema creo que cuando expliqué esto había un solo data:post.body y ahora hay dos que se ejecutan alternativamente según una condición. Pienso que sólo has sustituido uno de ellos y entonces el segundo se solapa con las miniaturas y por eso no te deja "pinchar" en ellas.

      El texto justificado no te lo recomiendo, pero si quieres, sólo tienes que incluir esto en tu CSS:
      div.contemini + div {
      text-align: justify;
      }

      En un apaño rápido (no optimizado), lo que tendrías que cambiar para poner una miniatura en todos los casos, sería esta parte:
      var imgtag = "URL_DE_IMAGEN_PORDEFECTO";
      var img = div.getElementsByTagName("img");
      var summ = sumario_noimg;

      if(img.length>=1) {
      imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + img[0].src + ')"></a></div></div>';
      }
      else {
      imgtag = '<div class="contemini"><a href="' + enlacetitulo + '"><div class="miniaturas" style="background-image:url(' + imgtag + ')"></a></div></div>';
      }
      summ = sumario_img;


      Y lo de Linkwhithin lo explico en esta entrada. El problema se resuelve poniendo el código dentro de una condición.

      Eliminar
  84. Hola. Increíble tutorial, creo que por fin he encontrado donde pueden ayudarme a solucionar mi problema.

    Te sonará, es el de las miniaturas que se distorsionan porque no las publico en formato cuadrado. La plantilla establece que se publiquen a 200x200, pero sin hacer como en las entradas destacadas y en la versión móvil, que esas mismas fotos se ven bien porque las redimensiona como s72-c. En el sumario de los posts, como digo, las publica tal cual las tengo en las entradas, s600.

    Antes he leído que lo mejor era que publicáramos las fotos cuadradas para quitarnos de problemas, pero cómo tendríamos que hacer para conseguir un s200-c (ya he comprobado con Firebug que quedan proporcionadas y centradas) en las fotos del sumario.

    Ojalá puedas ayudarme, porque trabajo con varias plantillas y todas tienen el mismo problema.

    Esta que te hablo en concreto pertenece a www.trulyengines.com.

    ¡Gracias!

    ResponderEliminar
    Respuestas
    1. Hola. Para solucionar eso que comentas, en este script la imagen se muestra como fondo dentro de una caja con overflow:hidden. De esa manera es como si hiciéramos un recorte de la misma sin deformarla.

      Prueba este código y si no, puedes probar con forma de redimensionar.

      Eliminar
    2. Uf, no estoy seguro de entenderte, Oloman, soy programador autodidacta gracias a Google y a tu blog. De hecho, ya había mirado el otro enlace que me indicas. ¿Dónde tendría que tocar exactamente? ¿Qué código tengo que buscar y qué tengo que modificar o añadir? ¿Es posible una respuesta a este tipo de preguntas? ¿Se puede ser blogger siendo tan pez en programación?
      :)

      Eliminar
    3. Se puede ser Blogger sin saber nada en absoluto de programación. Son dos cosas distintas :)

      Nunca conozco lo que sabéis o no y por eso lo que publico intento que sean cosas generales, pero detallando cómo debéis hacerlo para conseguir lo que quereis. En este caso, si no te arreglas solo lo mejor es lo que te dije en primer lugar, que es que uses el código que se muestra en esta misma entrada porque una de las cosas que soluciona es precisamente la de las imágenes deformadas. Sustituyes el código que tienes por este y listo.

      Con Vista Previa podrás comprobar que todo va bien antes de grabar.

      Eliminar
  85. Oloman porfa una ayudita me va todo bien con este truco, pero cuando no hay mucho texto en la entrada no me la resume, mira mi blog:
    http://animeportadas.blogspot.com/
    la entrada http://animeportadas.blogspot.com/2013/11/anime-warriors-3-enhanced-edition.html
    no esta resumida que puedo hacer

    ResponderEliminar
    Respuestas
    1. Eso está hecho adrede con este código. Al principio del post puedes leerlo.

      Pero supongo que una vez que eliminaste tu blog ya no te interesará. Hubiera sido de agradecer que lo hubieras comentado tras tu pregunta. Así nos ahorramos tiempo todos.

      Eliminar
  86. Hola! Lo primero de todo felicitarte porque muchos de tus post me han sido de gran ayuda! Tengo un problema en mi blog, y no se como puedo solucionarlo. He estado leyendo este post, pero no me aclaro sobre como hacerlo... Te dejo el link de mi blog para que lo veas: http://siquipu.blogspot.com.es/ Se trata de la imagen en miniatura que se genera con cada post en mi plantilla. ¡¡Muchas gracias y saludos paisano!!

    ResponderEliminar
    Respuestas
    1. Olvidaste las palabras mágicas: "Paisano" ;)

      Bueno, no estoy seguro, pero pienso que el problema es que pusiste dos veces este código y además ambos no son exactamente iguales. Por otro lado, me pareció ver también dos veces la llamada a la función:
      createSummaryAndThumb("summaryIDSUMARIO","URL_POST");
      La otra llamada que estaba duplicada era igual pero sin el segundo parámetro, el de la dirección al post.
      Tendrás que repasar eso y lo mejor es casi que quites todo lo que tenga que ver con sumarios y que lo pongas de nuevo. Reiniciar vamos; la solución universal.

      Eliminar
  87. D: Edit: x_x Saludos Oloman. Ya ha sido un rato desde que comente por ultima vez en este post y parece que aun sigo peleando con mi blog. xD No me funcionaban los links para las miniaturas y nunca me di cuenta hasta hoy hahaha pero menos mal que la solución que le diste a Bekya funcionó para mi. Por cierto todavia tengo el Jamón que me mandaste la vez pasada.

    ResponderEliminar
    Respuestas
    1. Jajaja... Se te va a estropear si no te lo comes XD

      Eliminar
  88. Oloman, hace rato tengo ganas de preguntarte algo sobre estos sumarios automáticos. Te cuento, diseñé mis entradas con los sumarios en mi blog de cine, y también lo tiene una amiga mía en su blog. Las dos notamos que las miniaturas de las imagenes se modificaron, antes tomaban la primera imagen del post pero en la página de inicio se veía esa misma imagen más pequeña (similar a como se ven en el inicio de tu blog). Tiempo atrás notamos que ahora las miniaturas toman una parte de la imagen recortada. Lo que quisiera saber es si sabés porque sucede ésto y como se puede hacer para modificarlo, para que en el inicio se vean los cuadraditos con una miniatura, como se ve en tu blog.

    ResponderEliminar
    Respuestas
    1. Pues no sé exactamente qué es lo que pretendéis, pero es que lo que yo uso y este código tienen algunas diferencias.

      Prueba a ver si lo que quieres te sale añadiendo en tu CSS esto:
      .miniaturas {
      background-size: cover;
      }

      Eliminar
    2. Pude hacer los cambios que buscaba agregando: background-size: cover;
      Más allá de las diferencias en el código se ve justo como quería. Es un detalle, pero se ve mejor. Estas son las impresiones de pantalla del antes y después.

      Muchas gracias :)

      Eliminar
    3. Estupendo. De nada.

      Eliminar
  89. Hola, no se porque pero no me funciona.

    ResponderEliminar
  90. Ya he hecho lo que dices pegando los dos codigos y nada, me sale normal mi pagina de inicio, solo me muestra las entradas como siempre.

    ResponderEliminar
    Respuestas
    1. Hola. Hay dos data:post.body en la plantilla (o más a veces). Uno es para la plantilla móvil y otro para la normal. Posiblemente estés cambiando el que no es. Suele ser el segundo que aparece, no el primero.

      Eliminar
  91. Buenos días Oloman. Incorporé en mi sitio este código y funciona bien, pero me gustaría: 1) mostrar siempre una imagen por defecto cuando no exista alguna, tu solución no me funciona, 2) El target="_blank" no me funciona y 3) Estoy tratando de contemplar el JumpLink cuando ya existe en la entrada, funciona pero debo duplicar el código para la clase leermas, existe una forma de anidar llamadas a clases?

    Gracias por tus respuestas

    ResponderEliminar
    Respuestas
    1. Hola Gonzalo. Por apartados:
      1) La línea if(img.length>=1) es la que toma la primera imagen del post. Si añades un ELSE para el caso de que no haya ninguna, replicando dentro la misma estructura pero con una imagen fija podrás solucionar eso que comentas.
      2) ¿Para qué quieres un target="_blank" con enlaces a tu propio sitio? De todas manera sólo sería cuestión de añadirlo en los dos enlaces que hay en el JS, en el de la imagen y en el del "Leer más". En el primero sería así:
      <a target="_blank" href="' + enlacetitulo + '">...
      3) Esta pregunta ya no la entiendo del todo...

      Eliminar
    2. Oloman, muchas gracias por tu atención. Apliqué tus indicaciones y funcionaron, pero aún no logro que se muestre una imagen por defecto cuando no la hay en el post. Si tienes tiempo podrás ver el sitio: http://venezuela1pruebas.blogspot.com, yo llevo 2 meses aprendiendo a programar páginas Web y esto no he logrado solucionarlo

      Eliminar
    3. Ya vi el fallo. Dónde pusiste "imgdir.src" pon simplemente "imgdir" que es como has llamado a la variable que contiene la imagen por defecto. imgdir.src se interpreta como una variable distinta, que realmente no existe.

      Eliminar
  92. Hola Oloman. De nuevo gracias por tu ayuda. De todas las formas de hacer resúmenes o sumarios que he visto en la web y probado el único que respeta los videos ya existentes (cargados de forma directa o por artilugios como recarga a petición) es la rutina que aquí expones. Me gustaría usarla pero sigo sin mostrar la imagen por defecto, podrás ayudarme en eso?
    El punto 3 de mi primer comentario lo solucioné muy fácilmente... eliminé los Leer mas manuales que habían, no eran muchos.

    ResponderEliminar
    Respuestas
    1. No sé si viste mi comentario anterior. Vi tu código y estaba bien, excepto en lo que te dije, que habría que cambiarlo.

      Eliminar
  93. Hola quisiera saber como hago para establecer un tamaño determinado para las imagenes que se incluyen en los post quiero ponerlas de este tamaña 530x250 sin hacerlo manualmente

    ResponderEliminar
    Respuestas
    1. Eudis, eso sólo podría funcionar bien si todas las imágenes que subes son de esa misma proporción (que no medida), porque de lo contrario se deformarían. Sería algo así:
      .post-body img {
      width: 530px !important;
      height: 250px !important;
      }

      Eliminar
  94. Hola Oloman! LLegue a tu blog gracias a potro y ya casi tengo mi duda aclarada. Lo que me falta saber es si hay algún código para hacer que la imágen grande que pongo en la cabecera del resumen sea de la misma medida que la imagen del post. Se puede hacer esto? Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola. No es esa la idea de este código que puse, que precisamente lo que hace es todo lo contrario, ponerlas todas del mismo tamaño.

      Eliminar
  95. Hola Oloman, necesito tu orientación pues quiero cambiar "read more" para "leia mais"
    he procurado em todo template htlm, y no encuentro, será que tiene haver com css? como no soy perito en el asunto necesito su ajuda. gracias

    site: http://basemissionaria-saolourenco.blogspot.com
    email: misionbrasil@hotmail.com

    ResponderEliminar
    Respuestas
    1. Hola amigo, te respondo yo si querés. Apretá ctrl+f en la plantilla y buscá
      >Leer más<

      Cambia el leer mas que está entre los >< por el leia mais
      Espero te sirva mi respuesta.

      Eliminar
  96. Oloman puedo meter algún condicional o algo para que si el blog se ve en un movil el tamaño de las imágenes sea distinto? Necesito tu ayuda amigo. Muchas gracias!

    ResponderEliminar
  97. no se si lo estoy haciendo mal pero no me funciona

    ResponderEliminar
  98. ademas hay un problema tenia publicidad de adsense dentro de los post, y resulta qeu el codigo de la publicidad me aparece dentro del resumen.

    ResponderEliminar
    Respuestas
    1. Yo lo único que veo que sale regular es la miniatura. En lugar de 250px deberías usar 300px aquí:
      .miniaturas {
      width: 300px;
      height: 300px;
      background: no-repeat scroll 50% 40% #eeeeee;
      }

      Eliminar
  99. Muchísimas gracias por tu trabajo, Oloman, seguramente con tus artículos hayas salvado a más de uno que, como yo, del html básico no pasamos. 9 de cada 10 dudas que he buscado en internet sobre html y blogs me las ha acabado resolviendo tu página xD

    Respecto a estos sumarios automáticos tengo dos dudas:

    1) ¿Se podría cambiar el tipo de letra (fuente) del resumen? Normalmente escribo los post en una sin serifa y estaría genial que coincidiera con la del resumen en lugar de la predefinida.

    2) No sé dónde debo colocar el segundo código porque en mi plantilla me aparecen varios resultados al buscar y no consigo averiguar cuál es el que debo sustituir. ¿Puede que sea esta la causa de que mis miniaturas no tengan enlace? De todas formas me funciona bien así y puedo pasar sin ello, aunque estaría bien tener todas las funcionalidades que nos ofreces.

    ¡¡Muchas gracias por la ayuda!!

    ResponderEliminar
  100. Hola Kory. Gracias por tu devoción :)

    Las dudas:
    1) Se puede cambiar la letra simplemente añadiendo al selector .contemini un font-family con la fuente que desees.
    2) Tienes que cambiar todos los data:post-body que encuentres. Por si acaso no olvides guardar una copia de seguridad previamente y así lo podrás hacer sin riesgos.

    ResponderEliminar
  101. Hola Olo! hace años que visito tu blog, aprovecho que es la primera vez que escribo para agradecer tu trabajo, que muchas veces e utilizado.

    No se si es demasiado lio pero me gustaria añadir en el resumen junto al link de "more" un boton con un link externo diferente en cada entrada.

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Martín. Gracias
      Si ese link que quieres poner en cada entrada es diferente para cada una y además no sigue ningún patrón, no es posible programarlo. La base de automatizar cosas es que sean siempre con un mismo algoritmo.

      Eliminar
  102. Gracias por la respuesta!
    ¿Seria viable hacer que siempre mostrara un div concreto del post?¿y dentro de este div poner el enlace?

    ¿O mantener el sumario, pero eliminar la funcion de desactivar el html?

    perdona si he dicho algun imposible pero no conozco casi nada de javascript.

    ResponderEliminar
    Respuestas
    1. No sé si has pedido algún imposible porque la verdad es que no entiendo qué quieres hacer. Si quieres mostrar siempre una caja (div) concreta ¿cuál sería esa caja? ¿la primera, la última, alguna que tuviera siempre el mismo contenido en todos los posts? Y lo de "desactivar el HTML" no es algo que sea capaz de entender.
      Quizás lo mejor es que explicaras con un caso concreto qué quieres hacer.

      Eliminar
  103. Bueno, basicamente intento que en el sumario bajo la foto o junto al boton de leer mas, aparezca el div que tengo al final del post , que dentro trae un enlace externo. el div es de una clase concreta "linktext".

    la estructura de mis post es esta:


    ResponderEliminar
    Respuestas
    1. esta....

      *div class="separator" style="clear: both; text-align: center;"*
      *a href="" rel="nofollow" *img border="0" height="213" src="" width="320" />texto del post

      *div class="linkext" style="text-align: center;">
      *a class="button" href="" style="color: white; font-weight: bold;" target="_blank" title="Ir al sitio">
      *img alt="x" src="" style="border: 0px; box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px; right: 8px; top: 25px; width: 30px;" />Ir al sitio
      </a</div

      Eliminar
    2. Me parece entender que lo que quieres es que una parte concreta del post, que pones habitualmente al final, salga en los sumarios.

      Bien, si el enlace es en todos los posts el mismo, directamente lo puedes escribir en el JavaScript, dentro de la variable DEVOLVER.

      Sin embargo, si ese enlace (o caja completa) es distinto para cada artículo, entonces sólo podrás hacerlo mediante código JS adicional. Por ejemplo usando un id en lugar de class y con el comando getElementById. Con jQuery quizás sea más fácil.

      Esa es la idea, aunque habría que desarrollarla.

      Eliminar
  104. Oloman:
    Ayuda por favor!
    Necesito cambiar el texto de 'Read More' de las entradas. No encuentro la forma de hacerlo en la plantilla.
    Te agradeceré me comentes cómo hacerlo.
    La plantilla es: http://memento-creative.blogspot.com/

    Saludos y éxito!

    ResponderEliminar
    Respuestas
    1. Hola Jpz. Disculpa la demora pero anduve de vacaciones y otras historias.

      Esa plantilla que utilizas genera tus sumarios mediante un JavaScript y dicho JS está comprimido y codificado. Eso quiere decir que no se puede modificar y ahí es dónde tendrías que cambiar ese rótulo... si se pudiera.

      No tiene arreglo. Lo siento.

      Eliminar
    2. Gracias por la respuesta Oloman.
      Saludos!

      Eliminar
  105. Hola, Oloman. En mi plantilla uso también un sumario automático, pero quisiera saber cómo hacer para que las imágenes de cada sumario se puedan dar click y que abran el post al que corresponden así como en tu blog.

    Saludos

    ResponderEliminar
    Respuestas
    1. Pues si te fijas en el código de esta entrada, podrás ver mejor la manera.

      En principio a la función habría que enviarle un dato más que sería precisamente el enlace a la entrada:
      function createSummaryAndThumb(pID,enlacetitulo){...
      Pero claro, eso conlleva otros cambios y no es plan de desarrollar aquí un nuevo código sólo para ajustar el tuyo, así que como decía al principio, lo mejor es que te fijes en cómo lo monté yo y que ajustes el tuyo en consecuencia.

      Otra opción sería cambiar tu código por este, que ya has visto que funciona ;)

      Eliminar
  106. Creo que blogger ya cambió algo en las plantillas simples o no sé porque hice todo al pie de la letra y no me muestra el resumen... El truco ya no sirve :'c ...

    ResponderEliminar