Cómo poner una imagen "leer más" en tus posts

¡Muy buenos días! Enseguida toca el post mensual en colaboración con Blogueras Motivadas, así que hoy os voy a enseñar lo necesario para que les saquéis provecho a los freebies de mañana.

Yo utilizo mucho la opción de "seguir leyendo" en mis posts más largos. Creo que es una buena forma de agilizar el blog y evitar que entradas muy largas cubran la mayor parte de la página.
Por defecto, lo que nos aparece al insertar un salto de línea es un enlace que dice "Más información". Vamos a ver los pasos que hay que seguir para cambiar ese enlace por una imagen.


1. Vamos a la plantilla HTML y buscamos este código: <data:post.jumpText/>.
(Recordad que para buscar en el buscador interno de la plantilla tenemos que hacer clic en cualquier parte del código, después pulsar Ctr+F, copiar el código que queremos encontrar y darle al intro).



2. Ahora, sustituimos el <data:post.jumpText/> por el siguiente código<img src='URL DE VUESTRA IMAGEN'/>. (Es importante que la imagen que pongáis tenga el tamaño con el que queráis que se vea).

Si queremos que la imagen nos quede centrada y no a la izquierda, añadimos la etiquetas <center> al inicio de la línea y </center> al final.

El código definitivo tiene que quedar más o menos así:



Guardamos la plantilla y listo. Cada vez que insertéis el salto de línea en una entrada, os aparecerá la imagen de "seguir leyendo" en vez de el texto.


Si os interesa el tutorial, os animo a que tengáis un poco de paciencia y esperéis a mañana para ver los preciosos botones de leer más que han diseñado las chicas de Blogueras Motivadas y las colaboradoras ¡Yo he diseñado cuatro modelos en distintos colores que mañana temprano verán la luz!

Un besico, os espero mañana (:

Post relacionados

15 Comentarios

  1. Muchas gracias!!! Muy práctico!!!

    Saludos
    setratadeviajar.blogspot.com

    ResponderEliminar
    Respuestas
    1. Gracias!! :D Mañana viene lo mejor...
      Un beso!

      Eliminar
  2. Anónimo6/5/14

    Gracias por el tuto nena! Besitosss

    ResponderEliminar
  3. Yo no pongo el cartelito de leer más, pero es una entrada súper útil :) Un besito!

    ResponderEliminar
  4. Hecho... creo que ha quedado genial! Gracias por el tuto :-)

    ResponderEliminar
    Respuestas
    1. Que bien que lo hayas puesto en práctica! *-* Me alegra que te haya servido Belén (:

      Eliminar
  5. Anónimo22/11/14

    Hola, muy buena entrada.Pero hay algo que no puedo solucionar;
    Cuando pongo el URL de la imagen (que tiene fondo transparente) Me pone esto:
    Se ha producido un error al analizar el XML, línea 1975, columna 205: The reference to entity "oe" must end with the ';' delimiter.
    Y no me deja guardar la plantilla. ¿Esto se puede arreglar? Saludos!

    ResponderEliminar
    Respuestas
    1. En que formato esta la imagen?? Si es de fondo transparente lo mejor es que la tengas en .png, no te olvides de poner la extensión en la dirección que pegues en la plantilla, es decir, pégala tal cual la hayas subido al hosting donde la tengas.
      ¡Revisa bien no te hayas comido alguna de las comillas ' !

      Si no logras solucionarlo me puedes mandar un correo con las capturas de como tienes tu código a ver si averiguamos que pasa (;

      Eliminar
    2. Anónimo22/11/14

      Bueno lo voy a intentar! Gracias.

      Eliminar
  6. no nos saleee!!! T_T
    __cuchus_

    ResponderEliminar
    Respuestas
    1. Mecachis! Mandadme un correo con lo que os pasa y veré que puedo hacer >.<

      Eliminar
  7. Anónimo2/5/15

    Hola! Hoy lo hice, y tuve un problema, cuando pongo Guardar, aparece esto: "More than one widget was found with id: HTML4. Widget IDs should be unique." No modifiqué nada más y lo hice tal y como lo explicas ¿Qué puede ser?

    ResponderEliminar
    Respuestas
    1. ¡Hola! Eso es que hay un error en tu código de plantilla, por eso no te deja guardar :$ Lo único que se me ocurre es que pruebes con, dentro de la platilla HTML, ir al widget HTML 4 (lo buscas con el menú desplegable de arriba) y ver por el código si tienes algún texto similar a lo del tutorial para después borrarlo. Haz copia de seguridad antes por si acaso, no la vayamos a líar...

      Es raro, siento no poder ayudarte mucho más ):

      Eliminar

Gracias por emplear al menos tres segundos de tu vida por aquí.
Me encanta leer vuestros comentarios *-*