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!
  • Hola, ke genial tu blog, ^^
    es la primera vez que entro,
    este post esta exelente, y tu blog tambien +10 xD!
    SALUDOS!

  • Hola! he seguido tus pasos con la opción 1 (Blogger in Draft) y efectivamente sale cortado pero sin un botón o un enlace “leer más” solo se expande al seleccionar el título de la entrada. Hago algo mal?
    Gracias 🙂

  • Gracias x el tip, en cuanto lo pruebe te diré como me fué, espero que bien y no como ariaddna que no le funcionó bien.
    Super blog, felicidades!

  • Hola Claudia,

    Antes que nada, quiero felicitarte por tu blog y por tus templates 😉

    Con respecto a las propiedades CSS del “Leer Más”, ¿en qué lugar de la plantilla debe colocarse el código que mencionás para lograr este efecto?

    Saludos.

  • Saludos ..ami me pasa lo mismo que a ariaddna

  • Problema solucionado haciendo la segunda paso……….gracias

  • Hola Claudia!

    Antes que nada, quiero felicitarte por tu blog y por tus excelentes themes 😉

    Con respecto al CSS del “Leer Más”, en qué lugar de la plantilla se debe colocar dichos códigos?

    Saludos!

  • Claudia

    Ariaddna: Revisa que tu plantilla tenga la pieza de código correspondiente. Si no, agrégala 😉

  • Claudia

    Pepiche:
    Gracias! Si miras tu plantilla, bajo la definición de variables, verás muchos códigos similares, del tipo:

    selector {propiedad;
    }

    Ese es el CSS de la plantilla. Por lo tanto, los cambios en CSS deben hacerse ahí.

    Saludos! 🙂

  • Claudia es verdad, me faltaba el código. ya funciona.
    Gracias ^__^

  • Gracias, Claudia, te agradezco 😉

    Saludos!

  • Gracias Claudia, me faltaba agregar el code antes del post-footer, pero me asalta una duda: Quiero cambiar el texto “Mas informacion” por otro, pero busco y rebusco y no encuentro

    Podrias ayudarme?

    Gracias adelantadas

  • Ya está solucionado:

    Fui a Diseño -> Elementos de página y en el Elemento Entradas del blog, le di editar y alli aparecio la opcion

    Un saludo

  • Claudia

    JaCoBo: Se cambia desde la Edición de Elementos 😉

  • Muy buenas Chica Blogger! Hace muy poco que he creado mi blog y tengo mucho que agradecerte a ti por todo lo que he aprendido con tu blog. Realmente mi blog no sería igual de no haber sido por algunos de tus tutoriales y los de otros blogeros.

    Tengo una gran duda, y lo he intentado pero ya no se como resolverla… Mi blog es una modificación de:

    http://www.freebloggertemplate.info/2009/09/pork-bean-blogger-template.html

    y al lado de los títulos tiene un pequeño espacio que dice la fecha en la que se escribió el post. El problema es que cuando escribo dos post o más el mismo día, solo me aparece la fecha en el primero, pero en los de abajo desaparece deformando el resto del título del post, como si solo pusiera la fecha en el último post del día.

    ¿Que parámetro debo tocar para que al escribir varios pst el mismo día me ponga la fecha en todos?

    Cualquier cosa que necesites que te ayude a ayudarme, solo pídela.

    http://www.DaQuintaBlog.net

  • Hola Claudia segui el post al pie de la letra, me salió el leer más, pero me mando una columna al footer, mi plantilla es de 3 columnas.
    en este enlace: http://leyendasdelosseresmagicos.blogspot.com/search/label/Seres%20M%C3%A1gicos (aquí no aparece la columna me la mando al footer)
    Cuando le doy al leer más por ejemplo en este enlace: http://leyendasdelosseresmagicos.blogspot.com/2009/07/los-seres-elementales.html#more (aquí si aparece la plantilla con sus 3 columnas)
    Al incluirle el código a mi plantilla ocurrió eso que desaparecío la columna, en la página principal tampoco sale, solo sale cuando clickeas en el título de la entrada. Quisiera saber que está mal en la plantilla para modificarla, si me puedes ayudar te lo agradecería.

  • Gracias Claudia, pero fíjate que hice exactemente lo que señalas, pero al insertar el “Leer más” me manda la Sidebar abajo del cuerpo.

  • Claudia

    DaQuinta: Lo que pasa, es que Blogger muestra la fecha sólo en la entrada que aparece primero en un mismo día.
    La única solución, es reemplazar el script completo, siguiendo tutoriales. Quizás también tengas que hacer modificaciones en los estilos CSS.

    Fecha tipo calendario en todas las entradas
    El uso del formato de la hora (timestamp) en Blogger

    Erika, Gerardo:
    Cuando pongan el “more”, fíjense que en la edición de HTML de las entradas las etiquetas “div” queden bien cerradas. Así evitan que la sidebar se vaya para abajo.

    Saludos! 🙂

  • Gracias Gerardo, hice eso que decis tenía una entrada mal editada, así entre desde blogger in draft y desde modo edición la edite al pie de la letra, hacia como un mes que tenía el blog horrible. Lo que no sé si es necesario volver a entrar desde blogger in draft para colocarle el leer más a otras entradas. Muchas Gracias

  • Hola, yo tengo el mismo problema que Erika y Gerardo, ya revisé que las div estuvieran bien cerradas y dde todas formas, el código me queda así:
    …afectadas son hijos e hijas, con 44.9%.

    Podemos suponer…

    no sé cual sea el error, me ayudas?

  • Hola de nuevo, ya descubrí como lograr que la sidebar no se vaya debajo de las entradas! se postea la parte visible de la entrada en Redactar con formato y todo, luego en html se escribe el luego se regresa al Redactar y se escribe la parte NO visible.
    Es secreto está en: JAMÁS dar clic ó modificar la parte visible del post una vez que se escribe el , si es así, ni hablar, hay que hacer una entrada nueva, (funciona redactar las entradas en el notepad y luego pegar para no perder info), no sé a qué se debe, pero después de casi un día de leer opiniones y hacer intentos, esto me funcionó, ojalá le solucione el problema a alguien más, hasta pronto.

  • no entiendo… quiere decir que lo tengo que hacer post por post?

  • Claudia

    Erika: Sólo es necesario entrar una vez a Blogger in Draft (en caso de que quieras activar el editor avanzado) 😉

    Kathy: Claro, eso era 😉 Si añades código en la edición de HTML de los posts, y luego vuelves al modo de redacción, se borra el código que añadiste. Por lo tanto, la solución es no volver al modo de redacción (pequeño detalle).

    Julia: Sólo tienes que añadir el “more” en los posts que quieras cortar 😉

  • Hola Claudia,

    felicitarte por tu blog y por tus plantillas que estan mu guapas, y comentarte que estoy utilizando tu plantilla earthlin two, y queria poner lode leer mas, he copiado el codigo como nos indicas y va perfecto excepto que en la plantilla se juntan la tierra con la hierba en cuanto hay un post con metido en su html. me podrias orientar un poco para corregirlo.

    muchisimas gracias

  • Hola claudia de nuevo,

    queria aclara un poco mas lo que sucede, al incluir el en un post el div outer wrapper desaparece y el footer wrapper sube. Si pinchas en eller mas se ve el post completo perfectamente sin fallos.

  • Vaya pasandome horas ya lo he descubierto.. si por ejemplo empiezas un parrafo con un div y colocas el more antes de cerrar el div se monta todo. Hey que cerrar todas las etiquetas antes del more.

    saludos

  • Mil gracias, me has ayudado muchísimo… Qué genal tu blog!!

    Un saludote!

  • radimer

    por favor explicar con mas detalles donde puedo cambiarle el nombre (MAS INFORMACION)

  • Claudia

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

  • Hola, yo creo el botón (leer más) mediante un enlace que le hago a la entrada en en concreto, lo que pasa es que cuando veo el blog, bien, sale lo de leer más, pero cuando le doy a leer más, me sale la entrada y me sigue saliendo también leer más. ¿Que puedo hacer? , como puedo crear un botón o cosa por el estilo?

  • Me vendria bien tener eso en mi blog, voy a intentarlo 😀 GRACIAS!!!!

  • Muchisimas gracias me super sirvio 😀

  • Muchísimas gracias me has salvado, no sabes la cantidad de tiempo que llevaba buscando este post, grrrrrrrrrrrrrrraaaaaaaaaaccccccccciiiiaass y feliz año.

  • samer samith

    utilice la primera forma y me parecio una chimba gracias claudia

  • Gracias chica blogger. Estaba a punto de rendirme, hasta que encontré tu ayuda. Lo he intentado con otros tutos, pero al parecer estaban obsoletos.

    Saludos. 😉

  • Vale, el otro dia me costó 3 horas mandar a tomar por culo el “leer más” hoy en 30 segundos, lo he arreglado. un 10 chicablogger xD

  • Karen

    Hola quisiera saber, Como puedo cambiar, Noce que toque que me salta +INFO, QUisiera cambiarlo y poner un boton que dice serguir leyendo , COmo hago, Por favor AYUUDAAAAAAA!

  • Jose

    oooh genial me funciono, sin cabezearme al fin =), muchas gracias claudia por este post.

  • muy buena ayuda para los blogeros…

    antes ocupaba un scrips para hacerlo pero este siempre moria y me quedaba mal ya que no servia….

    se podra incorporar algo para que el post se abra en la misma paguina sin crear una nueva con solo el post que tiene el leer mas??????

  • Claudia

    Tony:
    Creo que JMiur de Vagabundia.blogspot.com tiene incorporado un sistema como el que quieres. Qué tal si le preguntas? 😉

  • Claudia tengo una duda donde coloco el CSS para generar el boton porque me perdi en esa parte

    saludos.

  • martin

    Gracias, chica blogger!!!!
    Me sacaste de un pozo.

  • Estimada Chica-Blogger:

    No entiendo exactamente la ultima parte:

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

    ………………………………

    Donde hay que poner exactamente esta etiqueta?

  • Me refiero al “div style=’clear: both;’/”

  • Buenísimo Chica-Blogger este post me ha servido enormemente, todo muy bien explicado y ordenado.

    Eres un 7

    Saludos

  • Excelente tu página muy agradecido ya ke me ha servido de mucho +10

  • Muchas gracias me sirvio de mucho, te invito a visitar mi blog

  • Disculpa pero hice todo pero no y no sale como yo esperaba, no me deja guardar mi plantilla me dice “La plantilla no es válida porque la etiqueta “div” aparece dentro de la etiqueta “head”. Será porque uso Haloscan o que? Ayuda…=(

  • Gracias por la info! ha funcionado perfectamente!

  • Me sirvio de mucho, la info que usted nos dona.