Botón Leer más para Blogger.




Cuando publicamos una entrada si es demasiado larga se vera demasiado extensa en la página de Inicio de nuestro blog, de está forma nuestros lectores tienen que verla por completo antes de poder ver la siguiente publicación. Para reducir espacio a la hora de visualizar entradas en nuestro blog y que queden más reducidas en espacio podéis aplicar el Código HTML Botón leer más que os compartiré, de está forma solo tendrán que hacer clic sobre el botón para ver la publicación completa.

Ahora veremos como aplicarlo a nuestro blog, para ello iremos a Diseño,Plantilla,Editar HTML.


Colocaremos el puntero del ratón en una zona en blanco de la ventana que se nos ha abierto ( la he dejado marcada con un circulo rojo en la imagen) y presionaremos las teclas  Control+F a la vez para que nos aparezca la barra de búsqueda adicional.



Ahora copiáis este código y lo pegáis  en la barra de búsqueda y presionar la tecla Enter:

<data:post.jumpText/>


Ahora lo eliminaremos presionando la tecla Supr, hacerlo con cuidado para no eliminar más de lo que necesitamos.


Ahora en su lugar pegaremos el siguiente código:
<p align='right'><a expr:href='data:post.url'><img src='AQUÍ LA URL DE LA IMAGEN'/></a></p>

Antes de pegar el código colocar la url de la imagen que os guste de las que os he dejado más abajo o de la que creéis en photoshop y subáis al blog.

Por último hacer clic en guardar plantilla.


Ya está preparado el botón leer mas en nuestra plantilla HTML, ahora cuando preparemos una publicación solo tendremos que hacer clic en el icono de la barra de herramientas llamado Insertar salto de linea su icono es como una hoja de papel rota.


Esto lo tendréis que hacer en todas las publicaciones donde queráis que aparezca la opción de Leer más.


En la vista previa no lo veréis aplicado pero si cuando lo publiquéis.

Estos son los botones, hacer clic sobre la imagen y clic en copiar la URL de la imagen y ponerla en el código.







































52 comentarios:

  1. Me resultó perfecto <3 Me ha encantado! gracias! <3 http://vidaymagiatips.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Me alegra que te sirva es mucho mejor con el botón se ven mejor las publicaciones.

      Eliminar
    2. Gracias, me quedó bárbaro.

      Eliminar
  2. Son preciosos!!! gracias a ti estoy aprendiendo muchas cositas para el blog que ando muy perdida ^^ y el boton de leer mas es precioso lo e puesto y queda lindisimo ^^ besos guapa!!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti.
      Siento la demora de responderte.
      No me di cuenta perdona.
      Feliz Navidad guapetona.

      Eliminar
  3. Respuestas
    1. Gracias a ti por la visita aunque tengo que aclarar que soy compañera XD.
      Un saludo

      Eliminar
  4. Hola :) Mi buscador no encuentra el link! ( ) He seguido todos los pasos y no puedo :(

    ResponderEliminar
    Respuestas
    1. Hola ;)
      Gracias por la visita a mi blog.
      No hace falta link para descargar las imágenes solo tienes que hacer clic sobre la que te guste y cuando aparezca en una ventana haces clic en ella con el botón derecho del ratón y clic en la opción guardar imagen como, la guardas donde quieras y ya la tienes descargada.
      Un saludo.

      Eliminar
  5. Gracias por tus tutoriales; estoy aprendiendo bastante y me está quedando un blog muy simpático.

    ResponderEliminar
    Respuestas
    1. Muy lindos los he pasado a visitar felicidades.
      Gracias por la visita vuelve cuando quieras.

      Eliminar
  6. Hola,tengo un problema...cuando quiero guardar lo cambio me aparece un mensaje de error...no se que habré hecho mal...

    ResponderEliminar
    Respuestas
    1. Hola muchas gracias por visitar mi blog.
      A tu pregunta pueden ser varias cosas pero seguramente sera por no poner bien el código HTML ya que te da error al guardar los cambios.
      Copia los códigos y los pegas en el blog de notas del pc y vuelve a copiarlos de aquí y pruebas a ponerlos en el blog.
      La otra causa puede ser que tengas dañada la plantilla HTML del blog y eso es muy complicado de corregir.

      Espero que lo hayas probado primero en un blog de pruebas si no es así inténtalo en un blog nuevo de pruebas a ver si puedes hacerlo, luego sigue los mismos pasos en tu blog si no se aplica es que la plantilla de tu blog principal esta dañada.

      Un saludo y ya me dirás si solucionaste el problema un saludo.

      Eliminar
  7. me sirvio muchisimo. haces buenos tutos... si quiero que en ves de image, salga un texto, como hago???

    ResponderEliminar
    Respuestas
    1. En el código HTML que comparto en el tutorial solo hay que pegar la url del texto que preparaste.
      Un saludo

      Eliminar
  8. Ah, y como haces para que los comentarios sin aprovacion no sean visibles?

    ResponderEliminar
    Respuestas
    1. Hola.
      Para hacer lo que me preguntas entra en la configuración del blog y selecciona entradas y comentarios.
      Aquí encontraras las opciones a elegir.
      Configuralo según te parezca.

      Un saludo y Feliz Navidad

      Eliminar
  9. ola mira yo en las entradas que publico automaticante se pone. leer mas ,pero tambien lo quiero poner en las paginas que creo en mi blogg.

    aqui dejo mi pagina me gustaria que te poseciones en UTILIDADES PC y despues a FULL y ahy veras como estan\

    http://pegasoz.blogspot.com/

    espero me ayudes

    ResponderEliminar
    Respuestas
    1. Hola creo que lo que sucede es que es una misma entrada añades diferente contenido. Tienen que ser entradas individuales para aplicar el botón leer más u que este aparezca.
      Un saludo

      Eliminar
  10. Muchísimas gracias!! Me sirvió!!!

    ResponderEliminar
  11. Gracias Lucia por tu ayuda he usado tus diseños y he usado el boton y me quedo perfecto...en realidad soy nueva en todo esto pero aqui estoy aprendiendo...mil gracias e invito a mi blog y me des consejitos..bendiciones♥ www.mujeresdeexcelenciausa.blogspot.com

    ResponderEliminar
  12. me dice algo de un error con src no sé que hacer :(

    ResponderEliminar
    Respuestas
    1. Hola siento haber tardado en responderte pero intente saber por que te ocurría y solo puede ser que no hayas aplicado el código bien en la plantilla del bog un saludo

      Eliminar
    2. Cambia la plantilla por sencillo y elige la de color blanco, modifica la a tu gusto y aplicale un fondo encontraras el tutorial por si no sabes en mi blog.
      Ahora intenta aplicar el código de leer mas , espero te ayude esto un saludo.

      Eliminar
  13. ¡Gracias, Lucía! Muy explicativa, eres el tercer blog que leo al respecto y por fin aquí entendí. Te estaré visitando seguido ;)

    ResponderEliminar
    Respuestas
    1. Gracias a ti por la visita y me alegra que te sirviera un saludo

      Eliminar
  14. woww mil y mil gracias. Dios te pague.

    ResponderEliminar
  15. Hola! Tengo un problema, nunca encuentro lo que busco en html
    Por ejemplo ahora en el cuadrito de búsqueda puse y no encontró nada ¿Alguna sugerencia?
    Gracias por la entrada de todos modos :) Besos

    ResponderEliminar
    Respuestas
    1. Sigue los pasos como están en el tutorial y no te saltes ninguno con esto no tendría que dar problema a no ser que no tuvieras puesta la plantilla sencilla simple y fuese otro tipo de plantilla que ofrece blogger para el fondo de nuestro blog.

      Eliminar
  16. Hola :D Tu blog me ha sido de mucha ayuda para personalizar el mio, he aprendido mucho.. GRACIAS!!!

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Con Photoshop o algún programa similar que te deje modificar la imagen.
      Un saludo

      Eliminar
  18. ¡Muchísimas gracias! Super bien explicado, en los otros sitios no me enteraba ^-^

    ResponderEliminar
    Respuestas
    1. Muchas gracias por visitar mi blog me alegra que fuera de tu ayuda un saludo y pasa por aqui cuando quieras XD

      Eliminar
  19. Holaa!! hace meses que ando buscando este tutorial y ninguno me serviaaa:c UN MILLON DE GRACIAS jajaja, se que la entrada es viejisima pero bueno, me ha gustado tu blog, si te interesa estas bienvenida en mi blog, un beso.

    ResponderEliminar
    Respuestas
    1. Hola gracias por la visita, si tienes razón esta entrada la publique en 2013 pero aunque cambien el formato de blogger sigue funcionando. Un saludo .

      Eliminar
  20. Gracias por el tutorial! Luego lo intento! Muac!

    ResponderEliminar
  21. Perfecto, detallado y bien explicado. Ya lo he agregado: http://duendebooksargentina.blogspot.com.ar/ •♦• Muchas Gracias!. ElDuendeUrbano.

    ResponderEliminar
    Respuestas
    1. Muchas gracias a ti por la visita y me alegro de que te sirviera, un saludo.

      Eliminar
  22. Hola no me ha funcionado... no he encontrado el texto en el html :(

    ResponderEliminar
    Respuestas
    1. Lo siento mucho, normalmente no hay problemas.
      Un saludo y gracias por la visita.

      Eliminar
  23. Llegue aqui de casualidad buscando esta información, muchas gracias por compartirlo, os agregare a mis blogs sin compromiso alguno, saludos y exitos.

    ResponderEliminar
  24. Hola! me ha ayudado mucho tu publicación.
    Soy novato en esto del blog y cuesta sobre todo cuando hay que tocar el HTML.

    ¿Me sigues porfi? https://unvoltioplanetario.blogspot.com.es/

    Gracias ;)

    ResponderEliminar