Cómo poner imágenes de fondo en entradas

15 oct. 2013


Ya veréis qué tutorial más chulo os traigo hoy. Seguro que a muchos os va a gustar la idea, especialmente a los cocinillas y a los amantes de los DIY. Quiero enseñaros cómo colocar en vuestras entradas una imagen de fondo... sí de fondo... sobre la que podremos escribir nuestros tutoriales y recetas. Por si no entendéis a qué me refiero solo tenéis que visitar el blog de Arleva's Cake o la entrada de colaboración que publiqué el jueves pasado.



Como veréis la imagen donde aparece la receta está integrada en la propia entrada, no es una imagen que yo haya insertado. Y lo mejor es que podemos escribir encima de la imagen en nuestra propia entrada. Es muy muy útil!! Y conseguiremos que nuestros tutoriales, recetas e ideas tengan un aspecto más homogéneo y que el texto se lea perfectamente.

A lo mejor ni te lo habías planteado, pero seguro que más de una vez has creado un cartel para escribir una receta o un tutorial, has escrito el texto... y al subirlo a tu blog la letra no se lee todo lo bien que te gustaría. Pues aquí tenemos la solución!! Tendremos un cartel único, precioso y solo nuestro y el texto se leerá perfectamente porque lo redactaremos en la propia entrada.

Si os apetece saber cómo hacerlo.... Yo os lo cuento. Por cierto, ayer lunes publiqué, así porque sí. Os anunciaba una novedad en el curso de diseño con Power Point y encima os enseño parte del temario del próximo curso en el que ando metida: diseño corporativo, especial Handmade. Ahora sí, os dejo con el tutorial. 

Este es el código que tendréis que pegar. Apenas hay que modificarlo... Solo la URL de la imagen que vayamos a poner. Nada más. Este código lo hice yo misma... Cogiendo ideas de aquí y de allá... y al final me salió. Me estoy convirtiendo en una geek en toda regla

El código
Os recomiendo que copiéis el código y lo peguéis en un documento de texto, cualquiera.

<table bordercolor="#ffffff" cellspacing="5" cellpadding="5" width="100%" background="#ffffff" border="0"><tbody><tr><td><p>Aquí va el texto de la entrada que escribiremos antes de colocar la imagen. </table> <div style="background:url(URL DE TU IMAGEN)no-repeat ; padding:50px;">
Texto de la entrada
</div>

La imagen

Ahora viene la parte más importante del tutorial: Diseñar una imagen que sea adecuada para nuestros tutoriales o recetas. Podemos diseñar varias imágenes similares para que todo sea homogéneo aunque no sea igual. Por ejemplo se me ocurre diseñar una imagen de fondo para las recetas dulces, otra para las saladas... Una imagen para DIY de costura, otra para DIY de reciclaje... Aquí lo que se os ocurra.

Ya sabéis que en mi curso os enseño a conseguir unos diseños monísimos que podréis utilizar como imagen de fondo para vuestras entradas. Yo ahí lo dejo... 

Partimos de la base de que ya habéis diseñado la imagen que irá en el fondo. Como recomendación general os digo que la hagáis de tamaño rectangular y que sea bastante grande para que no se deforme cuando la ajustemos. Todo depende de cómo de largo sea el tutorial que vais a preparar... pero más vale que sobre que que falte.

Yo os dejo aquí la imagen que utilicé la semana pasada y que  me servirá para explicaros esto.


En este caso, como se trataba de una entrada concreta... en la imagen puse también el título de la receta, pero esto no os lo recomiendo. Lo que queremos es conseguir una imagen base que podamos utilizar siempre que queramos... y si le ponemos el título pues solo lo podremos usar una sola vez. 

Ajustar la imagen al tamaño del blog

Una vez que tengamos la imagen diseñada tendremos que descubrir cuál es el ancho de nuestra entrada. Para ello vamos a usar un truquillo iremos a nuestro blog, a la página principal.
  • Pinchamos con el botón derecho del ratón sobre el texto de una de nuestras entradas y elegimos la opción INSPECCIONAR ELEMENTO. 
  • Veremos que nos aparece un sombreado en nuestra entrada y unos números justo debajo: ese es el ancho de nuestra entrada. 

Una vez que sabemos el ancho de nuestra página iremos a picmonkey para ajustar la imagen a ese tamaño. Ahora depende de vosotros crear una imagen que tenga el ancho exacto de la entrada o si decidís hacerlo un poquito más pequeño.

Yo os recomiendo que la imagen sea más pequeña que el ancho de vuestra entrada para que no quede algo monstruoso! O cuento qué tenéis que hacer:


  1. Vamos a picmonkey
  2. Elegimos la opción CREATE A COLLAGE
  3. En la parte inferior nos aparece el tamaño del collage. En el primer número ponemos el ancho de nuestro blog. El largo da igual... lo ajustaremos para que se vea bien nuestra imagen.
  4. Cerramos todas las fotos... solo dejamos una.
  5. Abrimos la imagen que queremos usar y la colocamos.
  6. Ajustamos el largo para que nos quede perfecto.
  7. Guardamos la imagen como PNG.
Ya tenemos nuestra imagen lista para utilizar. Ahora vamos a Crear nueva entrada e insertamos la imagen que acabamos de guardar. Le ponemos TAMAÑO ORIGINAL

Después copiamos la URL de la imagen. Para copiar la URL de la imagen solo tendremos que pinchar la imagen con el botón derecho y seleccionar la opción COPIAR URL de entre todas las opciones.



Vamos al documento de texto donde hemos pegado el código de arriba y sustituimos la parte amarilla por la URL de la imagen. Y ya está... la parte más difícil ya está hecha.

Colocar la imagen

Tenemos dos opciones: colocarla de forma predeterminada, es decir, que nos aparezca siempre en cada una de las entradas o colocar la imagen de vez en cuando. Yo os recomiendo más la segunda... pero os voy a decir cómo hacerlo de las dos maneras. La verdad es que todo depende de la temática de vuestro blog, así que haced lo que queráis. 

De forma permanente:
  • Vamos a configuración de nuestro menú blogger
  • Pinchamos en comentarios y entradas
  • Pinchamos en editar en la opción de Plantilla de las entradas
  • Pegamos el código completo.
  • Guardamos la configuración y listo
Esto hará que siempre que pinchemos en Crear entrada nos aparezca la imagen. De todos modos, si vamos a usar la plantilla siempre o casi siempre esta opción está muy bien. 

Si en algún momento no queréis que salga... Puede ser que un día escribáis algo que no tenga nada que ver con un tutorial o receta y habéis elegido la opción pemanente. Pues no hay ningún problema. 
  • Pincháis en Crear entrada como hacéis siempre
  • Antes de empezar a escribir pulsad HTLM de vuestra entrada
  • Borrad todo el código que os aparece, hasta que quede blanco.
  • Volvéis a REDACTAR y listo. 
De forma ocasional

Cada vez que queramos utilizar este tipo de imagen en una entrada copiamos el código, con la URL de la imagen que queramos y la pegamos en el HTLM de nuestra entrada. Es lo primero que haremos, antes de empezar a escribir. Una vez pegado el código, pinchamos en REDACTAR y seguimos con nuestra entrada.


No os asustéis si solo se ve un trocito de la imagen... si pulsáis enter veréis cómo aparece toda la imagen que habéis diseñado. Y ya estamos listos para escribir nuestra entrada. Podréis escribir antes durante y después de la imagen, añadir fotos con total normalidad. Es un detalle que os puede diferenciar del resto!!! 


Y esto es todo por hoy!! Todavía no tengo del todo claro de qué irá la entrada del jueves porque ha habido algún fallo de guión ;) Pero algo útil y bonito  seguro que cae! Feliz martes!
Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

31 comentarios:

  1. Qué bueno, justo lo que necesitaba!
    Muchas gracias, qué de cosas más prácticas nos enseñas, entre ciudad blogger para la estructura y creative mindly para el diseño... somos unos hachas del html !! (yo hasta hace no mucho tiempo me sonaba todo a chino...)
    besos

    ResponderEliminar
  2. Es un tutorial genial! seguro que lo aplico porque era algo que quería aprender :) y ya puestos, a mí lo que me gustaría aprender es a poner una imagen de fondo en la zona de las páginas (una fina, como si fuera un washi, pero el texto se puede seguir eligiendo y es independiente). Lo he visto en muchos blogs y queda genial, pero no tengo ni idea de cómo se hace. Seguí el único tutorial que encontré pero no me salió!

    Besos!

    ResponderEliminar
  3. Muchísimas gracias por el tuto!! Son todos geniales!!
    Bsitos!

    ResponderEliminar
  4. Me encanta!!! Lo pondré en práctica muy pronto. Gracias

    ResponderEliminar
  5. Super interesante!!! tienes razón! A veces haces un cartel y tienes que ir con cuidado con el tamaño de la letra para que al subirla como imagen se lea bien!!! Espero hacer gran uso de este truquito, es genial!!

    ResponderEliminar
  6. eres la "más mejor", me ha encantado, me lo voy a estudiar y seguro que lo uso
    mil gracias!
    besos
    Diana

    ResponderEliminar
  7. me parece una idea genial!! gracias por compartirla, seguro que la pongo en práctica en algún momento...
    Un besote

    ResponderEliminar
  8. Muchísimas gracias por este pedazo de tutorial =)

    www.ohfimmo.com

    ResponderEliminar
  9. Qué ganas tenía de que nos explicaras cómo lo habías hechoooo! Eres lo más de lo más!! Me lo guardo en favoritos para que no se me olvide!! GRACIASSSS!!!

    Nuestro blog: Con la realidad en los talones

    un besitooo!

    ResponderEliminar
  10. Vaya, un tutorial super útil, la verdad!
    Muchas gracias!

    Un beso

    ResponderEliminar
  11. Esto es digno de guardar y probar en cuanto pueda, muchas gracias preciosa!!!!!!!
    Un beso

    ResponderEliminar
  12. Que guay! Me ha encantado!! :)
    BesitoS!!

    ResponderEliminar
  13. Muchas graciasssss!!!!! Aprendemos mucho contigo!!!! :)

    ResponderEliminar
  14. Me encanta!! Justo esta semana queria subir una receta a lo mejor pruebo con este tuto.

    ResponderEliminar
  15. Pedazo tutorial!!!! Esto me lo tengo que estudiar con mucha calma.
    Muchas gracias!!!!

    ResponderEliminar
  16. ohhhhhhh me super encanta!!! a ver si tengo un ratillo y lo pruebo con una de mis próximas entradas :)
    gracias por todas estas ideas y tutoriales tan chulos!!!!
    Besines

    Alba, Niña Bonita Accesorios

    ResponderEliminar
  17. Interesante. Lo intentaré en algún momento.

    Un beso

    http://yoyomismaymiarmario.blogspot.com/

    ResponderEliminar
  18. gracias May por éste tutorial que ni me esperaba hacer esas cosas desde una entrada. Muy práctico y lindo!

    http://nadiafelizzola.blogspot.com/

    ResponderEliminar
  19. Muy muy útil, como siempre... cuántas cosas nos enseñas...

    ResponderEliminar
  20. Tus tutoriales son fantásticos!! Muchas gracias por ayudar a los que estasmos empezando!
    Por cierto, tienes un premio en mi blog! http://dosagujasyunsofa.blogspot.com/

    ResponderEliminar
  21. Un tutorial de los mas útiles, genial, seguro que lo voy a emplear. Gracias May, besos :)

    ResponderEliminar
  22. Qué tutorial más útil y creativo!
    Me he suscrito a tu blog para estar informada de lo que vas publicando.
    Muchas gracias por todo.

    Un saludo,

    Anne.

    ResponderEliminar
  23. Hola wapa, el tuto está genial y tu blog me encanta, pero el código que nos pones arriba para dejarlo fijo en la configuración de entradas del blog no funciona. Yo tenía una firma que me confeccioné en una página de internet con mi nombre pero quería cambiar la firma por una imagen, así que más o menos ya tenía idea de como se hacía. Pero al ir a insertar el código con la URL de la imagen, se me queda a medias, como cortada por la mitad y no centrada, como sí me ocurría con la anterior firma. Mira te dejo la dirección de mi blog para que veas la firma que tenía antes en un post anterior y la imagen que quiero poner ahora, que la he subido como una imagen normal. Es este:
    http://soandoconperros.blogspot.com.es/
    Si me pudieras ayudar te lo agradecería un montón. Besos¡¡ ;)

    ResponderEliminar
    Respuestas
    1. A mi me pasa que sigo los pasos como pone en el tutorial, y directamente no me sale ninguna imagen cuando copio el código en el html :/ ¿Why?

      Eliminar
  24. Está genial el tutorial... muy útil. Próximamente lo pondré en marcha. gracias ;)

    ResponderEliminar
  25. Después de un año este post sigue ayudando a muchas rezagadas como yo! Me ha encantado! además ahora de cara a la Navidad me va a venir súper bien para poner bonito el blog... Mil gracias!! ;D

    ResponderEliminar
  26. pos no me sale jo a ver qaue pasa gracias por el tutorial seguire intentandolo

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!