Leer más sin imágenes. Sólo texto. | Oloblogger No sé si ya funciona bien el artilugio del nuevo editor Blogger, que sirve para crear resúmenes de posts con "leer más" . Algunos...

25 de enero de 2010

Leer más sin imágenes. Sólo texto.

No sé si ya funciona bien el artilugio del nuevo editor Blogger, que sirve para crear resúmenes de posts con "leer más". Algunos me habeis comentado recientemente que todavía daba algún que otro problema, así que mientras se solucionan todos, se puede seguir usando el script que vimos anteriormente para este mismo fin.

Aquel código mostraba también una imagen en miniatura, pero por cuestión del propio diseño de cada cual, algunos necesitais que esta no se muestre. Es decir, que el "leer más" sea sólo para controlar la cantidad de caracteres a mostrar y de esta manera, la página Inicio y las de navegación (etiquetas, recientes/antiguas) sean sólo cómo los titulares de un periódico.

Esto es más fácil que lo anterior, porque lo que hay que hacer es precisamente quitar cosas del código original (el estilo para la imagen y las líneas que generaban la miniatura) y dejar sólo lo que nos interesa. Para instalar esto y que se queden vuestras entradas como en este ejemplo, hay que hacer lo siguiente:

Con Expandir plantillas de artilugios seleccionado, buscamos el </head> y justo antes pegamos este script (si lo teníamos ya, se trata de sustituir el anterior por este):

<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 = sumario_noimg;
var summary = imgtag + '<div class="resumenes" >' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
sumario_noimg = 300;
//]]>
</script>


El valor 300 de la antepenúltima línea es el que determina el número de caracteres a mostrar. Podeis cambiarlo por el que os convenga.

En segundo y último lugar, buscamos data:post.body y se sustituye por esto otro (este es igual que en la anterior versión, por lo que no habrá que incluirlo si ya teníamos instalado este sistema de sumarios) :

<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>
<a class='leermas' expr:href='data:post.url'>Leer más &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>


¡Voila! Resúmenes sin imágenes.

En el script he incluido la clase resumenes, que en un principio no come pan. Si no haceis nada más, los resúmenes saldrán con el mismo estilo que las entradas normales. Sin embargo, si quereis darle un estilo especial, esa inserción en el script os permitirá hacerlo tan sólo añadiendo ese selector con las propiedades que querais, en en la parte CSS. El del ejemplo tiene este estilo:

.resumenes {
background:#e1e1e1;
border:3px double black;
padding:10px;
}

¿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

50 comentarios :

  1. es muy bueno me ha resultado de maravilla desde hace tiempo llevo buscado algo como esto... pero no muestra la imágenes. verdad?

    ResponderEliminar
  2. No, precisamente este está diseñado para que NO se vean imágenes. Si quieres que se vean, tendrás que ver el tercer enlace del primer párrafo.

    ResponderEliminar
  3. Hola oloman. no me resp o no me di cuenta, como cambiarle el color a cada enlase de la barra de etiquetas? vos tenes en rojo cuando pones en mouse encima. Yo tmb lo quiero poner en rojo.

    Mi blog: rodrycompany.blogspot.com

    ResponderEliminar
  4. Ohhh... que milagroso es el mundo blogger... ¡un resumen!

    Saludos
    Doc,
    Crítico

    ResponderEliminar
  5. Rody.D, directamente no, pero indirectamente sí te contesté.

    Doctor, ¡buena ironía! :D

    ResponderEliminar
  6. ya vi, pero la lista ya las tengo hechas. Quiero cambiar el color rosa que aparece encima cuando pasas el mouse por el rojo. Viste mi blog? tendria q cambiar el color nada mas.

    ResponderEliminar
  7. ah y otra cosa, ya puse la flecha para ir arriba, pero como pongo el efecto de q se arrastre hasta llegar (como tenes vos) y no que te lleve directamente arriba.

    ResponderEliminar
  8. Simplemente busca el color #FF5092 en tu plantilla, que es el rosa y cámbialo por el que quieras. Yo uso #990000.

    Para lo de ir arriba con efecto suave, tienes que tener instalado Scriptaculous y eso posiblemente haría desaparecer tu gadget de Seguidores por un problema que actualmente hay.

    Si te sigue interesando, en esta entrada de Rosa lo tienes explicado.

    ResponderEliminar
  9. Gracias! ya lo cambie! pero puse el #EE0000. queda mas copado.

    Ups, porque se borra los seguidores? Que mal. entonces no lo pongo.

    ResponderEliminar
  10. Oloman, en mi plantilla no 565 aparece de fonde de las entradas y la sidebar un fondo blanco. Como hago para eliminarlo? xq me tapa parte del fondo! e intente hacerlo transparente pero no funcionaba.

    aca el link: http://galaxiapower.blogspot.com/

    ResponderEliminar
  11. no creo que esta pregunta valla aquí, pero no lo encontré buscando así que me pregunto si es que sabes como hacer un "paginador" como el de http://www.famajuegos.com/ porque aparece con todas las paginas y se ve mejor que solo diga entradas antiguas o en tu plantilla antiguo, de antemano muchas gracias.

    ResponderEliminar
  12. Rodry.D, lo tienes que hacer de la misma manera que antes, pero ahora tú solo. Localiza que número hexadecimal tiene ese color (con el cuentagotas de cualquier editor de imágenes, por ejemplo). Luego búscalo en la plantilla. Por último, cámbialo TRANSPARENT o directamente elimina la línea que forma el background de ese color si no hace nada más que eso. Vista Previa para comprobar que no te has cargado nada antes de guardar.

    Mexotopo, eso de que es mejor es opinable, pero has tenido suerte porque tengo a medias de redactar un post sobre cómo hacerlo ;D

    ResponderEliminar
  13. Ok Oloman, ahi lo pruebo. me baje hace bastante la foto que colgaste con todos los colores. Asi q el blanco es #FFFFFF.

    Que bueno q vas a hacer un post sobre lo que dijo Mexotopo, me viene al pelo.
    Saludos!

    ResponderEliminar
  14. Oloman: muchas gracias! la verdad que desde que conoci este blog pude mejorar un monton! Y gracias x tu ayuda! creo que tenes bien merecido el 1er premio de los 20 blogs.

    Ya saque el fondo blanco y hasta puse transparente el fondo. Te invito a que lo veas: http://galaxiapower.blogspot.com/

    Hasta luego!

    ResponderEliminar
  15. Me alegro de que haya funcionado. Saludos.

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

    ResponderEliminar
  17. Tengo un problemilla sin importancia: NO ME APARECE EL " data:postbody " en mi plantilla por ninguna parte!!!!

    Mi blog es --> www.solrac1bach.blogspot.com <--

    Te dejo un archivo con mi plantilla para que veas que no aparece por ninguna parte y que por lo tanto me he quedado en el paso 1º.

    Un saludo y gracias de antemano Oloblogger te pido paciencia que soy nuevo en esto. :)

    P.D: La Plantilla:. http://www.4shared.com/file/212513850/ad5a2b31/PlantillaXML.html ((DocumentoWord))
    http://www.4shared.com/file/212514446/c9ef7e98/PlantillaXML.html ((Descarga de plantilla de blogger))

    Con la que mejor trabajes, un saludo.

    ResponderEliminar
  18. Pues yo sí lo he encontrado Carlos :D Está detrás de
    <div class='post-header-line-1'/>
    <div class='post-body'>

    Seguramente no pinchaste en la casilla "Expandir plantillas de artilugios", por lo que viste sólo una parte de tu plantilla.

    ResponderEliminar
  19. aahhh claro es que yo lo buscaba directamente con "ctrl + f" y ponia "data:postbody" es decir copypasteaba lo mismo que pone en el post pero gracias por tu ayuda, ahora probaré si funciona.

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

    ResponderEliminar
  21. Funciona!!! si se pudiera, flechita verde :D. De momento tambn he probado lo de la nuve esa que se van moviendo los nombres pero con los enlaces "url" en lugar de las entradas, pero no me enlaza con nada, si que salen los nombres pero nada mas, como decoración no está mal =D me puedes echar un cable?

    ResponderEliminar
  22. Buenas mi kerido oloman en primera ESTA MUY CHINGON TU BLOG.. yeah se aprecia el trabajo t doy un 10 hermano.. Y me sirvio perfecto el codigo pero xfa ayudame lo q yo quiero es ocultar los videos y no las imagenes..

    No hay un codigo q especifique q solo los videos se oculten? xq yo si quiero que aparezcan mis imagenes pero los videos no..

    Xfa t enkargo me hace falta esa ayudadita contestame en mi blog xfa:

    http://cocke69.blogspot.com/

    D antemano gracias y q estes bn..!!

    ResponderEliminar
  23. JaJa ya le encontre pfff x fin... solo oculta los videos y no las imágenes esta algo complicado pero lo haye gracias d todos modos y si alguien d tus seguidores necesita esta ayuda dime y t paso la info ok!

    SALUDOS..!!

    ResponderEliminar
  24. No sé lo que has hecho, pero una forma sencilla quizás hubiera sido meter una subclase en .resumenes:

    .resumenes embed, .resumemens object {
    display:none;
    }

    De todas formas, si puedes comentar el sistema que has utilizado, seguro que será bienvenido.

    ResponderEliminar
  25. Puessss.... Tienes dos header-inner en tu plantilla; uno con una imagen puesta a saco con IMG (supongo que dentro del código de un gadget situado en cabecera) y otra como fondo de esa ID. Tendrás que quitar o el gadget imagen, o el fondo del gadget cabecera.

    ResponderEliminar
  26. cómo hago para que el texto en la caja quede justificado (izquierda y derecha)? Gracias amigo.

    ResponderEliminar
  27. Tendrías que utilizar la clase .resumenes que se explica al final del post. Allí incorporas un text-align:justify; y listo.

    ResponderEliminar
  28. y esto lo pego antes? después de?

    .resumenes {
    background:#e1e1e1;
    border:3px double black;
    padding:10px;
    text-align:justify;
    }

    gracias por la paciencia.

    ResponderEliminar
  29. Lo tienes que pegar dónde está todo el CSS (estilo), entre las etiquetas SKIN.

    ResponderEliminar
  30. te pasaste, funcionó!

    Sabes? tengo otro problema. Al crear una página el formato de "leer más" bloquea el texto completo; no se puede leer completo

    ResponderEliminar
  31. este es el blog http://goo.gl/2QbD . En otro post te pregunté cómo configurar la plantilla para que el carrusel aparezca sólo en el home, te agradecería me ayudaras, porque seguí las instrucciones del link queme enviaste y no resulta.

    Saludos

    ResponderEliminar
  32. Para lo primero
    http://oloblogger.blogspot.com/2010/05/para-que-no-aparezca-el-leer-mas-en.html

    Y para lo segundo, sólo céntrate en esta entrada
    http://oloblogger.blogspot.com/2007/12/mostrar-o-esconder-artilugios-en.html

    ResponderEliminar
  33. Gracias Oloman. Lo de "leer más" funcionó, seguiré intentando con "esconder artilugios". Lo último: si te fijas en el blog que te envié, cuando agrego gadgets aparecen lineas formando recuadros sobre recuadros, hasta hacer mínima la visualización del contenido (queda estrechísimo en el centro; lleno de esos recuadros). Me pasa con todo, videos, actualizaciones de twitter, etc. Un ejemplo (que no es tan extremo como en los anteriores casos) es la sección "Blog Archive". Espero tu ayuda estimado. Saludos.

    ResponderEliminar
  34. Creo que si eliminas el borde que hay en...

    #contents #main_sidebar div.widget div {
    border: 1px solid #2f2f2f;
    background-color: #2a2a2a;
    padding: 14px;
    }

    ...solucionarás el problema.

    Y... ¡no puedo estar de guardia 24h! ;)

    ResponderEliminar
  35. jajajaj, disculpa Oloman!!! Probaré, ahí te cuento. Gracias!

    ResponderEliminar
  36. Oloman, pude sacar las líneas, pero el contenido sigue apareciendo estrechísimo en el centro. Por favor mira el widget de las actualizaciones de twitter, un desastre, no sé qué hacer

    ResponderEliminar
  37. Eso ya es cosa del script del gadget. Creo que lo puedes arreglar si añades

    .twtr-widget twtr-widget-profile, #twtr-widget-1 {padding:0px !important;}

    ResponderEliminar
  38. creo que no es el script del gadget, por favor echa un vistazo cómo se ve ahora

    ResponderEliminar
  39. Me cuesta mucho interpretar por entero esa plantilla desde aquí, pero con Chrome me funcionó lo anterior. Concretando más, también me ha funcionado bien aplicando ese estilo a otro selector:

    .twtr-bd {padding: 0px !important;}

    Aquí lo puedes comprobar.

    Quizás esto te sea de utilidad:
    http://oloblogger.blogspot.com/2009/08/arreglar-la-plantilla-con-google-chrome.html

    ResponderEliminar
  40. pero lo agregaste después/antes de?

    ResponderEliminar
  41. no te preocupes, pegué el código directamente en la plantilla (no a través de "añadir widget" en elementos de página... está resultando. Gracias Oloman

    ResponderEliminar
  42. :D no lo dije, pero pensaba que sabías que lo que decía había que incorporarlo en la parte de estilo. Bueno, un problema menos.

    ResponderEliminar
  43. Me sale completa la entrada y después de que termina empieza de nuevo ): ya arregle lo de "300" y nada :/

    ResponderEliminar
  44. Andrea con la información que me das no sé de qué me estás hablando y ni siquiera puedo intentar verlo porque tu perfil no está disponible.

    ResponderEliminar
  45. Hola Oloman, Quisiera editar este blog: http://www.alquimiadelplaneta.com.ar/ para que aparezca como en SIngenio, entradas con y sin imágenes.

    El truco para ese blog lo saqué de: http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html

    Pero no me gusta que aparezca una imagen repetida cuando la entrada no tiene imagen. Preferiría que aparezca con solo texto en ese caso.

    Espero que me puedas ayudar! :)

    ResponderEliminar
    Respuestas
    1. Lo más adecuado hubiera sido que le hubieras preguntado a Potro, el de Ciudad Blogger, ya que ese código lo montó él y se lo sabrá de memoria. Pero bueno, la pregunta no es difícil de responder.

      Del script tendrías que quitar todas estas líneas:
      if(img.length<=0) {
      imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><a href="'+ pURL +'"><img src="http://lh6.ggpht.com/_dsEG33PDaHw/TSJuyxzIKkI/AAAAAAAAAgU/GP7fRmaI-5A/thumbnail.png" width="'+img_thumb_width+'px" /></a></span>';
      summ = summary_txt;
      }

      El problema, si se le puede llamar problema, es que como ese script está modificado, ahora no lleva la opción para que el número de caracteres a tomar cambie según el sumario lleve o no imagen. En este caso te saldrán los mismos caracteres por lo que en los sumarios sin imagen, el espacio que ocupará el resumen será algo más pequeño que en los otros.

      Echa un vistazo a las peculiaridades de este otro código por si te cuadraran.

      Eliminar
    2. Gracias por responderme!

      Si, pensé en preguntarle a él, pero finalmente te consulté a vos porque me gusta mucho el diseño de tus páginas. E imaginé que vos podrías orientarme bien.
      Lo que hice fue sacar el tutorial de Potro y usé el que vos me pasás "Sumarios automáticos". Quedó excelente, lo usé en varios blogs, muchas gracias!!!!

      Eliminar