SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

18 dic. 2013

Cómo poner el botón de "Leer más" en las entradas de tu blog (Blogger)

Vamos a aprender a poner el botón de Leer más en nuestras entradas, para que nuestro blog no se vea largo y nuestros lectores no tengan que bajar y bajar para encontrar lo que quieren.
Hay dos formas de hacerlo:
Si queremos nuestro Leer más en texto solamente, es la forma más sencilla o si la queremos con una imagen prediseñada como la que tengo yo.
Sólo texto leer más: Lo primero que vamos a hacer es ir administrador de nuestro blog y picar en Diseño, una vez en diseño seleccionamos Entrada y al pie vemos editar, hacemos clic y nos aparece lo siguiente:


Como vemos en la imagen lo que está envuelto en rojo es el texto que nos aparecerá, ponemos lo que más nos guste: Leer más, seguir leyendo, más información etc.… lo que queramos.
Guardamos y Guardamos muy importante!

Ahora nos vamos a Entradas y hacemos como si fuéramos a publicar una con total normalidad pero fijaros!: 
En el número 1 vemos el icono que al picarlo, nos aparecerá en nuestro post la ralla que vemos en el número 2.
Esa línea divide el post en 2 partes la de encima es la que aparecerá en nuestra página principal y la de debajo de la línea es la que no aparece en la página principal y solo será posible leer si damos a nuestro mágico botón de ¡leer más!

¿Entendido? Es decir esa línea es la que nos divide el post y sobre todo intentad ponerla en una parte que atraiga al lector, después de una pregunta o una propuesta para hacer un poco más de gancho.
Y ya tenemos nuestro texto de leer más.

Ahora vamos a hacerlo con una imagen prediseñada que obviamente ya habremos conseguido y subido a algún host como imageshack, dropbox, skydrive como hemos comentado en otros posts anteriores.

Bien nos vamos a Plantilla y hacemos un Guardado de seguridad por si metemos la pata, es muy importante hacerlo siempre que se toca el código de nuestra plantilla.

Pikamos en editar HTML, picamos con el cursor dentro del texto de html y apretamos las teclas CTRL y F a la vez nos sale una cajita para buscar y en ella buscamos este texto:

<data:post.jumpText/>

Cuando encontremos este texto en nuestra plantilla lo substituimos por este:

<img src="URL de tu imagen"/> (donde dice URL de tu imagen pondremos la url, dirección de nuestra imagen de leer más)

Ya está, guardamos plantilla y hacemos una entrada.
Allí donde queremos que vaya a aparecer el botoncito de Leer más haremos click en el iconito que hemos visto antes, el salto de línea y publicamos!
Ya aparecerá nuestro botoncito de leer más en nuestros posts.

Nota: Si queréis que aparezca en todas las entradas antiguas deberéis abrirlas una a una y poner el salto de línea allí donde queráis que aparezca el botoncito de leer mas. (Es una faena sí pero es lo que hay :P)

Espero que os haya servido de ayuda y que lo hayáis entendido todo. Para dudas ya sabéis coment!
Y si no tenéis dudas también coment! Ajajaj
Un beso.

19 comentarios:

  1. Mil gracias por compartir....tanto éste, como los otros que tienes.....que además se entienden muy clarito......es muy generoso por tu parte el tiempo que empleas en hacerlo.
    Gracias de nuevo
    FELICES FIESTAS

    ResponderEliminar
  2. y si la imagen tiene un fondo de color y nuestro blog tiene otro y queremos eliminarlo para que solo se vean las letras como hacemos?

    ResponderEliminar
    Respuestas
    1. Pues eliminando la URL de la imagen, dejándolo en blanco, vacío. Si solamente quieres que se vea el texto, haces solamente el paso 1 de este tutorial, dándole a Editar la parte de la entrada en Diseño de tu blog, y donde dice Más información pones lo que quieras, leer más o Sigue leyendo..lo que quieras que se vea.

      Si lo quieres como yo, que se ve texto pero no es el mismo que el de la entrada, tienes que hacerte una imagen transparente, un png con el texto que quieras y seguir los pasos del tutorial para poner una imagen en tu Leer más.
      :k

      Eliminar
    2. muchas gracias!! ya lo he conseguido :)

      Eliminar
  3. Hola Lireth! :D no sé que estoy haciendo mal, mmm.. lo subi a imageshack copie este link: https://imageshack.com/i/n13wlxp y lo puse donde dijiste pero me sale un cuadradito de imagen rota :( ayúdame please !!

    ResponderEliminar
    Respuestas
    1. ajajaja porque el link de la imagen está mal. https://imagizer.imageshack.us/v2/160x89q90/829/3wlx.png
      Ese es el link real de la imagen que quieres usar. Pon ese verás como funciona :P

      Eliminar
    2. :O !!! hehe, mi error°! :D gracias !!!!

      Eliminar
    3. hola...estoy de seseperada ...pongo este link https://drive.google.com/file/d/0B6ikqTdLDeheVXBXdElIUHZ6Vlk/view?usp=sharing ..pero sale un cuadrito de imagen rota ..o algo así...estoy que intento e intento..ayudame..;)

      Eliminar
    4. hola...estoy de seseperada ...pongo este link https://drive.google.com/file/d/0B6ikqTdLDeheVXBXdElIUHZ6Vlk/view?usp=sharing ..pero sale un cuadrito de imagen rota ..o algo así...estoy que intento e intento..ayudame..;)

      Eliminar
  4. holaaa cuando quiero poner una imagen en el codigo, me da error en el ''src'' del codigo ¿ que hago para que no me de error?

    ResponderEliminar
  5. Gracias me fue muy útil la información , soy nueva en esto y tus explicaciones son muy claras!

    ResponderEliminar
  6. como saco la url de una imagen?

    ResponderEliminar
  7. ya lo hice! :) pero como hago para que la imagen quede centrada ?? :/ http://lacrimosa-girl.blogspot.com/

    ResponderEliminar
  8. Hola, veras es que le doy a buscar lo de Jump Text y no me sale :/ si me pudieras decir una forma de solucionarlo te lo agradecería mucho ¡Gracias!

    ResponderEliminar
  9. Muy buenoo, pero y si quiero colocarlo a la derecha? xd

    ResponderEliminar
  10. Cuando busco el código ese en la plantilla no me aparece, y no sé porqué :/

    ResponderEliminar
  11. Ya he visto estas instrucciones en otros blogs,pero yo busco en mi html datapost jumptext y no me aparece... asi que no se donde insertar la url...

    ResponderEliminar