Hace un tiempo vimos cómo personalizar los títulos de la sidebar con colores, bordes, diferentes tipos de fuente, etc. Ahora, personalizaremos los títulos con imágenes. Empezamos?
IMAGEN DE FONDO
Una forma de personalizar el título de la sidebar con imágenes sería añadiendo una de fondo ,para ello trabajaremos con el código base que les di en la entrada anterior (ver detalles) que era este.
.sidebar h2{
background:#FFF;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}
Para añadir la imagen de fondo deberemos de cambiar #FFF; por url(url-de-la-imagen); de manera que el código quede así:
.sidebar h2{
background:url(url-de-la-imagen);
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}
Y el resultado será el siguiente:
ÍCONO AL COSTADO DEL TÍTULO
Otra forma de personalizar un título de sidebar con imágenes sería añadir algún ícono al costado del título, algo parecido a agregar un ícono a los títulos del post.
Para ello, en nuestro código base, deberemos de cambiar background: #FFF; por background: url(url-de-la-imagen) no-repeat;
El resultado será el siguiente, que pueden apreciar en mi blog de pruebas:
En fin, hay muchas formas de usar las imágenes para obtener un título bonito, personalizado y original. Ahora toca que personalicen sus títulos, ya sea con colores y borde, con imágenes e íconos o con una combinación.Hay que dejar volar la imaginación
26 opinaron:
Gracias por la ayuda; me parece que voy a personalizar los títulos :)
Mariana: si deseas puedes dejar algún link a tu blog. Espero que te sea útil la información .
S@lu2
Muy bueno ;)
Besos
Excelente tutorial!!! Bien explicado
Un besote :)
» squirrel: gracias por la visita .
» Yessmi: gracias ;)
S@lu2
Qué lindas opciones para personalizar la sidebar! Gracias Jéssica, ya voy a poner manos a la obra en mi blog de pruebas. Me van a venir muy bien porque mi sidebar está un poco descuidada y sin gracia, aprovecharé tus claras explicaciones.
Fabiana: gracias por la visita y si tienes alguna duda puedes hacérmela saber para poder ayudarte.
S@lu2
Aprendí mucho con este tutorial, pero, cómo hago para poner imágenes diferentes para cada título de la sidebar?¿es posible?
Besitos
G: por supuesto, es posible, mañana sacaré un tutorial precisamente para responder tu pregunta. Te pido un poquito de paciencia ;)
S@lu2
:(( 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...
Liila: he visto que has dejado dos mensajes, asi que necesito saber si deseas poner una misma imagen de fondo para todos los títulos de la sidebar o diferentes imágenes de fondo? De acuerdo a eso podré ayudarte :)
No desesperes
S@lu2
hola puedo dejar el color de fondo del titulo y agregar el icono sin borrar el color?
Gracias !!!!
Me pasa lo mismo que a lila, la imagen no se ve, le agregue height: xxpx; pero tampoco, me puedes ayudar?
ArTeSaNiC´a: sí, puedes poner un color de fondo y encima un ícono; sólo agregas esto, debajo de .sidebar h2 {
background:#7AB604 url("AQUÍ-URL-DE-LA-IMAGEN")no-repeat left ;
Si deseas que el ícono esté en la derecha, cambia left por right.
En cuanto a la imagen, dime si deseas que todas las imágenes sean iguales o diferentes para que pueda ayudarte.
S@lu2
Hola :D me gustó mucho lo de la imagen al costado... es lo que yo buscaba. Pero mi problema es que el ícono no se ve al costado, si no que tras el título :(( y es bastante incómodo :S
Ayudame porfa :o Gracias
Strokera: para que no se vea como fondo, agrega lo que está en negrita:
background:url(aquí-imagen) no-repeat right;
Éso solucionará el problema.
S@lu2
Muchas gracias Jéssica ;) y gracias también por ese otro consejo ;)
Strokera: gracias a ti por la visita y ánimo :)
S@lu2
Hola,
Me gustaría saber cómo se puede hacer para poner un icono diferente por ejemplo para Archivo, otro para Etiquetas, otro para Encuesta....
Muchas gracias!
Nuria
Anónimo:
Esta entrada te puede servir.
Si necesitas más ayuda, me avisas, por cierto la próximas vez que comentes, trata de tener tu perfil habilitado o deja un link a tu blog para poder visitarte :)
S@lu2
muchas gracias :D
tení tiempo buscando esto para esconder una categoría de un blog de un amigo xD
lo gurdaré en delicios para no perderlo (:
» Karina:
Me alegra que el tutorial te haya servido de ayuda!
S@lu2
Hola, Primero que nada te felicito por tu tema es muy hermoso.
Necesito preguntarte algo, a lo mejor puedas ayudarme.
Necesito editar el titulo del sidebar. Quedo por arriba de la imagen y lo necesito por debajo. Ya probe de todo y nada de nada esta mas fijo que :?
Espero que puedas ayudarme T.T
Saluttes ♥
Mi correo es alisonshanick@hotmail.com
Gracias, modifique el diseño .__.
» Alison Shanick:
Me alegra que hayas podido modificarlo y que el post te haya sido de ayuda.
S@lu2
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.