Sabemos que consejos para blogs hay muchos por Internet. Por eso Blogconsejo trabaja directamente en lo que tu quieras. Si quieres que escribamos sobre algún detalle, consejo o modificación para tu blog, ¡¡Escríbenos!!

21 mar. 2010

Leer más nativo en Blogger

En una entrada anterior veíamos cómo hacer el truco de leer más (entradas resumidas en la página principal, accesibles en su totalidad desde un enlace tipo seguir leyendo). Pero desde que Blogger implementó de manera nativa la posibilidad de hacerlo, ya no es necesario complicarse la vida con aquel hack.

Utilicemos el antiguo o el nuevo editor, eso es lo de menos, podemos hacer el corte donde mostrar el resumen y ocultar el resto, simplemente añadiendo <!-- more --> donde nos interese mostrar la entrada en la página principal:

PARTE DE LA ENTRADA A MOSTRAR
<!-- more -->
RESTO DE LA ENTRADA

Pero hay que tener una especial precaución al hacerlo. Si utilizamos formato para el texto (justificar o centrar el texto, por ejemplo), se generan en el HTML de la entrada unas etiquetas <div>. Estas etiquetas deben abrirse y cerrarse correctamente para evitar errores. Y nada puede cortarlas por la mitad. Si precisamente es entre dos párrafos que están justificados donde deseamos colocar el <!-- more -->, como en este ejemplo:

<div style="text-align: justify;">Texto visible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!-- more -->

Resto de la entrada. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Así, seguramente, nos dará errores al generarse la página, como que desaparezca la sidebar, que se escondan elementos, entre otras cosas inesperadas, que dependerán de la plantilla.

La manera de que esto no ocurra es cerrar la etiqueta <div> que haya antes del último <!-- more -->. El código quedaría de la siguiente manera:

<div style="text-align: justify;">Texto visible. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<!-- more -->

<div style="text-align: justify;">Resto de la entrada. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Pero si no solemos utilizar demasiado el editor HTML de las entradas, y no nos queremos complicar demasiado la vida, con justificar todos los párrafos uno a uno y luego añadir el <!-- more --> (este sí ha de hacerse en la vista HTLM) justo antes de publicar, sería suficiente, y haríamos, a fin de cuentas, exactamente lo mismo que con código.

8 comentarios:

  1. Pero en el "Insertar un salto de página" también aparece, cuando se arma una entrada en el editor. Mi pregunta es con este nuevo sistema de blogger como puedo hacer para que me quede el "leer mas" del lado derecho, o en el centtro, o que la letra sea más grande, o de otro color, o si podri ponerle una imagen? Gracias por el blog, esta buenisimo!

    ResponderEliminar
  2. Para eso requiere un poco de cambios en el código de la plantilla, de CSS en este caso. Requiere un poco de explicación, pero Chica Blogger http://chicablogger.com/leer-mas-en-blogger-%C2%A1al-fin/ ya lo ha explicado muy bien. Espero que te sirva
    (Me ha pasado el enlace JoseGDF, el creador de la entrada)

    ResponderEliminar
  3. Ahora entiendo el tweet de esta tarde, Lukas ¡je, je, je! (Aún no había entrado en el correo)

    La clave está en una clase llamada jump-link. Se trata de crear estilos para esa clase (.jump-link) en la hoja de estilos o CSS.

    Si fuera preciso, escribiríamos una entrada con más detalles. Pero el enlace facilitado por Lukas la verdad es que es muy completo, aunque requiere algo de destreza con el CSS.

    Un saludo y gracias por comentar.

    ResponderEliminar
  4. Anda José, mira que estas fatal xD xD xD

    ResponderEliminar
  5. hola, tengo un blog hace 1 o 2 dias mas o menos.. bueno, queria saber si me quisieran explicar como puedo hacr para que en vez de poner un lik.. poner "AQUI" y que al apretarlo valla directo a la pagina como hacen muchas..

    muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola

      ¿Un lik (supongo link) que ponga AQUÍ y que vaya a una página como hacen muchas?

      Siento decirte que no entiendo exactamente lo que quieres hacer. Si te explicas mejor...

      Eliminar
    2. Creo que se refiere a crear un link con una palabra cualquiera. Por ejemplo, este link.

      Si es esto a lo que PunkZombie se refiere, se hace con la etiqueta a de HTML. Es tan sencillo como esto (el ejemplo es el mismo que el link que he puesto en el párrafo de arriba):

      <a href="http://www.blogger.com">este link</a>

      Eliminar

Recuerda que puedes ponerte en contacto con nosotros directamente mediante otras formas de contacto.