
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 |

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. |
|
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 |
|
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:
|
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.
|

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
MEGAPACK
elige los 5 cursos que quieras |
CURSO
presentaciones con power point , infografías y líneas del tiempo
|
CURSO
Diseña tu imagen corporativa, branding y redes sociales
|
PACK
emprender |
75€
|
![]() |
22€
|
![]() |
50€
|
![]() |
65€
|
![]() |
Ver todos los cursos |