Me pregunta BEYOND cómo poner imágenes de fondo en el título de ciertos gadgets.
El truco a continuación se aplica a cualquier gadget del blog y bien puede usarse para poner una imagen decorativa de fondo en el título, o bien para sustituir el título del gadget por una imagen.
Lo primero que hay que hacer es identificar el id del gadget al que se le quiere poner la imagen, para ello entra a Diseño > Edición de HTML y SIN marcar la casilla de expandir artilugios busca el gadget al que vas a modificar, lo puedes identificar por el título, por ejemplo Etiquetas, o Lista de blogs.
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
En este ejemplo el id del gadget es Label1 y corresponde a las etiquetas del blog.
Ya teniendo el id del widget, pega antes de ]]></b:skin> lo siguiente:
#Label1 h2 {
background: url(URL de la imagen) left top;
color: #000;
}
Y así sucesivamente para todos los gadgets a los que quieras ponerle la imagen de fondo, sólo debes cambiar la URL de la imagen y en color cambiar el color del texto del título.
Si lo prefieres también puedes cambiar todo el título por una imagen, sólo que en su lugar pegamos antes de ]]></b:skin> esto:
#Label1 h2 {
background: url(URL de la imagen) no-repeat top;
height: 30px;
}
De igual forma hay que cambiar la URL de la imagen, y en heigth poner el alto de la imagen.
Ahora ve a Diseño > Elementos de la página, da click en Editar en el gadget al que le cambiaste el fondo y borra el título del gadget, en su lugar escribe esto:
De esta forma el título del gadget no se encimará con la imagen de fondo.
Con estos sencillos trucos podrás tener una plantilla cada vez más personalizada, ya sólo es cuestión de que agregues las imágenes que se adapten al diseño de tu plantilla.




Iconos RSS

89 comentarios:
Oie amigo necesito tu buena ayuda no se que le paso ami blog en la Noche lo deje bien y ahora dia me aparecio como mensajes del PocketBuket o algo asi a toda mi pagina y pregunte si tambien seles beia = y me dijeron que si que ago para quitar ese erroe Porfavor necesito ayuda
Hola unrealmat,
Eso es porque has excedido el ancho de banda que te ofrece Photobucket y te pide que pagues la membresía.
Sube las imágenes a otro servidor (hay varios) y en tu plantilla cambia las nuevas direcciones de las imágenes.
Saludos.
espero no equivocarme, pero ya que tanto me ayudaste vos, voy a intentar colaborar
#Label1 h2 {
background: url(URL de la imagen) no-repeat top;
heigth: 30px;
}
el heigth no sirve para agrandar el alto en este caso, a mi no me sirvio, en cambio con un padding sirve perfectamente, cualquier cosa si vez que esta mal lo que digo borra el comentario
y aclaro es con la intencion de ayudar :) y no de molestarte
un abrazo grande
Hola Ezequiel,
Para nada que me molesta, todo lo contrario, qué bueno que hagas aportes.
La imagen de ejemplo que está abajo del post la hice usando el height y me funcionó perfecto, supongo que en algunas plantillas será mejor usar el padding, creo que ya dependerá de cada plantilla.
Saludos.
Excelente truco para seguir personalizando el blog!!!!
Creo que si logro hacer un header mejor que el que tengo, veré si puedo usar este truco para personalizar mas el blog.
Un abrazo!!!!
Es verdad, los títulos de los gadgets si tienen el mismo fondo del header se ven mucho mejor.
A ver cuándo nos das la sorpresa del nuevo header.
Un abrazo.
como uso el padding porque la verdad a mi no me sirve el height
Hola it's notice,
Tal como lo ha dicho Ezequiel en el comentario #3, sólo que en lugar de poner height:30px, pondrías, padding:30px.
Saludos.
muy bueno, y gracias eh!!!!
pero tengo un problema con las posiciones, mira, pasate por mi blog y mira el primer gadget de la sidebar, que dice últimos comentarios, el icono me queda sobre la "u", y trate de alinearlo pero no puedo, me ayudas??
Hola Ascesino96,
Creo que ya lo arreglaste pues veo todo en orden en tu blog. Cualquier cosa me avisas.
Saludos.
Bueno yo ya lo hice todo y he conseguido cambiarlo
pero lo que no consigo es que se quede centrado o a la derecha
Si me pudieras indicar como hacerlo lo agradeceria
(soi mui perfeccionista en algunas cosas)
Es el gadget de las visitas:
http://chaleproducciones.blogspot.com
Graciaas!
Usa esta línea en el background:
background: url(URL de la imagen) no-repeat center top;
Saludos.
Bueno muchas gracias pero se ha quedado un poco a la izquierda...
si no tiene solucion no pasa nada
muchas gracias de todas formas!!
Deben ser los estilos de tu plantilla, tendrías que moverle hasta que tengas los resultados deseados.
Saludos.
Vale ya se porque es , esque hace poco ensanche la sidebar y por eso no queda ajustada
Graciaaas!!
que onda. bueno he intentado..
1: en mi plantilla en vez de laber me aparece Htmail
2: lo intento con htmail pero no me sale nada....
Ayuda Please... Asi tambien con colocar un imagen atras de las entras de fondo.. como 3djuegos.com
Hola RD-JUEGOS,
Veo que ya lo lograste, veo todos los títulos de los gadgets con una imagen.
Saludos.
me funciono? wtf? bueno no veo nada en mi blog amigo.
ahora lo intente de la forma de la imagen completa...
si lo vez tirale una captura y deja verla no veo nada...
que sera? el formate de plantilla o Q?
Hola RD-JUEGOS,
Es que arriba de cada gadget vi una imagen y creí que era la que habías colocado pero veo que es parte de la plantilla.
¿A cuál gadget le quieres poner una imagen de fondo en el título?
la queria en el Top de juegos... Pero pensandolo bien serian a todas....??
k onda amigo, he confirmado que el truco si funciona pero solo en Internet Explore en el firefox no funciona wtf?
pero el problema es que en el internet Explore mi blog aparece medio loco, los gadget estab abajo a lo ultimo...
Bueno no se como no uso el IE por eso que es una mierda..
Haber como lo hacemos funcionar para el FF
Hola RD-JUEGOS,
Funciona para todos los navegadores, yo lo he probado en FF, IE, Chrome, Opera y Safari y en todos se puede ver el cambio de la imagen en el título del gadget.
Para poner una imagen de fondo al título del gadget que quieres usa este código:
#HTML10 h2 {
background: url(URL de la imagen) no-repeat top;
heigth: 30px;
}
Sólo cambia la URL de la imagen.
Saludos.
excelete ahora si funciono amigo. .Sos grande nomas me pondre hacer la imagen en el photoshop...
Me alegro que ya funcione.
Saludos!
Hola Potro.
Tengo un gadget de imagen que utilizo como link y quisiera poder ubicarlo un poco hacia la derecha.
¿Cómo puedo hacerlo?
Mil Gracias
¡¡Que este año la pases mejor que el anterior!!
Hola ABRIL,
Te recomiendo que en lugar de usar el gadget de imagen pongas en un HTML/Javascript el código de la imagen y del enlace, así será más fácil alinearlo:
<center><a href="URL del enlace"><img src="URL de la imagen" /></a></center>
Saludos.
Hey que bien!
Ahora voy a tratar de ubicarlo por pixeles, si tengo algún problema te molestaré de nuevo.
Gracias
Perfecto, si lo ubicas por pixeles te recomiendo que entonces elimines las etiquetas < center > con las que está encerrado el código.
Saludos.
Gracias, así lo hice y apliqué margin sin problema.
Ahora quiero poner otra imágen con link debajo de la anterior dentro del mismo gadget pero no me deja pues se alinea horizontalmente y si le doy margin-top a la segunda se bajan las dos permaneciendo horizontalmente. ¿Tengo que hacer un nuevo gadget para ubicar la nueva imágen debajo ó hay algún modo de modificar el código y hacerlo en un mismo gadget?
Gracias
Después de cada código (de cada imagen) pon esto: <br />
De esa forma se hará un salto de línea entre cada imagen.
Saludos.
Wah!!! Salió perfecto.
Un millón de GRACIAS!!!
HOLA POTRO mi iD es Label1 y puse todo como dice el post , y ahora de ejecutarlo no vi na -.- , pero en explore si se via el cambio , no entiendo , dices k es lara todo clases de buscardor
yo utilizo FF :( puse asi ;
Label1 h2 {
background: url(URL de la imagen) no-repeat top;
heigth: 30px;
}
y tambiem probe con esto y nada sigue igual
HTML10 h2 {
background: url(URL de la imagen) no-repeat top;
heigth: 30px;
}
gracias saludos
Recuerda que tienes que poner el signo de gato antes del ID del gadget, por ejemplo:
#Label1 h2 {
Saludos.
hola Potro quiero pedirte ayuda con esto es que quiero colocar una imagen el la entrada pero haciendo el llamdo desde la plantilla y en el post colocar algo asi como:
div clas ="imagen1"
en la plantilla:
.imagen1 {
background-image: url('http://i49.tinypic.com/2aol0i.jpg');
}
pero quisiera que quedara alineada ala izq. y no tan separa del texto, para si algo poder modificarla mas adelante.
Gracias
Hola Andres Fanatico,
Puedes agregar ahí mismo los parámetros, por ejemplo:
.imagen1 {
background-image: url('http://i49.tinypic.com/2aol0i.jpg') no-repeat;
float: left;
padding-right: 0px;
}
Saludos.
ola tengo un problema no se donde pego este codigo
???
gracias por la respuesta
Hola Sofi,
Hay que entrar en Diseño > Edición de HTML y pegar antes de ]]></b:skin> el código.
Saludos.
ola..
lo que no se es donde va este codigo y que se le edita
gracias
Hola Sofi,
Ya he dado las indicaciones en la entrada y en el comentario, no sé cómo más explicarme :S
Saludos.
perdon la molestia ya lo hice muchas gracias !
No es ninguna molestia ;)
Saludos.
hola amigo
queria preguntarte como hago para colocar la imagen del post al lado del titulo en la pagina principal y no debajo.
mira este ejemplo:
http://matino-template-demo.blogspot.com/
muchas Gracias
Ese es un Leer más automático, hay varios métodos para hacerlo pero por desgracia yo no tengo un post al respecto :S
ok gracias por tu respuesta
Eres un crack, estoy aprendiendo un montón contigo.
Ya tengo la nube de etiquetas, y ahora, ésto!
Me ha costado un montón, pero gracias a lo del padding, todo perfecto!
Muchísimas gracias!
Algunas cosas pueden dar más trabajo que otras pero si el resultado es el que buscábamos entonces habrá valido la pena.
Qué gusto que ese es tu caso =)
¡Saludos!
Hola! La verdad que muy bueno este truco, pero no sé por qué no puedo hacerlo :S
en mi blog www.matyldodrago.com.ar quiero poner una imagen para cada gadget, el primero con el que probé (y el único para el cual está el codigo escrito) es el de Archivo... pero no sale :S
Tengo pegado esto como vos dijiste:
#BlogArchive1 h2 {
background: url("http://i276.photobucket.com/albums/kk30/matyldo/bot-archive.png") no-repeat top;
height:50px;
}
Está pegado entre las líneas:
body#layout #footer-wrapper .links, body#layout #search {
display:none;
}
y
]]>
del código de mi blog...
Y el id del gadget es este:
No sé qué es lo que estoy haciendo mal!!
Te agradecería si me das una mano! Saludos y muchas gracias!!
Hola Matyldo,
En el caso de tu plantilla intenta ponerlo antes de:
/* Navigation - Navegación */
Prueba con eso y me comentas qué sucede.
¡Saludos!
Hola, lo puse bien?
(...)
/* COMMENTS - COMENTARIOS */
#comments h4,h4.comment-post-message{font-size:23px;margin:0 0 20px;color:#f60;}
#comments-block{margin-bottom:20px;}
.comment{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #efefef;line-height:160%;}
.comment-author{font-weight:bold;margin:0 0 5px;}
.comment-form{max-width:100%!important;}
p.comment-footer{text-align:center;}
dd.comment-footer,dd.comment-body{margin:0!important;}
.comment-timestamp{font-size:90%;font-weight:normal;}
#BlogArchive1 h2 {
background: url("http://i276.photobucket.com/albums/kk30/matyldo/bot-archive.png") no-repeat top;
height:50px;
}
/* Navigation - Navegación */#blog-pager-newer-link{float:left;}
#blog-pager-older-link{float:right;}
#blog-pager{text-align:center;}
.feed-links,body#layout #social,body#layout #searchform,body#layout #ads{display:none;}
/* Gadgets panel - Panel de gadgets */
(...)
No funciona de todos modos :S
Gracias igual por contestar!
Saludos!!
Hola de nuevo,
Hay que ponerle un nombre al gadget para que reconozca el título y así tome la imagen que deseas.
Edita el gadget y en el nombre pon esto con eso no se verá el título pero la plantilla reconocerá que hay un título y por lo tanto una imagen que mostrar.
¡Saludos!
Buenísimo!!! Funcionó perfecto, muchísimas gracias :D
Saludos capo!
Qué bueno que ya te ha funcionado :)
hola potro me puedes ayudar hize los pasos y me funciona pero en mi plantilla existen recuadros de colores en los titulos de los gadgets y no pude encontrar la forma de removerlos http://nazion-cosplay.blogspot.com
gracias por ayuda
Hola AlUkArD,
En esta parte está el color de fondo y borde de esos títulos:
.sidebar h2, sidebarbaru-wrapper h2 {
text-align:center;
text-transform:uppercase;
background:#4c4c4c;
margin: 0 0 10px;
padding: 6px 0 6px 7px;
border: 1px solid #191919;
}
Saludos.
muchas gracias ahora me queda claro
Excelente tu blog me ayuda mucho
Buenas! En primer lugar felicitarte por el blog, es una autentica mina de oro.
He seguido todos tus pasos y me queda algo asi:
#Label1 h2 {
background: url(http://img146.imageshack.us/img146/811/retdymoporconceptos.gif) no-repeat top;
heigth: 50px;
}]]>
incluso he modificado el nombre del gadget por el de
El problema que la imagen se me corta por la mitad, no llega a verse del todo. Espero ansioso tu respuesta,
Muchas gracias por tu atencion Potro!
Hola Cul de Sac,
Qué bueno que este sitio te está siendo de ayuda y encuentras información útil.
He entrado a tu blog y veo los fondos de los títulos completos, es decir, sin cortarse por la mitad. Supongo que ya has solucionado el problema.
Saludos!
Potro como cambio el tamaño y tipo de letra del los titulos de los gagdets
igual queria sber como cambio el tamaño y estilo de letra de los post!! gracias
Las propiedades de los títulos de la sidebar están en sidebar h2 ahí modificas lo de las letras.
En el caso de los posts es en el área de body { pero los cambios del tipo y tamaño de letra que se hacen ahí se aplican para todo el blog.
muchas gracias Potro, me sirbió!
gracias Potro, me sirbió mucho!!
Qué bueno que te ha sido útil ;)
Hola Potro.
Quería comentarte que a mí al principio lo del height no me sirvió,se veía la imagen cortada por la mitad.Pero entonces entré aquí y observando el post del tutorial vi que había un fallo.Si copias y pegas el contenido que hay en el tutorial no ta funciona,como a mí,porque la palabra height está mal escrita.En el tuto está escrita cómo heigth,con la h después de la t.Y se tiene que poner así:
height
Con la h antes de la t.Así me funcionó a mí.
Lo digo por si a alguien le pasa lo mismo y no sabe dónde está el error.
El problema es que yo quiero dejar el tipo de letra del blog y sólo la imagen de fondo,pero el texto me queda fuera de la imagen y no sé por qué.Si me pudieras ayudar te lo agradecería. http://ivanserranogarcia.blogspot.com/
Saludos y gracias.
Hola Ivan Serrano,
Muchas gracias por avisarme de ese detalle, qué curioso que nadie antes se había dado cuenta :P
Respecto a tu problema, no veo el texto salido sino que más bien aparenta eso porque la imagen que pusiste de fondo es oscura en la parte superior y se confunde con el fondo del blog.
Pordrías intentar bajar un poco el fondo eliminando donde dice top al final de la URL de la imagen, quizá eso pueda ayudar.
Saludos.
Si eso no te funciona sería mejor editar esa imagen para que el área amarilla no quede tan abajo.
Hola Potro.Muchas gracias.Lo de eliminar top no ha funcionado.Lo que voy a hacer es editar cada imagen y poner el título de cada gadget yo mismo con Photoshop.Y así quedará perfecto.El único inconveniente es tener que hacer y subir cada imagen por separado,pero una vez terminado seguro que queda genial.
Una vez más gracias,y saludos.
Me parece que es la elección más acertada pues además de que no tendrás el problema del centrado podrás ponerle una fuente que normalmente en el blog no podrías.
Saludos.
Hola potro, creo que tengo un problema que a los demas no les pasa, a mi no se me ven las imagenes http://descomposed.blogspot.com/
este es el código que puse antes de del ]]>
Buscador:
#CustomSearch1 h2 {
background: url(http://i709.photobucket.com/albums/ww97/melapelatodo/varios/buttonaa.gif) no-repeat top;
height: 30px;
}
el codigo de seguidores:
#Followers1 h2 {
background: url(http://i709.photobucket.com/albums/ww97/melapelatodo/varios/button11.gif) no-repeat top;
height: 30px;
}
También le he quitado el nombre del titulo y he puesto tal y como has indicado.
las he puesto en el buscador y en seguidores, pero aún así no me sale. Agradezco tu ayuda de antemano : )
No sé qué pueda ser, probé esos códigos en otra plantilla y no tuve problemas.
Debe haber algo en tu plantilla que no permite poner esas imágenes.
Potro, se puede agregar gagdets! mediante edicion HTMl de la plantilla, ya que tengo un error quenno puedo mover los gadgets por que me sale un error quee stoy tratanto de arreglar en el foro de blogger, bueno quiero saber por ejemplo agregar un gadget arriba del cuerpo del post o debajo! espero dejarme entender! gracias
Depende de qué gadget quieras agregar, por ejemplo, para un HTML/Javascript tendrías que pegar esto sin expandir artilugios:
<b:widget id='HTML88' locked='false' title='Gadget' type='HTML'/>
¿Dónde? Pues eso ya depende de tu plantilla, ubica el lugar de donde quieres que aparezca y ahí lo pones.
sii, Potro a eso me refería, pero si deseo agregarlo arriba del post, que linea busco igual debajo del posto, debajo o antes de que lineas las pongo?
gracias!
El que corresponde a las entradas es esta línea:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
El gadget lo debes pegar antes o después de ella.
Saludos.
gracias Potro!! :D
jajajajajajaja ese era el unico problema que yo tenia, me estaba matando la cabeza para saber que estaba haciendo mal...t_t que feliz que soy, ahora podre seguir con mi maldito blog muajajajajajaja.
saludos a todos y suerte.
y muchas gracias amigo que estes bien
Qué bueno que ya está todo resuelto :)
Saludos.
Me quedo espectacular... graciasssssssssssssss
Mi única duda es como modificar el tipo de letra y color de las mismas cuando utilizo
#Followers1 h2 {
background: url(URL de la imagen) no-repeat top;
height: 30px;
}
Saludos y nuevamente gracias
Por desgracia al gadget de seguidores no se le puede hace muchos cambios, pues aun cuando lo hagamos directo en la plantilla no los toma en cuenta y restablece sus valores.
Sin embargo los colores puedes personalizarlos haciendo click en Editar sobre el gadget y ahí personalizar los links y textos.
Saludos.
Gracias por la respuesta. Un abrazo.
hola que tal potro saludos,buen aporte ,pero tengo una duda,espero que me puedas ayudar porfavor,tambiens se le podria poner una imagen de fondo o una tabla html sin bordes con su color respectivo a el contenido de los gadgets .Como por ejempl si ves en mi blog de matematicas en la parte de etiquetas o en la del twitter hay como que una imagen de fondo quiero ponerlo eso o en otro color en los widgets de abajo y si se puede,ojala y se pueda para cada uno de los widgets y no se marque de modo general .
Gracias potro.
Hola orochimarusama,
Podrías intentarlo del mismo modo que se hace aquí, es decir, buscar el nombre del gadget y usar este código:
#Label1 {
background: url(URL de la imagen);
}
Eso hará que ese gadget en específico tenga un fondo distinto, sólo ten en cuenta que habrá gadgets a los que no se les podrá cambiar el fondo.
Saludos.
y para los de wordpress como lo hago
No lo sé, todo lo que se explica aquí es para Blogger.
Hola, hago todo lo que dice y no me funciona, revisa mi blog: http://www.disneycartoon2010.blogspot.com/
y no es mi plantilla porque lo probe y me funciono pero era grande asi que lo quite reduci la imagen y cuando lo volvi a hacer ya no funciono, y pongo el codigo en el nombre del gadget y se me desaparece..
Prueba con un height más grande, quizá con ese se arregle, sino entonces vemos otra opción ;)
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.