Creative Mindly: Cómo poner imágenes de fondo en entradas

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.

Curso online: Mini WEB master

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 o fotor 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:

Cómo se ajusta la imagen

Vamos a picmonkey
Elegimos la opción CREATE A COLLAGE
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.
Cerramos todas las fotos... solo dejamos una.
Abrimos la imagen que queremos usar y la colocamos.
Ajustamos el largo para que nos quede perfecto.
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 de forma permanente

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.

Colocar la imagen de forma permanente

Si no queremos que aparezca siempre esa imagen de fondo, no hay problema. Podremos colocarla cuando nosotros queramos.

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 si queréis aprender más sobre diseño de blogs, cómo montar una tienda online o una web en blogger, os dejo por aquí los cursos que os pueden interesar. Todos son permanentes, incluyen decenas de vídeos, manuales, recursos y actividades