Leer más en Blogger… ¡al fin!
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 + "#more"'><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
Posts relacionados
Compártelo!
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 + "#more"'><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
74 Comentarios
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!
Ariaddna: Revisa que tu plantilla tenga la pieza de código correspondiente. Si no, agrégala
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
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.
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?
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!
por favor explicar con mas detalles donde puedo cambiarle el nombre (MAS INFORMACION)
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.
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
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!
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??????
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.
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.
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.
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!
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!
Muchas gracias!! Fue realmente útil.
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!
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!!!!!
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?
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!
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
Funciono al 100% Gracias!
GRACIAS ME FUNCIONÓ A LA PERFECCIÓN.. Y ADEMAS AHORA MI BLOG SE VE MEJOR Y CARGA MAS RAPIDO
una pregunta como hago para crear el boton de leer mas??
como colocar esos cuadruitos donde pones los codigos??