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
Wikio
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
42 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.