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!
  • Alberto

    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.

  • Alberto

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

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

  • pameflu

    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!

  • nataliaferlo

    Muchas gracias!! Fue realmente útil.

  • On time 2.0

    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…

  • 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

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

    Un saludo

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

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

    • That’s the pecefrt insight in a thread like this.

  • Daniel

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

  • JP

    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.

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

  • 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?

  • lignux

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

    Gracias

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

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

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

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

  • Roberto

    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

  • Dai

    Funciono al 100% Gracias!

    • Holy Toeldo, so glad I clicked on this site first!

  • Gabriel Corporative

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

  • Danielurquia

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

  • Szokke

    como colocar esos cuadruitos donde pones los codigos??

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

  • Claudia

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

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

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

  • 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

  • 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

  • Rivery

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

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

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

  • Eze

    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 !

  • 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

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

  • Laura

    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.