Títulos de la sidebar personalizados III: fondos con imágenes distintas


Hace un tiempo habíamos visto cómo personalizar los títulos de la sidebar con colores y bordes y luego con imágenes e íconos. Ahora vamos a ver otra forma de personalizar los títulos de nuestra sidebar . Y esta tercera forma viene a raíz de algunas preuntas, como la que hizo G:

Aprendí mucho con este tutorial, pero, cómo hago para poner imágenes diferentes para cada título de la sidebar? ¿es posible?
La respuesta es afirmativa y ahora vamos a ver cómo hacerlo.

♠ Lo primero que haremos será ingresar a nuestro blog y de ahí a Diseño/ Edición de HTML y Expandir plantillas de artilugios.
♠ Luego, buscamos el id del widget al que queremos poner un fondo a su título. Será sencillo de localizarlo si es que tiene un nombre. Por ejemplo, si mi gadget se llama "Datos personales" busco este nombre. Cuando lo encuentre se verá así:

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'>
Entonces, el id de este gadget es lo que está en negrita (Profile1) no incluyendo las comillas.

♠ Una vez que tengamos los id del gadget o gadgets cuyos títulos querramos cambiar de fondo, buscamos lo siguiente.Si nuestra plantilla es la mínima buscamos:

/* Sidebar Content
-------------------------------*/

Si usamos la plantilla rounders, buscamos:

/* Sidebar Boxes
-------------------------------*/

♠ Debajo de éste pegamos lo siguiente:

#Profile1 h2 {
background: url(AQUÍ-URL-IMAGEN-FONDO) left top;
}
Si queremos agregar otra imagen de fondo al título de otro gadget bastará con buscar su id y colocar un código igual al anterior solo que borraremos Profile1 y pondremos el id del otro gadget.

Si queremos colocar un ícono en lugar de un fondo, cambiaremos el código anterior del background por este otro: background: #FFFF99 url(aquí-imagen) no-repeat right; y seguiremos los otros pasos.

El resultado será el siguiente:

44 opinaron:

Yessmi

Muy buen tutorial; me encantó y es lo que buscaba.

Lo voy a poner en práctica

Besos :)

Responder
G

Vaya, tantas formas de personalizar la sidebar. No me las imaginaba. Esta me encanta, al igual que las anteriores. El problema va a ser decidirse por una :D

Un besote

Responder
Jéssica YK

» Yessmi: gracias y espero te sirva.

» squirrel: hasy varias formas yo sólo les he dado tres pero depende de la imaginación de uno ;).

S@lu2

Responder
squirrel

Excelente tutorial! lo pondré en práctica.
Por cierto, cómo hago para añadir emoticones al formulario de comentarios?

Besos

Responder
juan carlos

Muy buena explicación.

Responder
Jéssica YK

» squirrel: para añadir emoticones mira esta entrada.

» juan carlos: gracias por la visita.

S@lu2

Responder
Mariana

Execelente post. Me ayudó mucho :)

Responder
Jéssica YK

Mariana: qué bueno que te haya servido. La próxima vez trata de tener habilitado tu perfil o deja algún enlace a tu blog.

S@lu2

Responder
Adrián Aratan

Tantas formas de personalizar la sidebar...No me decido por una jeje

Responder
Jéssica YK

Adrián Aratan: escoje la que mejor se acomode al diseño de tu blog .

S@lu2

Responder
Genial

Qué tutorial tan bueno! Me encantó la imagen de Demo y creo que lo aplicaré a mi blog :D

Responder
Anónimo

Cómo hago para agregar otra columna a mi blog?

Responder
Jéssica YK

» Genial: se vería muy bien en tu blog :)

» Anónimo: para agregar otra sidebar mira este post. Por favor,la próxima vez trata de tener habilitado tu perfil.

S@lu2

Responder
Jenny del Castillo

Hay alguna manera no de poner una imagen de fondo, sino de sustituir el título de los widgets de la sidebar por una imagen? Porque en mi blog se queda la imagen pero encima aparecen las letras del título del widget. Cómo puedo quitar esas letras y por ejemplo agrandar el espacio del título para que se vea la imagen completa? Gracias!

Responder
Jéssica YK

Jenny del Castillo : para que no haya letras, sólo deja en blanco cada título del widget; entra a cada uno haciendo click en Editar y bórrale el título.

Ahora, para ampliar el título, busca con ayuda de CTRL+F la siguiente parte del código: .sidebar h2 { y debajo de éste pega lo siguiente:

width: 200px;
height: 200px;

Donde width es el ancho y height es el alto. Para que tu imagen se vea bien, todo será cuestión de cambiar los números (200px) por el tamaño de tu imagen.

S@lu2

Responder
Liila

:(( no puedo... hago todo lo que dices pero la imágen no se vé.

mi correo liila.8@hotmail.com

por favor necesito el título de la sidebar...

Responder
Anónimo

:$ no me funciona me sale error ......

Responder
Jéssica YK

Anónimo: para ayudarte necesito ver tu blog, asi que habilita tu perfil o deja algún enlace a tu blog para ver cómo puedo ayudarte.

S@lu2

Responder
Yo

Gracias, el código me sirvió mucho. :D

Responder
Jéssica YK

Yo: me alegra que te haya servido mi ayuda, gracias por la visita :)

S@lu2

Responder
Piqué Passe

Jessica!
Tengo el mismo problema que Jenny del Castillo, pero el tema esa que no encuentro .sidebar h2, por donde lo puedo agregar?
Ahh... y para que se vea la imagen, puse simplemente un punto como titulo, porque sino, tampoco salia la imagen. Es la única solución? Igual no me disgusta :p
Gracias de antemano!
Buenisimo sitio! Super completo!

Responder
Piqué Passe

Bueno, toqueteando lo logre! Gracias de todas maneras!
Seguramente te estare molestando por otros asuntos mas adelante!
Saludos!

Responder
Jéssica YK

Piqué Passe: gracias por la visita y me alegro que hayas podido solucionar el problema :)

S@lu2

Responder
Piqué Passe

Gracias a vos! Y a tu blog!
Gracias por ser mi primer seguidora!
Saludos

Responder
Jéssica YK

Piqué Passe: no tienes nada que agradecer; gracias por la visita :)

S@lu2

Responder
•● ஐ мąđΐšşØη ஐ ●•

hola!!!

bueno vengo a molestarte :( es que no me sale!! wuuaaa :(( jejeje

no encuentro esta parte:

/* Sidebar Content
-------------------------------*/


/* Sidebar Boxes
-------------------------------*/

no se como poner lo demás... te agradecería si pudiera ayudarme, apenas aprendo a usar html :S jejeje

de antemano gracias!!

http://madisson-westt-uk.blogspot.com/

ciaO!! :D

Responder
Jéssica YK

Como tu plantilla no es de Blogger, esa parte del código está con otro nombre; en todo caso, deberás pegar el código debajo de

/* ----- SIDEBAR -----

Si necesitas más ayuda, cuenta conmigo; también si deseas puedes personalizar los títulos de tu sidebar con colores y borde o con imágenes e íconos.

S@lu2

Responder
Zarinha

Me agrado bastante el consejo para cambiar titulos de slidebar por imagen, admiro tu dedicacion para publicar todos los tips y super bien explicados, graciaas. nos leemos pronto

Responder
Zarinha

Gracias por los tips me agradaron bastante, admiro tu dedicacion para publicar cada uno de los tips con muy buena explicación, recomendare este sitio, nos leemos pronto

atte :Zarinha

Responder
Jéssica YK

» Zarinha:
Gracias por tus palabras y por la visita :)

S@lu2

Responder
Patricia Ovies

Jéssica,
Acabo de descubrirte, gracias por tantas y tantas cosas que estoy descubriendo....que maravilla.
Tengo un pequeño problema, he cambiado colores bordes, etc pero no puedo añadir ninguna imagen, no encuentro /* Sidebar Content
-------------------------------*/ o boxes a pesar que la plantilla es de blogger, modelo scribe.
¿podrías por favor ayudarme?
Gracias otra vez y un abrazo

Responder
Jéssica YK

» Patricia Ovies:
Bienvenida al blog!
En cuanto a tu pregunta, en las plantillas Scribe, el contenido de la sidebar tiene este título:

/* Typography :: Sidebar

Búscalo en tu plantilla con ayuda de Ctrl+F.
Si tienes alguna duda,me avisas :)

S@lu2

Responder
Kas-Tro

tengo el mismo problema que jenny cuadno quito el titulo se me quita la imagen que puedo hacer?

Responder
Jéssica YK

» Kas-Tro:
Es bastante sencillo. Sigue los pasos de la entrada pero además deberás de hacer lo siguiente.

Ve a Diseño - Elementos de la página y has click en Editar del gadget o widget que vas personalizar.

Ahora borra el título y sustitúyelo por &nbsp;

Si lo haces el título será reemplazado por la imagen que coloques.

S@lu2

Responder
Patricia - La Siesta de Cristóbal

Jéssica,
Ya estoy aquçi otra vez,
Habçia seguido tus consejos y habçia quedado perfecto pero.... ya una vez hecho se me ocurrio poner una image al apartado de Publicado...., pues ha sido la perdiciçon porque ni poniendo alinear texto centrado consigo que lo este.¿Podrias de nuevo ayudarme, por favor?
Un abrazo

Responder
Jéssica YK

» Patricia:
Para centrar el texto prueba con esto: ve a la plantilla y debajo de /* Typography :: Sidebar pega el siguiente código:

#HTML11 h2 {
text-align:center;
}

Si tienes algún otro problema con tu plantilla, me avisas.

S@lu2

Responder
Patricia - La Siesta de Cristóbal

Jéssica,
Muchísimas gracias, como podrás ver, lo he hecho pero tampoco dá resultado ¿?
Muchísimos besos

Responder
Jéssica YK

» Patricia:
Ya veo, sigue el problema. Entonces, mándame una copia de tu plantilla, yo la subirá a mi blog de pruebas y veré lo que está pasando para darte una solución.
Mándame la copia a mi correo que podrás ver en la parte superior izquierda del blog.

S@lu2

Responder
Patricia - La Siesta de Cristóbal

Querida Jéssica,
Primero de todo....Feliz Navidad....
Te he mandado email tal como me decías porque no sé como enviarte copia de la plantilla.... Supongo que estás muy ocupada y no lo viste....¿Que hago?
Un abrazo muy fuerte

Responder
Jéssica YK

» Patricia:
Al parecer no vi tu correo porque llegó a la carpeta de Spam y recién acabo de leerlo.
Para descargar una copia de tu plantilla puedes ver esta entrada. Luego me la envías.

Disculpa por le demora en responder.

S@lu2

Responder
FANAMURO

gracias por tu tutorial me sirvio de mucho en casi ningun lado lo encontre tu blog es lindisimo

una pregunta tu no sabes como poner 2 colores en el titulo de las entradas ^^

Responder
Jéssica YK

» Fanamuro:
Para que los títulos de los post tengan dos colores o más, mira esta entrada.

S@lu2

Responder
Judith Zamora

Hola Jéssica!!
Te queria preguntar si me puedes ayudar a personalizar mi blog, algohe hecho pero creo que si me ayudas lo podría mejorar un montón! :)
Si no tienes tiempo, o no puedes por algo no pasa nada!! ♪♪♪♪~!
Bueno, gracias por todos tus consejos para los blogs!!!! ♡♡♡♡♡♡♡~~!!!!!
Espero tu respuesta!!! (*≧▽≦)

Responder
Beatriz

Hola. Estoy enamorada de tu blog y de lo altruísta que eres dedicando todo este tiempo a enseñar a otros a hacer su blog bonito.
Te aseguro que tendrás un lugar destacado en mi blog en cuento consiga tenerlo a mi gusto y ponerlo en marcha. De momento está en pruebas!
Me gustaría pedirte ayuda para eliminar el iconito de blogger que aparece junto a mi nombre en el widget de datos personales. He creado un favicon que aperece correctamente en mi barra de dirección pero el iconito del perfil no se va... y no me gusta nada... :(
Me puedes ayudar? Miles de gracias

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio