Cómo poner imagen "seguir leyendo" + EXTRA


¡Hola bohemios y bohemias de mis amores! Hoy estoy aquí para enseñaros a poner un diseño bonito para vuestro "Seguir leyendo". Pero claro, primero os tengo que enseñar a cómo ponerlo, ¿no? El extra no es ni más ni menos que una cosita que me propuso Esther, el blog Rumbo a lo desconocido; hacer sombritas en los textos para que quede con un poquito de relieve. ¡Comenzamos!

Para empezar tenéis que iros al editor donde soléis hacer los diseños, que en mi caso es Photoshop (si solo quiero un texto y poco más) o Illustrator (en el caso de querer algún dibujito o algo menos simple). Si sois principiantes y no sabéis muy bien cómo usar estos programas, os recomiendo a continuación tres webs en las que fácilmente podéis añadir imágenes, texto y demás de una forma rápida y bastante eficaz. 

Webs online fáciles para diseñar
  • Desygner: Este es genial, porque a parte de ser gratuito, ya te viene con herramientas muy similares a las que trae cualquier programa de Adobe, por si queréis empezar a entrar en materia.
  • Canva: Es la peste por lo general, porque es mencionarlo y mucha gente lo critica. Pero oye, que nos saca de cualquier apuro y ya tiene unos diseños hechos chulísimos, en los que le cambias el texto, color o lo que queráis y chimpún. 
  • Fotor: Es estilo Canva y aunque yo no suelo usarlo, no está nada mal tampoco. Eso sí, yo me quedo con Desygner si tengo que elegir, pero eso ya lo dejo a elección de cada persona.
*Os recomiendo mucho evitar webs y empezar a diseñar por vosotros mismos en Photoshop/Illustrator y programas más decentes, porque aprender nunca está de más y las webs como las que os he puesto digamos que no te dejan crear como tal, sino que adaptas algo que puede haber usado ya otra persona. Es mi consejito, ya cada uno que haga lo que quiera.

¿MEDIDAS RECOMENDADAS? 

*Esto es cuestión de ir probando, pero si os sirve, yo usé 200x75. ¡Ya me diréis!

Una vez tengáis el diseño hecho, es necesario subirlo a una plataforma y así poder copiar la URL de la imagen. ¿Cómo y dónde? 

Las webs que yo recomiendo son Tinypic, Mega o Mediafire, siendo esta última mi favorita sin duda alguna. ¿Por qué? Tinypic tiene el problema de que a veces la web cae y entonces la imagen desaparece (si os habéis metido en algún blog y falta algún icono, es por culpa de la caída del servidor donde la imagen está subida). Y con Mega tengo sentimientos encontrados, porque para descargar cualquier cosa es BRUTAL, y el almacenamiento, para el usuario que elige la opción gratuita, es genial. Pero en cambio esta web muchas veces me pone de los nervios, el enlace lo pones y la imagen no sale, o te cambia el tamaño cuando en otra web se queda con el que quieres y un largo etcétera que me hace querer estampar el ordenador. Por ello, Mediafire totalmente recomendado.

Copiar la URL de la imagen es tan fácil como subirla, darle a abrir imagen, click derecho, copiar URL de imagen. En el caso de Mediafire la subís, clickad para abrirla y al darle click derecho os saldrán opciones como la imagen que os voy a poner a continuación. La señalada es a la que tenéis que darle y llevaros esa URL a donde os voy a decir en un ratito. Seguid, seguid leyendo...


El siguiente paso es un poco raro, pero no es difícil ni mucho menos, ¿vale? Mantened la calma, porque hay que tocar el dichoso HTML. Para ello vamos a Plantilla, Editar HTML, click dentro del texto raro (no fuera, ¡eh!) y CNTRL+F (para los de Mac es Comando+F). Os saldrá un cuadrito como la foto que os voy a poner y añadís el texto que os dejo, pulsando después Intro.

<data:post.jumpText/>
Copiar esto

Y lo que acabáis de encontrar al poner en ese hueco lo que os he dicho que copiéis lo sustituis por lo siguiente: 

<img src='URL'/>
Copiar esto en caso de querer la URL sin más

<img src='URL' align='right'/>
Copiar esto en caso de querer ponerlo alineado, siendo right = derecha, left = izquierda y center = centro. Ya es cuestión de gustos, pero simplemente es cambiar el término por otro.
¿Qué hacemos con la URL de la imagen? Bueno, llegados a este punto tendréis que ir y copiar la URL de nuevo, que yo lo he explicado así porque iba unido al tema diseño. Lo copiáis como os he dicho y sustituís URL por el enlace que habéis copiado. ¿Bien hasta aquí? Pues perfecto, le dais a Guardar plantilla y os vais a X entrada, la que queráis, y encontraréis una herramienta que se llama "Salto de línea" (os dejo fotito, para que os compliquéis lo menos posible). Marcáis donde queráis que se produzca el corte de entrada y le dais a Publicar (así repetidas veces en todas las entradas que queráis, ya que si no lo ponéis, no se pondrá solo). Visitáis vuestro blog y veréis que os aparece vuestro diseñito y... ¡Ya está! Así de fácil es, y si no os aclaráis me lo decís en los comentarios y os ayudo con lo que sea.


¡EL EXTRA!

Como os he dicho, a petición de Esther, voy a deciros lo simple que es añadirle sombra a las letras, como suelo hacerlo yo. Os voy a explicar dos métodos, uno para las personas que usen Photoshop y otro que podéis usar en cualquier caso, con cualquier programa. 


En Photoshop, tras duplicar el texto, como os enseño en esa imagen, veréis que tenéis dos capas iguales. Es tan sencillo como clickar el ojo que veis en la foto, ocultar una de ellas, cambiarle el color y volver a darle al ojo. Tendréis dos capas iguales, que para dejarlas como si fuera una sombrita una de ellas, le dais a CNTRL+T y movéis con las flechitas a la izquierda, derecha, abajo o arriba (como os de la gana). Si hacéis lo que os digo tiene que quedar algo así:


Si queréis hacerlo más fácil, vais a la capa del texto (sin darle a duplicar ni nada), le dais doble click a esa capa y se os abre una pestaña. En ella, aparece como última opción Sombra paralela, elegís el color, distancia, extensión y tamaño y más que apañado. 

Ahora, para la gente que no usa este programa, es tan sumamente sencillo como duplicar ese texto, bien si os da la opción directa o bien escribiendo el texto de nuevo. A continuación le cambiáis el color, la ponéis arriba/bajo (donde os dé la gana) y la movéis con las flechas, como en Photoshop, hasta que quede como sombra. 

Muchas personas pensarán "¿y por qué no le doy a la opción de sombra en el texto?", pues podéis, claro que sí, pero es en el caso de que os quede más marcada y podáis elegir el color que queráis. ¿Bien?

👍👍👍

Y bueno, hasta aquí la entrada de hoy, si tenéis dudas comentármelo y espero que os sea muy útil este tutorial. Muy próximamente subiré otro tutorial. ¿Cuál os urge más?

¡Muchas gracias por leerme un día más!

Mieze 🐱

Comentarios

  1. ¡Hola Mari!

    Muchas gracias por el tutorial, mi blog o mi plantilla no me dejan cambiarlo por lo que desgraciadamente no puedo cambiar la foto ni nada. Ojala pudiera ya que el tutorial es completísimo y genial. ¡Muchas gracias igualmente!

    Besos😘

    ResponderEliminar
    Respuestas
    1. ¡Hola Alicia!

      Es una pena lo que pasa con tu plantilla, pero ya sabes, si puedo ayudarte en algo me lo dices. Muchas gracias a ti por leerme un día más, solete.

      Un beso!

      Eliminar
  2. Genial, con estos tutos los bloggers customizamos nuestro blog.
    Yo es una de las partes que suelo cambiar a menudo, cada vez que creo una imagen nueva en mi cabeza, jijijiji. Igual que el botón de subir, he pasado por varios.
    Un beso bonita.😘

    ResponderEliminar
    Respuestas
    1. ¡Hola preciosa!

      Ay, pues me alegra mucho que te sea útil este post, desde luego que me gusta mucho hacerlo para vosotros, ya que esta sección es de mis favoritas.

      Un beso enorme :)

      Eliminar
  3. ¡¡Hola bonita mía!!
    Casualidad de la vida hoy me he puesto yo a cambiar el formato del blog, pero se me han resistido los iconos de las redes sociales (no me digas el porque) y me enfadé conmigo misma y lo dejé a medias.... En fin espero mañana levantarme con buen pie y que se me de bien el terminarlo.... La verdad que el diseño del tuyo es sencillo pero bonito y a mi son los que más me gustan. Gracias por la entrada y ya sabes que te adoro 😘

    ResponderEliminar
    Respuestas
    1. ¡Hola cosa guapa!
      Eres estupenda, en serio! Yo también te adoro, y lo sabes! Para lo que necesites, en serio, me hablas y te ayudo, que lo de las redes siempre pasa y es por cuatro tonterías que tienen solución.
      Un super beso :)

      Eliminar
  4. ¡Hola guapísima! ^^

    Antes de nada, muchísimas gracias por poner estos tutoriales, que yo nunca me entero de nada con los tutoriales de otros blogs y tú lo explicas todo a las mil maravillas *-*

    El tutorial del botón "Seguir leyendo" me ha parecido super fácil y espero usarlo pronto (de momento haré pruebas con el blog de pruebas jajaja) y ya estaré meses y meses diseñando la imagen JAJAJA

    Y el otro tutorial en realidad también es super fácil, lo que pasa que una se agobia así de primeras y no cae en la chorrada esa de superponer dos imágenes para crear la sombra ;_;

    En fin, que me guardo el tutorial y muchísimas gracias por traerlos ^^

    ¡Besos!

    ResponderEliminar
    Respuestas
    1. ¡Hola Esther!

      Pues me alegra saber que me explico bien, porque a veces me leo y pienso "pero qué dices, chiquilla...?". A mí me pasa como a ti, que me paso largo tiempo para diseñar, y hasta que no estoy contenta no paro. A veces vemos las cosas con otros ojos y pensamos que son suuuuuper complicadas, y luego es la cosa más tonta del mundo.

      Espero que te sea de ayuda este tutorial y gracias por proponerlo. Besos :)

      Eliminar
  5. me he guardado en favoritos este tutorial porque quiero rediseñar mi blog y me encanta lo que has dicho jujuju
    gracias

    ResponderEliminar
  6. Llevo tiempo queriendo poner una imagen para el 'seguir leyendo', por ello que no lo suelo utilizar mucho porque estoy esperando a modificarlo, y, aunque ya tenía algunas páginas guardadas para hacerlo, me guardo tu entrada también que está super completa *-* Y a lo mejor me resulta más fácil con tu explicación, que hay cada explicación por ahí... xD
    También me gustaría saber cómo modificar el pie de la entrada... Realmente no sé cómo se llama xD Donde están las etiquetas vamos al final de la entrada. Por ejemplo, cambiar la tipografía, color... eliminar cosas, añadir otras... Sé que no me explico muy bien y lo siento, pero, entre que se me da fatal el html y que esa parte del blog no la suelo tocar mucho... :P En fin, espero tu próximo tutorial con muchas ganas :D
    ¡Besos!

    ResponderEliminar
    Respuestas
    1. Hola bonita! Me parece perfecto y espero que te sirva de muuuucha ayuda, vale? Si tienes problemas con lo que sea, ya sabes cómo contactarme. Te he pasado por privado cómo hacer lo que me preguntas, así que si sigues sin aclararte, ya sabes! No te has explicado nada mal, yo te he entendido jajaja!
      Un beso enormeeeee!

      Eliminar
  7. Muchísimas gracias por el post, es super útil y está muy bien explicado.
    Un besazo!

    ResponderEliminar
  8. ¡Hola, bella! :)
    Como siempre, gracias por compartir tu sabiduría con todos nosotros jajajaja Por suerte, gracias a algún post loco que leí hace mil años, yo ya tengo puesto el botón de "seguir leyendo"... Aunque también te digo que si me preguntaras como lo hice... me pondría a llorar. jajajajaja
    Un besazo enorme, preciosa.

    ResponderEliminar
    Respuestas
    1. ¡Hola Rocío!
      Es un poco complicado si a priori no te explican cómo hacerlo, pero una vez te pones e investigas, dices "qué cosa más sencilla".
      Un beso enorme y gracias por ser tan genial. :)

      Eliminar
  9. ¡Hola Mari ♥! Que buena entrada para personas que quieran editar más el diseño de sus blogs. Son cositas pequeñas pero cambian muchísimo todo. Estoy 100% segura que mucha gente lo utilizará y le será útil. ¡Todos tus tutoriales son geniales! Aún sigo con el calendario y la verdad es que soy la persona más feliz del mundo ^^ (como te pasa a ti, te organizas más fácil usando el calendario del blog, como que ya mentalmente te propones una meta para tal día)
    Dicho esto, el extra está muy bueno también, como para completar un poco y hacer más larga la entrada
    Un beso enorme bonita, espero que estés muy bien ^^

    ResponderEliminar
    Respuestas
    1. ¡Hola Yuuki! Muy cierto lo que comentas del calendario, que últimamente estoy dejando el del mes pasado por si alguien quiere pasar a entradas anteriores y... Madre mía, qué caos llevo. Si no fuera por el calendario iría peor aún, aunque así me oriento este mes (a pesar de que iré cambiando fechas...). Me alegra que te gusten mis tutoriales. ♥
      Un beso enormeeee!

      Eliminar
  10. Hola, María Ángeles. Muchísimas gracias por tu tutorial. Eres una magnífica profesora. Me ha gustado mucho, mucho.

    Un abrazo grande y feliz noche.

    ResponderEliminar
    Respuestas
    1. ¡Hola Carmen! Muchísimas gracias a ti por tus bonitas palabras. Un beso :)

      Eliminar
  11. Mari me encanta cuando nos provees de nuevos tutoriales, por favor nunca dejes de hacerlo!!! ¡Te dejo un montón de besos! 🌸
    Ode | Sweet & Books

    ResponderEliminar
    Respuestas
    1. Nunca dejaré de hacerlo, reina! Un beso enorme! ♥

      Eliminar
  12. Hola!
    Te haz explicado super bien en el tutorial y además haz recomendado otras herramientas diferentes al photoshop para poder crear nuestras propias imagenes. A mi este "adorno" [por llamarlo de alguna manera] me gusta bastante porque me parece que es interesante mantener la intriga del lector para que se adentre en un post, además genera un contexto visual [para mi gusto] más ordenado.
    Besos

    ResponderEliminar
    Respuestas
    1. ¡Hola Isa! Ay, pues muchas gracias, de verdad. Me he intentado organizar lo máximo posible en esta entrada, y veo que ha tenido buenos resultados... ¡Gracias por valorarlo!
      Besos!

      Eliminar
  13. Hola Mari! Tenia siglos sin pasar por tu blog, exagero un poco lo se pero es que en serio hasta pena me da que tenia un montón sin pasar por aquí, ah pero siempre veo tus fotos e historias en Instagram. Y debo admitir que me encanta cuando cuentas sobre los libros que te llegan o cuando alguien en el blog te hace enojar, y al final pones un texto muy feliz jajaja. Tu entrada/tutorial me ha venido de maravilla por que últimamente he pensado en cambiar (de nuevo) todo el diseño del blog, aunque si no lo he hecho es porque se que me tomara mas tiempo del que dispongo últimamente. En fin que me viene muy bien para cambiar el texto de "seguir leyendo". En cuanto a lo del sombreado yo lo hago agregándole sombra y cambiando el color o el ancho a esta. Utilizo Photoscape ya que es el que tengo en la lap, pero me interesa mucho aprender a usar Photoshop. Ya para terminar pues gracias por describir paso a paso como hacer casa cosa. Te iras al cielo por ser tan paciente explicando (experiencia personal).
    Te mando un fuerte abrazo y un beso. Nos leemos guapa :)

    ResponderEliminar
    Respuestas
    1. ¡Hola Nadia! No te preocupes por no poder pasarte con tanta frecuencia como antes, se entiende perfectamente y por lo que podrás comprobar yo estoy igual que tú. ¿Me cotilleas Instagram? Ay, me acabas de alegrar la tarde/noche, porque la verdad es que me encaaaaaanta mucho explayarme por las redes. Mucha gente usa Photoscape jajaja, qué guay! Muchas gracias por tu bonito comentario y por dedicarme un ratito, preciosa! Besos enormes ♥

      Eliminar
  14. Hola preciosa, ya sabes yo soy super torpe en este tipo de cosas (que te voy a contar a ti, si mi blog está así de precioso gracias a ti, que eres una artista)
    Yo uso canva para los banners (ficha, sobre el autor, sinopsis y opinión personal) y no quedan tan mal, son mi toque personal para cada reseña.
    Tus tutoriales son super completos y muy fáciles de entender, de verdad eres la mejor.
    Muchas gracias bonita. Un beso

    ResponderEliminar
    Respuestas
    1. ¡Hola Laura! Ay, ya sabes que yo encantada de ayudarte, no? Pero vamos, que si algún día quieres ir manejando el asuntillo, ya sabes, los tutoriales míos suelen ser pesaaaos pero los explico medianamente bien. Y si no te aclaras, aquí estoy. Muchas gracias a ti. Besos :)

      Eliminar
  15. ¡Hola! Me encanta esta sección de tu blog, es genial, además el diseño de tu blog siempre está cambiando con cosas cada día más lindas ♥
    Realmente me ha parecido muy útil esta explicación y muy interesante, no conocía ninguna de las páginas web de edición, generalmente a la hora de editar algo lo hago en photoshop pero para cosas más sencillas capaz es útil conocerlas
    Un beso enorme bella, nos leemos pronto ♥

    ResponderEliminar
    Respuestas
    1. ¡Hola Clau! Me alegra muchísimo saber eso, preciosa. Photoshop es genial y me alegra que lo uses, porque es la solución a prácticamente todo lo que necesitamos para diseñar cosas del blog. Besotes!

      Eliminar
  16. ¡Hooolaaa! muchísimas gracias por la info ^_^. en mi caso, ya añadí el "seguir leyendo" en mi blog, pero me costó un montón encontrar un tutorial decente para poder hacerlo. Si algún día quiero cambiarlo, ya se que me tengo que pasar por aquí para no liarla parda hahahahhahaha ¡besis!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Ay, me parece genial, sabes? Y sí, la verdad es que cuesta encontrar este tipo de tutoriales, por eso intento que no sean unos que ya estén masivamente en otros blogs. No la liarás, verás! Besitos :)

      Eliminar
  17. ¡Hola! Como te digo siempre, simplemente genial, igual que todas tus entradas. Esta sección me encanta. Me parece muy útil y siempre está bien aprender cositas nuevas. Yo por el momento no me planteo poner un seguir leyendo, pero a lo mejor en un futuro cambio el diseño y lo hago.
    Me has descubierto varias páginas de edición que no conocía y que me pueden servir cuando GIMP o INKSCAPE decide darme problemas, así que gracias por eso.
    Un besazo hermosa!!

    ResponderEliminar
    Respuestas
    1. ¡Hola! Me parece perfecto y espero que cuando lo pongas en práctica no te dé problema alguno. Esas dos las desconocía, así que me las anoto por si las moscas, que es bueno tener muchas opciones. Un besooooo!

      Eliminar
  18. ¡Hola preciosa! Súper útil y muy interesante esta entrada. Conozco photoshop pero no 'illustrator', ahora mismo me voy a averiguar un poco más de ese programa y gracias por la recomendación de webs online de edición, las desconocía.
    ¡El extra es genial! Ya mismo me pongo manos a la obra para poner en práctica tus trucos.
    Besos

    ResponderEliminar
    Respuestas
    1. ¡Hola Tais! Pues Illustrator a veces es la salvación, porque es más para crear que otra cosa y vamos, nunca está demás intentar hacer algo nuestro, cosa que con Photoshop es más rarita (mi opinión, claro está jaja). Espero que te sea útil este post puesto en la práctica. Besos :) ♥

      Eliminar
  19. Mil gracias por hacer estos tutoriales, Mari! Me encantan! Aprendo cosas nuevas que no tenía ni idea (como el calendario..).
    La verdad es que yo el tema diseño o tocar la plantilla como que no; eso se lo dejo a GentleBellota, que lo hace estupendamente :) Pero nunca está demás apuntarse estas cositas para un futuro. Siempre me ha llamado la atención el "botón" de seguir leyendo así que me guardo este tutorial.

    PD. nosotros las imágenes del blog las metemos en Photobucket, nunca nos ha dado problemas.

    Un besote,
    ~El Imperio de las Bellotas~
    ~El Club de las Sebaduras~

    ResponderEliminar
    Respuestas
    1. ¡Hola guaaaaapa! GentleBellota es un máquina, no?? Desde luego que me encanta todo lo que hacéis para vuestros blogs. Me alegra muchísimo que te gusten mis tutoriales y de verdad, me anoto Photobucket!!! ♥
      Besooooos!

      Eliminar
  20. Eres un amor que post tan genial. Me ha resultado muy útil porque en esto voy muy pez y me gustaría rediseñar mi blog. Muchas gracias guapa lo voy a guardar en favoritos y cuando tengo un rato me pongo manos a la obra. Un besito preciosa.

    ResponderEliminar
    Respuestas
    1. Hola cielo!!!! Seguro que te queda un blog estupendo y ya sabes que para lo que necesites... Aquí estoy. Un beso enormeee! :)

      Eliminar
  21. Hola, pues la verdad es que estos tutoriales me vienen de perlas, a ver cuando me animo a aprender a hacer algo de photoshop y ver si consigo hacer 1/4 de todas las cosas increíbles que haces tú
    Besos
    Nos leemos

    ResponderEliminar
    Respuestas
    1. ¡Hola Cova! Qué mona eres, en serio! Seguro que te sale de perlas. A darle duro!!! Besos :)

      Eliminar
  22. ¡Todo perfectamente explicado! Me encantan tus tutoriales, Mari, sin duda espero por más de ellos cuando puedas.
    El botón de subir es ideal para los blogs, creo que yo descubrí cómo ponerlo en Ciudad Blogger y los méritos de los cartelitos se los debo a otros blogs que los tengo en mis créditos.
    Es genial que nos digas dónde podemos crearlos. Sigo con mi tour >>>

    ResponderEliminar
    Respuestas
    1. Hola Tamara! Muchísimas gracias, de verdad!! Haré más tutoriales y explicaré muuuuchas cosas que me comentáis que os gustaría que hiciese. ¡Te voy leyendo! Besos :)

      Eliminar

Publicar un comentario

¡OH! ¿Vas a comentar? No sabes lo feliz que me harás. Me pasaré por tu blog lo antes posible, siempre lo hago. Y si ves que no te respondo al comentario por aquí, es porque lo haré en redes sociales por privado o en un comentario en tu blog. ♥ ¡Mil gracias por hacerme feliz con tus palabras!

Entradas populares