Añadir fondo a un gadget:

domingo, 8 de noviembre de 2009
Añadiendo unos cuantos codigos a nuestra plantilla vamos a conseguir agregar un fondo a un Elemento/Gadget de la sidebar o de cualquier otra parte del blog.
El fondo puede ser una imagen o un color en particular.

En este blog se puede apreciar claramente como algunos elementos de la sidebar disponen de una imagen como fondo: solo tienes que expandir, por ejemplo, el etiquetador o el archivador.



1. Nos dirigimos a Diseño>Edicion de HTML y Expandimos Artilugios


Debes de tener claro cual va a ser el elemento al que queremos añadir un fondo. Por ejemplo, si quieres agregarselo al Archivo del Blog, tienes que encontrar este codigo (recuerda expandir artilugios y buscar con Ctrl+F):

<b:widget id='BlogArchive1' locked='false' title='Archivador' type='BlogArchive'>
2. Ahora tienes que copiar el id del elemento, que en este caso seria BlogArchive1, y colocarlo con este codigo:
ATENCIÓN: Este codigo lo pondremos encima de ]]></b:skin>


#BlogArchive1{
background: #000000
}
3. Debes cambiar  000000, que en este caso corresponde al color negro, por el que tu quieras.
  • El fondo de este gadget sería de color NEGRO, pero, como ya he dicho, puedes cambiarlo por el que tu quieras. Puedes utilizar la siguiente página para obtener el código hexadecimal del color que prefieras.
Para agregar de fondo una imagen debes de hacer lo mismo que en el paso anterior, pero poniendo este codigo:

ATENCIÓN: Este codigo lo pondremos también encima de ]]></b:skin>

#BlogArchive1{
background: url(URL-DE-TU-IMAGEN) ;
}

Solo tienes que cambiar URL-DE-TU-IMAGEN, por la correspondiente.

Y si todo se ha hecho correctamente, GUARDAMOS CAMBIOS :)

Saludos!!!

17 comentarios:

  • Excelente!
    Me ha sido de mucha utilidad.
    Muchas gracias amigo

  • La Trucoteca

    Nos alegra que te haya servido Anónimo
    Por cierto, la próxima vez no te olvides de poner tu nombre =)
    ¡Saludos!

  • Wenas...Excelente espacio, he aprendido mucho de ustedes ^^

    Solo quieria saber si es que podrian dar unos link de imagenes, o de paginas donde hayan fondos de gadgets

    solo eso, gracias


    sigan asi.

  • La Trucoteca

    Hola Sweet Nightmare
    Claro que hay páginas, no sabemos si exactamente con fondos para los gadgets, pero hay grandes galerías donde puedes encontrar imágenes de todo tipo: Deviantart.com, sxc.hu, etc.
    Si quieres, nos dices lo que te gustaría exactamente para tu blog, y nosotros te lo buscamos :)
    Por cierto, nuestro messenger, si lo quieres saber es el siguiente:

    latrucoteca(arroba)hotmail.es

    ¡Un saludo y para lo que necesites, aquí estamos!

  • pato

    oie podriamos ponernos en nuestras faviconeras,yo t pongo en la mia y tu en la tuya:D

    * Dirección del Blog: http://aprendetecnicasdefutbol.blogspot.com/
    * URL de la imagen: http://www.iconj.com/ico/k/8/k8twrsls24.ico
    * Texto al pasar el ratón: Aprende tecnicas de futbol.


    si aceptas dejame tus datos en mi blog

    saludos amigo

  • La Trucoteca

    Pato, si quieres que añadamos tu favicon, por favor, deja tus datos en la entrada sobre nuestra faviconera ;)
    Un saludo!

  • Emilio M. Luna

    Hola muchas gracias por vuestro tutorial, es fácil de editar. Una pregunta, me gustaría añadirle un margen para que que guarde la apariencia con el gadget anterior (publicaciones recientes). ¿Qué debo hacer?

    mi blog es El Antepenúltimo Mohicano.

    Muchas gracias. Un saludo.


    Emilio Luna.

    Ps: sabriáis como podría hacer las entradas populares pero con idéntico css a el publicaciones recientes. Un saludo y gracias de nuevo.

  • La Trucoteca

    Emilio Luna, para añadir margen a un widget, tienes que poner:

    #HTML1 {
    padding-left:10px;
    }

    HTML1, lo tienes que sustituir por el id del widget (como lo explicamos en el método de esta entrada), y 10px por el tamaño en px que quieras.
    Con esto conseguirás poner espacio en el lado izquierdo (left) del gadget. Si quieres poner espacio a la derecha tendrás que poner padding-right . :)

    Ps: Esos widgets no se pueden cambiar prácticamente por la plantilla, no podemos darte una respuesta ;)

    ¡Saludos!

  • Sara Huesca MyLife

    Hola, gracias por el consejo, pero por más que lo intento no hay manera, no me sale. No sé que estaré haciendo mal. En cuanto lo consiga, espero que ocurra, ya os lo contaré. Un saludo y gracias de nuevo

  • Sara Huesca MyLife

    Creo que no puedo porque tengo puesta una plantilla de las de decoratublog, que es un gadget y la imagen solapa todo lo demás ¿puede ser? En fin que lo he probado en otro blog y sí me funciona, pero claro, el tamaño de la imagen no era el correcto. La de horas que hay que dedicarle al blog!!!!!!!!!!!!! Un saludo

  • La Trucoteca

    Sara Huesca, ¿lo estás haciendo en tu blog "Mylife"?
    No deberías tener ningún problema para que apareciera bien el fondo en alguno de los gadgets que tienes al final, aunque lógicamente la imagen que damos aquí no tiene el ancho necesario y no te encajaría bien...

    ¡Saludos!

  • T_T

    T_T le puse para que el clor de fondo de mis gadget sean blancos pero no sale T_T si me ayudas http://inteligencia-artificial-2011-1.blogspot.com/

    Gracias

  • La Trucoteca

    T_T, supongo que ya lo habrás solucionado, ya que los has puesto en un color azul (#81BEF7). Si quisieras ponerlo en blanco, solo tendrías que sustituir ese código por #FFFFFF ;)

    Saludos!

  • Sara Huesca MyLife

    Hola, no he podido y creo que debe ser porque tengo una plantilla de decoratublog añadida como gadget. Puede ser? Porque sigo todos los pasos y no hay manera. Hice yo una imagen y la subí y todo, pero nada y he probado con cambiar sólo el color y no. Sin embargo en otro blog que no tengo la platilla sí que me ha funcionado. Muchas gracias y un saludo.

  • Unknown

    Gracias, me sirvio. Un saludo

  • La Trucoteca

    Nos alegramos de que te fuera todo correctamente, PC :D

  • decomarce

    Hola. Me sirvió mucho para resaltar cada gadget por separado... pero ¿Existe alguna manera de resaltarlos todos "en bloque"? Es decir unificarlos en una barra vertical de color... Muchas gracias!!!

  • Ir Arriba