Leer más en Blogger… ¡al fin!

Blogger, Tutoriales Publicado por Claudia en septiembre 9, 2009

Hace tres meses veíamos la inyección de “sospechosos” códigos en las pantillas de Blogger que nos hacían pensar la posibilidad de la inclusión de “leer más” por defecto. Hoy ya es posible, y sin tener que añadir javascript o preocuparse por la velocidad de carga del blog o el hosting del script *.js.

Se activa de dos maneras:

1) Cambiando al nuevo editor de texto enriquecido WYSIWYG, desde Blogger in Draft (Configuración / Básico / Configuración global / Editor actualizado), y seleccionando el ícono “Insertar salto de línea” del editor.

2) Manualmente, y sin necesidad de ir a Blogger in Draft ni cambiar al editor actualizado:

Texto a mostrar<!-- more --> texto a ocultar

Adicionalmente, puedes cambiar el texto del enlace (por defecto “Más información”) en en elemento de Entradas del blog, desde la Edición de elementos.

Incorporando en plantillas antiguas

Si tienes una plantilla creada antes de junio, y no logras que se corten las entradas, lo más probable es que a tu plantilla le haga falta la siguiente pieza de código:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>  
      </div>
    </b:if>

Añádela entre el cuerpo y el pie de las entradas (post-footer), como en la siguiente imagen:

Un poco de CSS para estilizar el enlace

Con CSS, puedes adornar en enlace “leer más” o agregar un botón. Por ejemplo:

.jump-link {
background: #FF0084;
padding: 1px 5px;
border: 1px solid #FF0000;
width: 70px;
}

.jump-link a {
color: #FFF;
text-decoration: none;
font-weight: bold;
}

.jump-link:hover {
background: #FF0050;
border: 1px solid #FF0000;
}

.jump-link a:hover{
}

Si quieres que el botón quede flotando a la derecha, puedes hacerlo con la propiedad “float:right”:

.jump-link {
float: right;
}

Y limpiando la flotación con HTML, pegando bajo el código que hace posible el corte de las entradas:

<div style='clear: both;'/>

Finalmente, si seguiste algún tutorial para poner excerpts en Blogger y prefieres incluir el “leer más” de esta forma, es cosa de retroceder los pasos uno a uno y añadir el código correspondiente al jump-link.

Más en: Blogger Buzz | Vía: Vagabundia

Compártelo!
89 Comentarios en Leer más en Blogger… ¡al fin!
  1. Alberto dice:

    Hola, he estado intentando hacer lo que explicas, parece sencillo, pero a la hora de hacerlo, blogger pasa de salto de pagina y lo que hace es hacer amontonarme todo el texto.
    Perdona la torpeza pero hay veces que la maquina me puede.
    Gracias por todo y muy bueno y sencillo post, espero que puedas solucionarmelo.

  2. Alberto dice:

    Hola, si quieres te paso el codigo html para ver si tu pudieras encontrar la aguja en el pajar.;)

  3. Antonio dice:

    Chicablogger, Claudia, te quiero! Con la segunda opción he tardado 2 minutos en insertarlo en mi blog cuando con otros tutoriales me he pasado bastante rato.

    Una pregunta más ¿Como puedo cambiar el “Más información” por “Leer más”?

    Gracias!

  4. pameflu dice:

    gracias, pero tengo un problem, tengo un video subido en el post, y se me va a linkear a mas informacion, comoo hago para que se quede en el posteo principal? gracias!

  5. nataliaferlo dice:

    Muchas gracias!! Fue realmente útil.

  6. On time 2.0 dice:

    Por Dios!!!..

    Querida amiga despues de luchar y estar de mal genio un monton de veces, y despues de pasar de no saber de HtML a entenderlo un poquin, he leido tu post , es uno muy sencillo aunque falta un poquito en lo del CSS para algunos 🙂

    la verdad lo he logrado t para que veas como ha quedado, chek mi blog.

    On TIme 2.0
    http://atiiempo.blogspot.com/
    “COMENTEN”,Ayuden, Compartan y Diviértanse…

    Muchas gracias de veras…

    Salu2…

  7. Javier dice:

    Muchas gracias por éste post, me ha sido de mucha ayuda.
    Es la primera vez que me pas por aquí, pero creo que no va a ser la última

  8. Alexander dice:

    Gracias por el codigo, ya lo he implementado en un blog y funciona a la perfeccion.

    Un saludo

  9. matypresidente dice:

    No pensé que algo tan útil fuera tan sencillo! Gracias por el dato, que funciona perfectamente!
    Desde estas lejanas playas mentales, Maty Presidente

  10. Nestor dice:

    Hola que lindo Blog aqui encontre lo que buscaba XD!! Buendia!

  11. Daniel dice:

    gracias!!!!!!!!!!!!!! me maté buscando esto leí cientos de lados modifiqué no se cuantas veces la plantilla pero no pude hacerlo y entro aquí y solo con cambiar a editor actualizado pude guau!!!!!!!! eso te hace un genio!!!!!

  12. JP dice:

    Hola Chica Blogger. La verdad he estado intentando incorporar esto de “leer más” a las entradas antiguas de mi blog y por más que lo intento, las entradas no se cortan. Tan solo se incluye una línea más de espaciado pero se puede ver todo el texto completo. He revisado el código html de mi plantilla y trae todo lo que indicas que es necesario, luego no hay que agregar nada. Sin embargo y como ya lo dije, esa funcionalidad de leer más no se aplica para las entradas antiguas que son más de 120. Espero puedas darme una mano con esto. Gracias y Feliz Navidad.

  13. E. Silva A. dice:

    Gracias!!!! tus aportes me ayudaron mucho a personalizar más blog:http://www.izaec.com/

  14. Flor de Maria dice:

    Claudia, perdón, quité todos los codigos que emplee para poner la opción leer mas, lo logré , intenté hacerlo en las entradas el corte, pero no me funcionó, lamentablemente conozco poco de todo eso de codigos, etc., y lo hago siguiendo instrucciones paso a paso y buscando entre tantas letras y numeros (pantilla html), así es que no logré nada y mis entradas siguen siendo extensas, auxilio, me ayudas?

  15. lignux dice:

    Realmente tus consejos son grandiosos. Muchas gracias. Hoy cree mi primer blog.

    Gracias

  16. mauro dice:

    HGolacon respecto a el famoso “leer mas” lo pude poner como vos decis aunque obvio aparece “mas informacion” pero no entiendo esto que escribis (Adicionalmente, puedes cambiar el texto del enlace (por defecto “Más información”) en en elemento de Entradas del blog, desde la Edición de elementos.) com hagfo para cambiar mas informacion por “leer mas” gracias.

  17. mauro dice:

    No se como cambiar color poner en negrita a “leer mas” gracias

  18. Marcos dice:

    Hola:

    Mira, tengo un problema. Una de las personas que colabora en mi blog, menciona un problema y es que en el editor de publicaciones, opciones como insertar “leer más” a él no le aparecen. Me he creado otra cuenta y me he dado permisos y en esta ocasión a mi si me aparece. ¿Puede ser con algo relacionado con su cuenta? ¿qué podemos hacer?

    Muchísimas gracias por tu atención y tiempo si puedes responder esta duda.

  19. Javier dice:

    Buen Blog 🙂

    Igual me quedo con el que trae el edito, es fácil de usar y es menos “complicado”, aunque antes igual utilizaba el famoso boton de “Leer Más” jejejej

    Te invito a pasar por mi Blog, mientras me doy unas vueltas por el tuyo.

    http://www.vediferente.blogspot.com

    Que estes bien.
    Saludos!

  20. Roberto dice:

    Muuucho más simple que lo que explicaban otros sitios. Muy sencillo, siempre estuvo ahí la opción y no podía verla, gracias por tu ayuda
    Roberto

    http://www.estudiosud.blogspot.com
    http://www.temployeternidad.blogspot.com

  21. Dai dice:

    Funciono al 100% Gracias!

  22. Gabriel Corporative dice:

    GRACIAS ME FUNCIONÓ A LA PERFECCIÓN.. Y ADEMAS AHORA MI BLOG SE VE MEJOR Y CARGA MAS RAPIDO

  23. Danielurquia dice:

    una pregunta como hago para crear el boton de leer mas??

  24. Szokke dice:

    como colocar esos cuadruitos donde pones los codigos??

  25. Raúl dice:

    Buenas. Navegando, navegando, he llegado varias veces a este blog para salvar algún bache en el diseño de mi blog, por lo que gracias. Sin embargo, ahora estoy en un punto al que no le encuentro solución… me he mirado los comentarios de esta entrada por si ya le hubiera pasado a alguien más, pero no he visto nada. Te comento, por si me pudieras echar una mano.
    En mi blog, tengo insertada la opción para leer más como una imagen, sin embargo, el link sólo es “pinchable” en la esquinita superior izquierda de esta, por lo que hace que sea, casi, inútil.
    Este es el código que marca el link:

    .jump-link {
    background:url(https://lh3.googleusercontent.com/-TSvKHYFY3tQ/ToCcEqbkjfI/AAAAAAAACrc/QXXbp4tchZg/diapositiva.png) no-repeat;
    width:168px;
    height:168px;}
    .jump-link a {
    width:168px;
    height:168px;
    font-size:0px;
    display:block;
    .jump-link {
    float: right;
    }

    Si me pudieras ehar un cable te estaría muy agradecido. Muchas gracias de antemano, y otra vez gracias.

  26. Claudia dice:

    Raúl: Te respondí a tu mail. Saludos!

  27. Raúl dice:

    Mil gracias. Visto y corregido. No veas si te has dado prisa… así da gusto, aunque si tengo nuevas dudas volveré a molestarte 😀

  28. Daniel dice:

    Hola Claudia, necesito tu ayuda hace tiempo que personalice mi blog con leer. Hago los sumarios de manera manual, me funcionan perfectamente, solo que cuando hago click en las imagenes no me funciona solo me muestra la imagen. Como para que cuando haga click en la imagen me muestre el post completo igual que cuando hago click en leer mas.

  29. Jaime dice:

    Claudia: Felicitaciones por tu blog..acabo de descubrirlo y lo encuentro genial. Y bueno quiero pedirte ayuda de como cambiar lo de “Mas información” por algo así como “Seguir leyendo” pero por mas que mire y siga tus instrucciones no encuentro donde…me puedes ayudar por favor? muchas gracias

  30. Jaime dice:

    Finalmente lo descubrí…como decías era diseño:

    Claudia
    noviembre 21, 2009
    Radimer:
    Haz click en “Editar” en el gadget de Entradas del blog, en Diseño/Elementos

  31. Rivery dice:

    graciasss!!no me funcionaba, añadí el código y ahora me va perfecto

  32. Alejo Méndez dice:

    Yo tengo el código del JumpLink y nada aún :S

  33. Tiquicia Vargas dice:

    Me tomo un buen rato pero ya pude siguiendo tus instrucciones, gracias!!!

  34. Eze dice:

    Hola, puse estos links en mis entradas del blog (tiene un fondo negro), en dos de mis entradas es visible el link con un tono gris pero en otra no es visible hasta que que lo marcas con el raton. no se como hacer que se vea como en los demas. respondeme esta duda 😀
    Saludos !

  35. Guillermo dice:

    Gracias Claudia por la informacion, me costo un poco configurar el color, pero para los que no han podido deben entrar a:
    -Plantilla
    -Personalizar
    -Avanzado-
    Al final del menu Add CSS y ahí pegas los codigos que puso Claudia

  36. Leerlaformamasbaratadeviajar dice:

    Te gusta leer? Entra aquí http://leerlaformamasbaratadeviajar.blogspot.com.es/ NO TE ARREPENTIRÁS!

  37. Laura dice:

    Enhorabuena por el blog.
    Como puedo hacer para que las entradas ya creadas se corten automaticamente si tener que pinchar en el boton de edición?
    Gracias.

Deja tu comentario
Tu Comentario