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 {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.
background: url(AQUÍ-URL-IMAGEN-FONDO) left top;
}
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:
Muy buen tutorial; me encantó y es lo que buscaba.
Lo voy a poner en práctica
Besos :)
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
» 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
Excelente tutorial! lo pondré en práctica.
Por cierto, cómo hago para añadir emoticones al formulario de comentarios?
Besos
Muy buena explicación.
» squirrel: para añadir emoticones mira esta entrada.
» juan carlos: gracias por la visita.
S@lu2
Execelente post. Me ayudó mucho :)
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
Tantas formas de personalizar la sidebar...No me decido por una jeje
Adrián Aratan: escoje la que mejor se acomode al diseño de tu blog .
S@lu2
Qué tutorial tan bueno! Me encantó la imagen de Demo y creo que lo aplicaré a mi blog :D
Cómo hago para agregar otra columna a mi blog?
» 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
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!
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
:(( 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...
:$ no me funciona me sale error ......
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
Gracias, el código me sirvió mucho. :D
Yo: me alegra que te haya servido mi ayuda, gracias por la visita :)
S@lu2
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!
Bueno, toqueteando lo logre! Gracias de todas maneras!
Seguramente te estare molestando por otros asuntos mas adelante!
Saludos!
Piqué Passe: gracias por la visita y me alegro que hayas podido solucionar el problema :)
S@lu2
Gracias a vos! Y a tu blog!
Gracias por ser mi primer seguidora!
Saludos
Piqué Passe: no tienes nada que agradecer; gracias por la visita :)
S@lu2
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
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
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
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
» Zarinha:
Gracias por tus palabras y por la visita :)
S@lu2
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
» 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
tengo el mismo problema que jenny cuadno quito el titulo se me quita la imagen que puedo hacer?
» 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
Si lo haces el título será reemplazado por la imagen que coloques.
S@lu2
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
» 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
Jéssica,
Muchísimas gracias, como podrás ver, lo he hecho pero tampoco dá resultado ¿?
Muchísimos besos
» 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
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
» 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
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 ^^
» Fanamuro:
Para que los títulos de los post tengan dos colores o más, mira esta entrada.
S@lu2
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!!! (*≧▽≦)
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
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.