jueves, 14 de agosto de 2008

Tutorial de como cambiar el fondo al blog

Wolas!! ^0^
Puesto que ya son varias personas las que me han preguntado como he cambiado el fondo del blog he decidido hacer un pequeño tutorial, espero ayudar a la gente que no sabe como cambiarlo, lo explicaré y para aquel que siga con dudas que me pregunte y intentaré resolver sus dudas ^-^.

Para cambiar el fondo es sencillo, tenéis que ir a Diseño>Edición de HTML y editar la plantilla.

Tendréis que bajar la barra (de la ventana de editar plantilla) hasta que encontréis allí donde pone body, en la imagen que os dejo podéis fijaros en la barra para ver por donde queda.

Después lo único que hay que hacer es modificar lo que pone, para que quede así:

body {
background-image: url(-------);


Donde puse los guiones es donde tenéis que poner la url que obtendréis al subir la imagen a cualquier servidor (yo suelo utilizar el ImageShack este servidor te suele dar varios links a elegir, tendréis que coger el último, que pone Direct link to image). Después simplemente hay que darle a Guardar plantilla, y ya está.

Aquí os dejo una imagen para que os guiéis mejor y sepáis como tiene que quedar ^^.


Free Image Hosting at www.ImageShack.us


Que no se repita el fondo (que no haga mosaico)

Puesto que hubo gente que me preguntó por esto, añadiré la información ^^.

Si queremos quitar el modo mosaico, lo primero a tener en cuenta es el tamaño de la imagen (ha de ser suficiente grande como para que ocupe todo el fondo de la pagina). Y después simplemente es poner el siguiente código, en lugar del código anterior.


body {
background: url("----")no-repeat;
background-attachment : fixed;


En donde están los guiones tenéis que poner la url de la imagen.


Cambiar color de fondo

Como ya dije, si vuestra imagen es pequeña no cubrirá todo el blog, si no queréis cambiaros de fondo porque ese os gusta hay una alternativa.

Podéis cambiar el color de "ese espacio sin rellenar", para que se confunda con la imagen. Se trata simplemente de poner el código de un color en hexadecimal (podéis encontrar los códigos AQUÍ) antes de la url. El código seria algo así:

body {
background: #BDBDBD url("----")no-repeat;
background-attachment : fixed;


Allí donde pone "#BDBDBD", ponéis el código del color que vosotros queráis. (Y en los guiones, como siempre, la url de la imagen).


Fijar el fondo

Otra forma de poner el fondo es colocarlo estático, de tal manera que cuando se mueva la barra de desplazamiento la imagen no se mueva. Simplemente hay que colocar el siguiente código:

body {
background: url("----")fixed center;


Como siempre los guiones, es donde va la url de la imagen.


P.D: Para mas dudas preguntar que os las responderé.
P.D2: He editado la entrada para añadir más información ^^.

Cuidaros, byes! XD

10 comentarios:

  1. Hola ke tal como estas ps nada mas keria saber como puedo consegir todos los codigos ke salen para editar el perfil o poner una imagen
    y como puedo poner una foto para ke alla una foto encada blog ke yo pueda y te lo agradeceria muxo si si me puedes contestar un abrazo hasta luego y cuidate saludos desde mexico bye

    ResponderEliminar
  2. Wolas ^^

    Bueno no se exactamente lo que me preguntas ^^U.

    Las imagenes para poder ponerlas tienes que subirlas a un servidor y allí te darán el codigo. Y dices que quieres poner una foto para que en cada blog?, sorry pero tampoco entiendo a lo que te refieres.

    En cuanto a editar el perfil, te refieres al perfil tuyo del blogger?

    Dejame otro comentario y explicame otra vez la duda, que encantada te respondo ^^

    ResponderEliminar
  3. ¡Guau amiga! en verdad me ayudó tu tutorial sobre como cambiar el fondo de mi blog, estuve buscando por infinidad de páginas en la Web, y en ninguna pude encontrar mejor explicación con palitos y bolitas (como cuando enseñas a un niño a leer y practicamente le agarras la mano con el lápiz) que en tu sitio.
    Un Saludo desde Durango México, y por cierto, yo tampoco le entendí a la persona que hizo el primer comentario, je je.

    ResponderEliminar
  4. jaja me alegro mucho que te sirviera el tutorial ^^. La verdad que a mi también me costó encontrar y entender como se hacia, así que cuando varias personas me lo preguntaron hice la entrada lo más sencilla posible para que se entendiera perfectamente XD.
    Por lo tanto me alegro muchísimo de que ayude de verdad ^^

    Saludos, cuídate, byes!!! XD

    ResponderEliminar
  5. Muy buenas me gustaria saber como has metid la musica de fondo en el blogg. Gracias

    ResponderEliminar
  6. Wolas Duque ^^

    La verdad esque hay muchas formas de poner música en el blog, pero te explicaré como lo he puesto yo.

    Tienes que ir a la pagina http://www.mixpod.com (También se puede ir si le das al botón de "Create Free", que hay debajo de mi reproductor). Una vez en esa página tienes que registrarte, creas un lista de reproducción segun te guste a ti y elijes el estilo del reproductor.
    Cuando ya tienes todo elegido te darán un codigo que tienes que copiar y pegar en el blog (Tendrás que añadir un gadget de HTML/JavaScript y ahí lo pegas)

    Y eso es todo, si todavía aun no te aclaras puedo crear una entrada sobre esto y lo explico más paso a paso ^^

    Espero haberte ayudado, cuídate, byes!! XD

    ResponderEliminar
  7. Hola! =D
    Gracias por el tuto! nwn
    Pero tengo un problema uwuU
    Cuando coloco el URL y le doy a vista previa, no se repite la imagen, (como en tu fondo), entonces no se como hacer que se repita la imageeen y quisiera q me ayudaras ówò

    ResponderEliminar
  8. Wolas Ricardo!! ^0^

    Ahora mismo se me ocurren dos posibilidades por las que tu imagen no se repite.

    La primera es que puede ser muy grande, creo recordar que si la imagen llegaba a un tamaño no se repetía (pero no estoy del todo segura).

    La segunda opción es que puede que hayas cogido la url equivocada. Te recuerdo que has de coger el link directo.

    Verifica que no sea por ninguno de estos dos motivos y si aún no se repite la imagen, me pondré a investigarlo ^^

    Espero haberte sido de ayuda, cuídate, byes!!! XD

    P.D: Te recomiendo que para verificar lo del tamaño, cojas una imagen pequeña y la subas al imageshack y después la pongas en tu blog. Si se repite ya sabes que es por el tamaño.

    ResponderEliminar
  9. hola nena como vas gracias por el tutoria, muy bueno, pero me pasa un problemilla y es que cuando pego la url de la imagen, se repite como un mosaico....
    http://img148.imageshack.us/img148/8636/fondoblogc.jpg

    esta es la imagen que quiero para mi blog, el punto es que no se si habra forma alguna de que no se repita en mosaico aunque la imagen que tu tienes de las plumas es muy bonita se repite el patron, es muy bonito y no desentona... pero me gustaria saber si se puede poner una imagen que no se repita...

    un saludo desde colombia

    ResponderEliminar
  10. Wolas Eduardo ^^

    Después de estar investigando, he encontrado varias opciones para poner una sola imagen sin que se repita.

    Por un lado tenemos la siguiente opción, que es básicamente añadir después de la url "no-repeat" (y otros pequeños cambios).

    Quedaría así:

    body {
    background: url("http://img148.imageshack.us/img148/8636/fondoblogc.jpg")no-repeat;
    background-attachment : fixed;


    Pero lo he estado probando y realmente de esta manera no queda nada bien ^^u, puesto que la imagen no es lo suficiente grande para que ocupe todo el fondo, por eso me puse a buscar otras opciones.

    Encontré una forma de "rellenar" la parte que la imagen no ocupa, con un color. Simplemente hay que añadir un código de color hexadecimal antes de la url (puedes encontrar los códigos aquí: http://html-color-codes.info/codigos-de-colores-hexadecimales/)

    Un ejemplo de como quedaría:

    body {
    background: #BDBDBD url("http://img148.imageshack.us/img148/8636/fondoblogc.jpg")no-repeat;
    background-attachment : fixed;

    Así pues allí donde pone "#BDBDBD", pones el código del color que tu desees.

    Pero para serte sincera esto tampoco me convencía así que seguí buscando, hasta que al final encontré una que realmente me gustó como quedaba.
    No es exactamente lo que me pedías puesto que la imagen se sigue repitiendo, pero lo que hace es dejar la imagen fija.

    Se trata de poner lo siguiente:

    body {
    background: url("http://img148.imageshack.us/img148/8636/fondoblogc.jpg")fixed center;

    Fíjate que hay pequeños cambios, también tienes que saber que el "center" lo puedes quitar, según como quieras la imagen (ya que solo es para indicar donde lo quieres), pero yo te lo recomiendo así porque se verá mejor la imagen ^^.

    Una última cosa por comentarte, ten siempre en cuenta las dimensiones de la imagen, no siempre se verá bien (ya que si es muy pequeña seguramente se te vea muy mal o incluso te haga un simple mosaico)

    En fin, espero haberte sido de ayuda ^^ y si tienes mas preguntas no dudes en preguntar, que si las sé te las responderé XD.

    Cuídate, byes!!! ^0^

    P.D: Añadiré esta info también a la entrada

    ResponderEliminar

Muchísimas gracias por comentar, siempre se agradece el criterio de los demás ^^