SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

29 ene. 2014

Cambia el Fondo de tu blog

Bueno en muchos tutoriales os dirán lo tipiquísimo de ir a Diseño, picar arriba en Diseñador de plantillas y que ahí cambiéis el fondo. Eso está muy bien para según qué plantillas…pero si queréis aprender a cambiar un fondo como hay que hacerlo, o sea tocando el código, yo os lo enseño.

Lo primero que tenemos que hacer es buscar un host para imágenes. El viernes pillé un cabreo importante porque yo usaba siempre imageshack pero resulta que dentro de 20 días es de PAGO (1$ al mes, poco sí, pero no me da la gana pagar nada). A ver aunque no pagues, si estas registrado te mantienen las imágenes que tengas subidas, pero yo no me fío, ya sé cómo va esto, te dicen que sí y al cabo de 2 meses te las borran. Paso.

Así que opté por hacer del blog un host de imágenes.

¿Cómo? Pues subiéndolas como si hiciera una entrada pero sin publicarlas, guardando el borrador porque en Blogger una vez subes las imágenes ya se quedan guardaditas.
Ahora os explico cómo se hace.

Vais a Nueva entrada y ponéis las fotos que os interesen, en este caso para el fondo de vuestro blog.
Cuando la tenéis ya puesta picáis arriba a la izquierda donde dice HTML y veréis el código:

Pues como veis en la imagen guardáis esa URL que os aparece ahí porque es donde el blog ha alojado la imagen.
Muy bien, con esa URL guardadita, podemos cancelar la entrada o dejarla como borrador, total que ahora nos vamos a Plantilla y Editar HTML (no os olvidéis de la copia de seguridad antes de tocar nada y lo de siempre si no sabéis como se hace Curso y aprendiendo :P)

Bien una vez en el código HTML de nuestra plantilla desplegamos artilugios (no hace falta todos, solo el de < b:skin >.

Ahí buscaremos este segmento:

body {
font: normal normal 14px Delius;
color: #222121;
background: #dfdede url(http://4.bp.blogspot.com/-TVUTSZgpKh0/UuMkjBf_diI/AAAAAAAABoA/qJwlEuH1pjI/s1600/fonsflors.jpg) repeat fixed bottom center;
padding: 0 40px 40px 40px;
}

Es el primero que os debería salir.
Muy bien donde dice:

background: #dfdede url(http://4.bp.blogspot.com/-TVUTSZgpKh0/UuMkjBf_diI/AAAAAAAABoA/qJwlEuH1pjI/s1600/fonsflors.jpg) repeat fixed bottom center;

Cambiaremos lo que aparece entre paréntesis y pegaremos la URL que habíamos guardado de nuestra imagen.

Seguimos más abajo, encontraremos la misma URL que la que hemos sustituido:

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: #dfdede url(http://4.bp.blogspot.com/-TVUTSZgpKh0/UuMkjBf_diI/AAAAAAAABoA/qJwlEuH1pjI/s1600/fonsflors.jpg) repeat fixed bottom center;
}

Esa que está entre paréntesis, también la cambiamos.
Solo tenemos que cambiar estas dos, las que están dentro de .body y .body-fauxcolumn-outer .cap-top
¿De acuerdo?

Hacéis una vista previa a ver si os gusta y ya está, no tiene ninguna complicación, solo es cambiar esas dos URL por la URL de vuestra imagen.

Disfrutad.
Muah!


13 comentarios:

  1. :(

    Vaya con imageshack, es la que yo uso para subir muchas fotos, primero porque en blogger no me gusta como quedan, no se que pasa que muchas imágenes se me cambian de color al subirlas a picasa, y segundo porque imageshack te daba unas url cortitas... ya podian usar publicidad como todo el mundo.

    Este también es un buen post, a mi lo ir a diseño de plantilla a veces no me resulta, como ya digo se me cambian de color algunas imágenes y el fondo queda como muy oscuro, así que tengo que ir al html, previo paso por imageshack pero ya nada...

    Beso!

    ResponderEliminar
    Respuestas
    1. AM. no se si me leerás, para que las fotos no te cambien la calidad en blogger puedes subirlas en png, si las subes en jpg tienes que buscar en picassa la opción que te dice algo así como retoque automático y desmarcarla : )

      Eliminar
    2. Si, es lo que dice Diana. En el caso de Picassa no sé donde se configura el tema para la oscuridad de la imagen. Sé hacerlo dentro mismo del perfil de Google.
      Click en tu perfil de Google+ (arriba ala derecha) y le das a Cuenta. Se abre una pagina con varias opciones, elijo Editar configuración.
      Se abre otra pagina y ahí bajamos hasta Fotos y Vídeos. Dentro vemos que dice AJUSTE AUTOMÁTICO.
      Pues eso hay que tenerlo en DESACTIVADO que si no te las oscurece y cosas así.

      Eliminar
    3. Muchas gracias a las dos!

      Eliminar
    4. Vaya!! No paraba de preguntarme porqué se veían tan mal los jpg!!! Por eso siempre uso png. Gracias!

      Eliminar
  2. Gracias, aunque no tengo muy claro para que sirve, yo utilizo (poco) photobucket, pero para los fondos o imágenes las tengo en carpetas de mi ordenador. Supongo que esta solución es para las que tenéis muchas imágenes. Besos.

    ResponderEliminar
    Respuestas
    1. Este tutorial es para cambiar el fondo del blog, da igual las fotos que tengas y el hosteador que uses. La primera parte del tutorial explico a como subir una foto a Internet sin necesitar empresas que te la hosteen.

      Tu tienes las imágenes en tu ordenador en carpetas, pero las imágenes que tienes en tu blog están subidas a Internet a algún sitio. Ahí es donde entra en juego Blogger, que puede hacer de host.
      :k

      Eliminar
  3. Si claro, están en Picassa. Vale !!! es otra manera de poner un fondo, es que yo voy cambiando los fondos desde : plantilla - personalizar - fondo. Muchas gracias, siento la torpeza pero es que esto de internet me va un poco grande, intento aprender pero soy de otra dinastia. Besotes y mil gracias por tus "tutos".

    ResponderEliminar
  4. Como siempre un post muy útil

    ResponderEliminar
  5. Esta información es realmente útil, gracias por compartir
    en amor y luz
    Cyn

    ResponderEliminar
  6. Hola.
    Estoy de suerte, me a encantado conocer tu blog, hay tantas cosas que quisiera aprender para cambiarle la fachada a mis blog. Me cuesta un poco, pero veo que tus explicaciones son claras, y si me queda una duda me tendrás preguntándote. mm tengo una ya ahorita mismo, con eso de los pixeles. parece que esta no es la entrada, ya me confundí es que leí varias que me interesaron.
    Soy tu nueva seguidora, y agradecida de que quieras compartir tus conocimientos gratis.
    Dios te bendiga.

    ResponderEliminar