Como cambiar la imagen de fondo por una imagen patrón en las plantillas de Blogger


Buen día. Hoy explicare como cambiar la imagen de fondo de la plantilla contempo de blogger por una imagen patrón. Te preguntaras que es eso de imagen patrón, es solo una imagen por lo general de baja resolución (por ejemplo 100x100) o pequeña que se utiliza de fondo en las paginas web, llena el fondo de la pagina con copias de si misma y estas encajan perfectamente creando un fondo continuo como si fuera una única imagen. Por ahora solo he probado en la plantilla contempo que es la que utiliza este blog, mas adelante agregare mas plantillas.

Al poseer una imagen de un poco mas de 200 KB y ser reemplazada por una de poco mas de 30 KB, esto ya supone una gran mejora en la carga de la pagina. Por ahora dejare la imagen de fondo que tiene este blog mientras creo otra para cambiarla porque esta esta un poco muy brillante ¿No?.

Primero: vamos a Tema>>Personalizar que esta abajo de las miniaturas del blog y en el "Diseñador de temas de blogger" clic en "Fondo" y en la imagen para subir la imagen de tu preferencia desde el cuadro de dialogo que se abre. Subes la imagen y haces clic en "Listo" y en "Aplicar al blog" para guardar los cambios, no te preocupes si en la vista previa se ve la imagen un poco grande. Ya vamos a solucionar eso para que la imagen salga en su tamaño original y cubra todo el fondo de la pagina.


Diseñador de temas de blogger


Cuando quieras cambiar la imagen patrón de tu blog solo sigue el primer paso y listo, no te preocupes por el código HTML.

Segundo: nos vamos a "Tema" y clic en "Editar HTML" que también esta abajo de las miniaturas del blog. Clic dentro de la caja que contiene el código HTML y pulsas Ctrl+f para buscar, en el cuadro de búsqueda que ha aparecido en la parte superior derecha del cuadro de código escribes: "body {" sin comillas y enter.

Código CSS del fondo de la pagina

Despues de body { agregas la siguiente linea background: $(body.background);

Tercero: escribes en el campo de búsqueda "<div class='bg-photo-overlay" sin comillas y pulsas enter, conviertes en comentario las tres lineas que están abajo de la linea resaltada en amarillo agregando !-- después de < de la primera linea y -- en la linea numero tres antes de > (Ver siguiente imagen).

Código HTML del fondo de la plantilla

Cuarto: si quieres puedes saltarte este paso, consiste en convertir en comentario el codigo CSS del fondo que ya no utilizaremos para evitar resultados no deseados. Escribes en la caja de búsqueda ".bg-photo-container {" sin comillas y enter. Arriba de la linea resaltada en amarillo agregas /* para crear un comentario y observa que después de la clase .bg-photo-container esta .bg-photo y después de esta .bg-photo-overlay al final de esta clase podrás ver el cierre de la misma que es el } después de este símbolo escribes */ (Ver las dos imagen siguientes) y clic en "Guardar tema".

Código CSS del fondo de la plantilla

Código CSS imagen de fondo de la plantilla


Antes de ir al siguiente paso visita tu blog y comprueba que la imagen de fondo lo cubre todo y que no ocurre nada extraño.

Quinto: En este paso vamos a eliminar el código que hemos convertido en comentario porque ya no lo estamos utilizando supone una carga para la pagina aunque se poco, como dicen por hay todo suma. Repites el tercer paso justo hasta donde realizas la búsqueda y localizas las lineas, luego eliminas las lineas que convertiste en comentario (Ver imagen del tercer paso). Repites el cuarto paso también hasta la búsqueda y localizas las lineas que convertiste en comentario que son desde el /* hasta el */ y las eliminas (Ver imágenes del cuarto paso). Clic en "Guardar tema".

Visita tu blog y comprueba que todo esta en su sitio y eso es todo.

Aquí dejo el código que hemos eliminado por si alguien quiere volver a colocar la imagen de fondo como estaba antes.

Si no estas seguro donde va el código que tienes que insertar utiliza las imágenes de esta entrada para orientarte.

  • Ve a Tema>>Editar HTML y clic dentro de la caja de código y pulsas Ctrl+f luego escribes en la caja de búsqueda que ha aparecido "body {" sin comillas y pulsas enter.
  • Borras la linea que esta después de la linea resaltada en amarillo que es: background: $(body.background);
  • Escribes en el campo de búsqueda ".hamburger-menu {" sin comillas y pulsas enter. Copias y pegas en código CSS que esta aquí abajo y lo pegas arriba de la linea resaltada en amarillo.
  • Vuelves a la cajita de búsqueda y escribes "<div class='bg-photo-overlay" sin comillas y pulsas enter. Copias y pegas el código HTML que esta aquí abajo y lo pegas abajo de la linea que esta resaltada en amarillo.
  • Clic en "Guardar tema", cambias la imagen desde el "Diseñador de temas de blogger" por una que subas o seleccionas de las que blogger te ofrece y visitas tu blog para comprobar que todo ha ido bien.

Código CSS:
.bg-photo-container {
  height: $(body.background.height);
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.bg-photo {
  background: $(body.background);
  background-attachment: scroll;
  background-size: cover;
  -webkit-filter: blur($(body.background.blur));
          filter: blur($(body.background.blur));
  height: calc(100% + 2 * $(body.background.blur));
  left: $(0px - body.background.blur);
  position: absolute;
  top: $(0px - body.background.blur);
  width: calc(100% + 2 * $(body.background.blur));
}
.bg-photo-overlay {
  background: rgba(0,0,0,.26);
  background-size: cover;
  height: $(body.background.height);
  position: absolute;
  width: 100%;
  z-index: 2;
}


Código HTML:
    <div class='bg-photo-container'>
        <div class='bg-photo'/>
    </div>

Saludos y nos leemos.

Comentarios

  1. Muchas gracias por tu aporte se gradece mucho me ha servido, tengo un blog de marketing online en el que espero pueda poder hacer este truco

    ResponderEliminar
  2. Hola, quería decir que no puedo hacer el tercer paso, será por el tema que tengo?
    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola, mil disculpas para todos. Tengo mi blog abandonado, debido a que no dispongo de tiempo libre y de una conexión estable. espero volver y actualizar todo en cuanto tenga tiempo. Muchas gracias. :)

      Eliminar

Publicar un comentario

Entradas populares de este blog

Como eliminar cualquier gadget o widget en blogger

Plantilla o tema contempo con dos columnas

Como redondear los bordes en blogger