Hoy vamos a ver cómo personalizar los títulos de la sidebar de una forma sencilla, con colores, bordes, etc. Y en un próximos post, personalizaremos los títulos pero con alguna imagen.
El título de los blogs se puede personalizar en la etiqueta .sidebar h2{ que se encuentra en /* Sidebar Boxes en las plantillas Rounders (2,3 o 4) ; si usas la plantilla Mínima, verás /* Sidebar Content en lugar de /* Sidebar Boxes.
Pero en algunas plantillas, no se encuentra la etiqueta .sidebar h2{ así que todo será cuestión de agregarla debajo de /* Sidebar Boxes (/* Sidebar Content):
.sidebar h2{
background:#FFF;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;}
Éste es el código base que podremos personalizar de las siguientes formas.
CAMBIANDO EL COLOR DE FONDO
En background: #FFF; podremos cambiar el color del fondo del título de la sidebar. Si deseas saber cómo cmbinar colores y los códigos hexadecimales de los mismo, mira » esta entrada.
PERSONALIZANDO EL TEXTO
Puedes centrarlo o ubicarlo hacia la derecha agregando lo siguiente:
text-align: center; para centrar
text-align: right; para ubicarlo a la derecha
COLOCANDO BORDES
► Si deseas que tenga un borde del mismo color, grosor, estilo y que rodee todo el título, coloca: border: 1px solid #000000; donde puedes cambiar el grosor, estilo y color de borde.
► Pero si quieres que el borde no rodee todo el título o que cada lado tenga un color diferente y diferente estilo,entonces usa algunos de estos código si es que sólo deseas bordes en algunos lados o úsalos todos para dar diferentes estilos:
border-bottom: 2px dotted #C94093; borde inferior
border-left: 1px solid #78B749; borde izquierdo
border-right: 3px solid #3D81EE; borde derecho
border-top: 2px dotted #f2984c; borde superior
► Y si quieres aplicar otros estilos de borde,en lugar de solid, agregas:
double
dashed
ridge
solid
inset
groove
Ya sabemos la teoría, es momento de ponerlo en práctica; en un futuro post, veremos cómo personalizar los títulos de la sidebar pero con imágenes (de fondo, íconos, etc)
44 opinaron:
Muy bueno, lo aplicaré a mi sidebar
Vaya, no sabía que se podía hacer todo eso en un blog, parece un poco complicado. Por eso ya di de baja el mío.
Muchisimas gracias! Me sirvio mucho. LA explicacion es sencilla y las imagenes ayudan mucho!
Gracias de verdad!
» Anónimo: gracias, pero la próxima vez trata de tener tu perfil activo .
» Adrián Aratan: no es tan complicado como se ve , pruébalo y verás.
» Maru: gracias por tu visita y me alegra que te haya sido útil.
S@lu2
oh que lastima a mi no me sale el codigo :(
Jean Paul: si me dices exáctamente qué deseas hacer en la sidebar de tu blog (cambiar color de fondo, poner borde, etc) dímelo para que pueda ayudarte :)
S@lu2
Yessica lo que quiero hacer en mi sidebar es que el titulo de el gadget es decir el titulo del contenido de la sidebar tenga un borde mi plantilla es minima gracias
:)
Jean Paul: para agregar un borde al título de tu blog has lo siguiente:
- Busca en la plantilla /* Sidebar Content.
- Debajo de este, pega lo siguiente:
.sidebar h2{
background:#000;
border: 3px solid #ffa040;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;}
- Has click en guardar y listo.
Si tienes algún problema, me avisas.
S@lu2
hola una pregunta nomas, ya agregaste algun tutorial para poner esto pero con imagenes?
EmmaX: sí, hay un tutorial que hice para poner imágenes de fondo en los títulos de la sidebar; la entrada es ésta.
S@lu2
Gracias por responder Yessica. Te tengo una consulta en mi blog tengo varias listas de enlaces en ambas sidebars, y hace poco los links de ambas listas se han centrado y yo las keria hacia la izquierda. Podrias ver que puede ser? este es mi blog:
http://itaka-music.blogspot.com/
desde ya muchas gracias
Emmax: di un rápido vistazo a tu blog; quizás el problema pueda estar en esta parte del código:
.sidebar ul {
list-style: none;
margin: 0;
padding-left: 5px;
}
Cambia padding-left: 5px; a 0px o sino a -5px.
S@lu2
Desgraciadamente sigue igual, me tiene de la cabeza esto, todos los que me han tratado de resolver el problema siempre dicen de cambiar algun valor en esa parte del HTML, Puede ser que el problema este en otro lugar del codigo?
ya lo solucione, gracias igual. saludos
Emmax: iba a pedirte que me enviaras una copia de tu plantilla para ver el problema, pero me alegra que ya lo hayas solucionado :)
S@lu2
hola las explicaciones estan barbaras todo me salio pero tengo un problema yo reforme la minima para que tenga dos columnas, para el color de fondo de los titulos de la columnan de la derecha ya está, pero la izquierda no me quedó porque no se como?
http://www.blogger.com/html?blogID=1842577555647011433
acá te dejo la url.
Gracias!
ArTeSaNiC´a: he visto tu blog y vi qu los títulos de ambas sidebar están iguales, quizás arreglaste el problema :)
S@lu2
Por favor, para marcar un titulo con un color y darle forma,¿qué habría qué hacer?.
Sabes separar las entradas visualmente.
http://convoirunning.blogspot.com/
ofo1965:
Para modificar el título de las entradas puedes usar el código de esta misma entrada, pero debes pegar el código en post h3 en lugar de sidebar h2
Si necesitas más ayuda, estaré encantada de poder ayudarte.
S@lu2
hola! yo tengo un problemilla y esque los titulos de la sidebar y de la fecha de los post se han desconfigurado y son enormes!! :( me estoy volviendo loca porque no se como solucionarlo y me gustaría que me echases un clable por favor... Gracias!! :D
http://booktrendygirl.blogspot.com/
» Book trendy girl
En tu plantilla, busca esta parte:
h2 {
margin:1.5em 0 .75em;
font:normal normal 18% Georgia, Times, serif;
Cambia el 18% por otro número, ya sea mayor o menor.
Cualquier otra duda, me avisas :)
S@lu2
hola! he conseguido cambiar el tamaño de la fecha de los post pero no de los titulos de la sidebar...donde tengo el "yo soy..." "suscribete" etc... esto es un lío no comprendo el HTML y pongo el codigo que me dices pero no se cambia.
Por cierto gracias por el comentario me hizo ilusiooonn!! ;)
un beso!!
» Book trendy girl:
El código que te di debería de haber solucionado el problema; en todo caso, si el problema persiste, puedes enviarme una copia de tu plantilla a mi correo, el mismo que verás en la parte superior izquierda del blog (donde dice contacto).
S@lu2
Hola Jessica, te cuento hace tiempo puse color e icono en el titulo de la sidebar, ahora quiero cambiar el color y no hay manera podrias echarle un vistazo mi blog es http://lomasnueve.blogspot.com/. gracias de antemano
» FILÁ NOSOTRAS:
Para cambiar el color, si es que no se puede de la forma tradicional, sigue estos pasos:
Ingresa a Diseño - Edición de HTML.
Con ayuda de Ctrl+F busca .sidebar h2{
Verás la primera línea que dice:
background: #a0aae1 url(http://dl.dropbox.com/u/10284059/BLOG%20NOSOTRAS/LOGO.png) no-repeat right;
Sustituye #a0aae1 por otro color. Puedes ver los códigos de los colores aquí.
Si tienes otra consulta me avisas.
S@lu2
Muchas gracias Jéssica, me has quitado un prblema tenia puesta dos veces: sidebar h2{
ahora me faltan cambiar el color de el titulo de las entradas y tampoco hay manera, seguro que tengo algo mal
me alegro que te gusten las fotos son todos amig@s.
te explicas perfectamente. un saludo amiga
» FILÁ NOSOTRAS:
Para cambiar el color de los títulos de los post debes buscar:
.post h3 {
Te mando muchos saludos!
Hola. Tengo un problema: no aparecen en mi planilla ni .sidebar h2{ ni /* Sidebar Boxes ni tampoco (/* Sidebar Content):
Y no se donde puedo poner los codigos. Intenté ponerlos en lugares alternativos pero no me funciono. Agradezco tu ayuda!! saludos
» Diego:
Veo que tienes dos blogs, ¿en cuál de ellos está el problema?
S@lu2
Gracias me ha sido de mucha ayuda este tutorial.
G R A C I A S !!!
» uas.up.com:
Me alegra que te haya sido útil. Gracias por tu visita !
S@lu2
Holaa!!
Tengo una pregunta... Busco: /* Sidebar Boxes pero no lo encuentro en la plantilla no sé por qué, pero no encuentro ni eso ni .sidebar h2{ y no sé por qué puede ser...
Si busco sidebar solo encuentro lo siguiente:
/* begin LayoutCell, sidebar1 */
.art-content-layout .art-sidebar1
{
width: 200px;
}
body#layout .art-content-layout .art-sidebar1
{
width: 200px;
}
/* end LayoutCell, sidebar1 */
/* begin LayoutCell, content */
.art-content-layout .art-content
{
}
body#layout .art-content-layout .art-content
{
}
/* end LayoutCell, content */
/* begin LayoutCell, sidebar2 */
.art-content-layout .art-sidebar2
{
width: 200px;
}
body#layout .art-content-layout .art-sidebar2
{
width: 200px;
}
/* end LayoutCell, sidebar2 */
¿Se puede cambiar de otra manera? Es que edité la plantilla con Artisteer y no me deja cambiarla desde blogger y no se em guardo para poderla cambiar desde el programa...
Siento las molestias ^^
Hola!!
te quería decir que el apartado de *Sidebar Content, no me sale en la plantilla, lo he buscado con el truco de Ctrl+F , y no lo encuentro, una ayudita!!! porfaa!!! :D :O
Justo lo que andaba buscando... ¡Mil gracias!
Gaby
» Gabriella Yu:
Gracias a ti por la visita !
S@lu2
Hola. Intento lo que me dice, pero aunque pongo groove, no me aparece ese borde... no se que estoy haciendo mal :(
» Kaede:
En qué parte quieres agregar el borde?
S@lu2
El fondo del titulo de los gadjets de la side bar es azul, y yo queria que el fondo estuviera acompañado de un borde... pero bueno, quizas no se puede xD.
» Kaede:
Prueba a agregar lo siguiente.
Primero busca :
.sidebar h2{
Debajo de background:#0040a0;
agrega:
border: 6px groove #ffffff;
Me avisas si funciona; sino, para buscar otra alternativa.
S@lu2
Hola! de nuevo molesto por aqui, porque queria preguntar si hay una forma de cambiar el color de las letra del titulo de la side bar, sin que cambien el color de la fecha de las entradas, ni otros colores, solo las letras del titulo.
Desde ya muchas graias n_n.
» Kaede:
Sí se puede, simplemente añade estas líneas dentro de .sidebar h2{
color: #E8C67B;
font-size: 18px;
font-family: 'Arial';
Con color puedes cambiar el color de las letras; con font-size puedes cambiar el tamaño y con font-family puedes cambiar el tipo de fuente.
Si tienes alguna duda, no dudes en escribirme.
S@lu2
muchas gracias! Fue con el único post que pude localizar bien el código para personalizar. Muy bien explicado. Besos!
» Berenice:
Me alegra que te haya sido de ayuda. Gracias a ti por la visita !
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.