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

como poner imagen de fondo o color de fondo entradas blogger

Quiero enseñaros cómo colocar en vuestras entradas una imagen de fondo o un color. Esto puede utilizarse de muchas maneras, por ejemplo en esta misma publicación he puesto en práctica cómo poner un color de fondo en las entradas. Yo suelo utilizarlo para crear secciones y que todo quede más claro y visual, por ejemplo. La opción de colocar una imagen de fondo no me gusta tanto, pero también os cuento cómo hacerlo. En esta ocasión, son muy pocas las modificaciones que tendremos que hacer.

Curso online: MiniWeb Máster

Resumen del curso

Esta web, donde estáis ahora mismo, es un blog de blogger modificado por mí, y en este curso te cuento todo lo que yo he hecho para transformar un blog de blogger en una web bonita, sencilla y práctica como esta.

	Inicio: Lo empiezas cuando tú quieras. Te apuntas y empiezas el curso.
	Final: El curso es permanente, no hay límite de tiempo.
	Materiales: Instrucciones paso a paso con código en documentos Word para que sea fácil de copiar y pegar, manual y vídeos explicativos.
	Vídeos El curso incluye 20 vídeos explicativos, más de 11 horas de información
	Información: Curso online, permanente, lo haces a tu ritmo. Necesitas internet y word. Te daré el acceso a la plataforma de cursos desde donde podrás seguir toda la formación.

Opción 1
Fondo con color en una entrada

Este código sirve para colocar un color de fondo en una entrada de nuestro blog. Nosotros redactaremos con normalidad la entrada. En el momento en el que queramos poner un color de fondo, sobre el que escribiremos texto, vamos a la vista en HTLM de nuestra entrada, pegamos este código. Cambiaremos el color, volveremos a la vista normal y escribiremos.

<div style="background: #fd3dba; padding: 20px;position: relative;"><div style="text-align: left;"><span>Texto de la entrada</span></div></div><br>

Cambios:

Cambiar el color

Los colores aparecen siempre después de "#".Para hacer los cambios de color iremos a esta página, elegiremos el color, lo copiaremos y lo pegaremos en su lugar. No os olvidéis de la "#" para que todo funcione bien.

La entrada

Una vez que hayamos cambiado el color, volvemos a la vista de redacción normal y escribimos con normalidad. Podremos cambiar el estilo de la tipografía, los colores de las tipografías y sus tamaños. Incluso podremos insertar imágenes. Es decir, redactaremos con normalidad, pero nos saldrá el color de fondo.

Opción 2
Fondo entrada con imagen

Este código sirve para colocar una imagen de fondo en la entrada de nuestro blog. No me gusta tanto esta opción, pero si queréis utilizarla, aquí la tenéis. Nosotros redactaremos con normalidad la entrada.

En el momento en el que queramos poner una imagen de fondo, sobre la que escribiremos texto, vamos a la vista en HTLM de nuestra entrada, pegamos este código y en la parte de URL DE TU IMAGEN, pondremos la dirección de esa imagen. Cuando hayamos pegado esa URL volveremos a la vista normal y escribiremos. En la entrada no veremos esa imagen, pero en la vista previa sí.

<div style="background:url(URL DE TU IMAGEN)no-repeat; position: relative;width: 100%;">Texto de la entrada</div><br>

Algunos consejos:

Ajustar el tamaño de la imagen

Ahora viene la parte más importante del tutorial: Preparar una imagen que sea adecuada para nuestros tutoriales. Podemos diseñar varias imágenes o simplemente elegir una foto.

Una vez que tengamos la imagen diseñada o la foto descargada, tendremos que descubrir cuál es el ancho de nuestra entrada. Para ello vamos a usar un truquillo.

1. Iremos a nuestro blog, a la página principal.
2. Pinchamos con el botón derecho del ratón sobre el texto de una de nuestras entradas y elegimos la opción INSPECCIONAR ELEMENTO.
3. 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. Ajustaremos el ancho con el mismo tamaño que hemos apuntado en el paso anterior. Lo aplicaremos a la imagen y guardaremos ese diseño o foto.

Ejemplo de cómo ajustar la imagen en fotor

1. Entramos en Fotor y seleccionamos editar una foto

2. Dentro del panel AJUSTAR, elegiremos la opción de reajustar.

3. Activamos el candado y escribimos el ancho que hemos descubierto en el paso número 3. Escribimos este número en el primer espacio. El segundo se ajustará automáticamente.

4. Cuando lo tengamos, descargamos la imagen como PNG.

La URL de la imagen

Ya tenemos nuestra imagen lista para utilizar. Ahora vamos a Crear nueva entrada, distinta a la que estamos utilizando para crear nuestro post, 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 a la entrada que estamos redactando, donde queremos colocar la imagen, activamos vista en HTLM y pegamos esa URL en el paréntesis. Sustituyendo donde poner URL de la imagen, por la URL que hemos copiado. Como os decía, en la redacción de entrada no veréis la imagen, pero en la vista previa sí. Conforme vayáis escribiendo el texto irá apareciendo la imagen.

Cursos papelería

TIENDA

AGENDAS

GRATIS

LÍNEAS TIEMPO

CURSO PAPELERÍA PARA ORGANIZARTE

Diseña toda la papelería que necesitas para organizarte: planificadores, menús, horarios y mucho más.

más info

PACK PROFES FETÉN

Incluye el curso de apuntes flamantes, el curso de presentaciones, curso de material docente y la clase de unidades didácticas y programaciones.

más info

PACK ESTUDIANTES CUM LAUDE

Incluye el curso de apuntes flamantes, el curso de presentaciones. Perfecto para estudiantes y opositores.

más info

CURSO TUS APUNTES FLAMANTES

Aprende a preparar tus apuntes de una forma sencilla, práctica y significativa. Usaremos Word y Power Point.

más info

CURSO DISEÑA TU MATERIAL DOCENTE

Aprende a diseñar material para tu aula, para tu organización de profe, cuadernos de profe, actividades, unidades didácticas y mucho más.

más info

CURSO DISEÑO DE PACKAGING

Diseña con Power Point tu packaging: tarjetas, kits de fiesta, etiquetas, menús, meseros. Para tus fiestas, para tu empresa.

más info

CLASE UNIDADES DIDÁCTICAS Y PROGRAMACIONES

Clase para diseñar y maquetar tus unidades didácticas y programaciones. Además de plantillas editables, te enseñaré a crear las tuyas y adaptar las mías a lo que tú necesites.

más info