Títulos de la sidebar personalizados I: colores, fuentes y bordes


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:

dotted


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:

Anónimo

Muy bueno, lo aplicaré a mi sidebar

Responder
Adrián Aratan

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.

Responder
Maru

Muchisimas gracias! Me sirvio mucho. LA explicacion es sencilla y las imagenes ayudan mucho!

Gracias de verdad!

Responder
Jéssica YK

» 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

Responder
Jean Paul

oh que lastima a mi no me sale el codigo :(

Responder
Jéssica YK

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

Responder
Jean Paul

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

:)

Responder
Jéssica YK

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

Responder
EmmaX

hola una pregunta nomas, ya agregaste algun tutorial para poner esto pero con imagenes?

Responder
Jéssica YK

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

Responder
EmmaX

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

Responder
Jéssica YK

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

Responder
EmmaX

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?

Responder
EmmaX

ya lo solucione, gracias igual. saludos

Responder
Jéssica YK

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

Responder
ArTeSaNiC´a

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!

Responder
Jéssica YK

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

Responder
ofo1965

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/

Responder
Jéssica YK

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

Responder
Book trendy girl

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/

Responder
Jéssica YK

» 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

Responder
Book trendy girl

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!!

Responder
Jéssica YK

» 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

Responder
FILÁ NOSOTRAS

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

Responder
Jéssica YK

» 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

Responder
FILÁ NOSOTRAS

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

Responder
Jéssica YK

» FILÁ NOSOTRAS:
Para cambiar el color de los títulos de los post debes buscar:
.post h3 {

Te mando muchos saludos!

Responder
Diego

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

Responder
Jéssica YK

» Diego:
Veo que tienes dos blogs, ¿en cuál de ellos está el problema?

S@lu2

Responder
uas-up.com

Gracias me ha sido de mucha ayuda este tutorial.

G R A C I A S !!!

Responder
Jéssica YK

» uas.up.com:
Me alegra que te haya sido útil. Gracias por tu visita !

S@lu2

Responder
Alberto
Este comentario ha sido eliminado por el autor.
Responder
Alberto

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 ^^

Responder
Judith Zamora

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

Responder
Gabriella Yu

Justo lo que andaba buscando... ¡Mil gracias!
Gaby

Responder
Jéssica YK

» Gabriella Yu:

Gracias a ti por la visita !

S@lu2

Responder
Kaede

Hola. Intento lo que me dice, pero aunque pongo groove, no me aparece ese borde... no se que estoy haciendo mal :(

Responder
Jéssica YK

» Kaede:
En qué parte quieres agregar el borde?

S@lu2

Responder
Kaede

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.

Responder
Jéssica YK

» 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

Responder
Kaede

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.

Jéssica YK

» 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

Responder
Berenice

muchas gracias! Fue con el único post que pude localizar bien el código para personalizar. Muy bien explicado. Besos!

Jéssica YK

» Berenice:
Me alegra que te haya sido de ayuda. Gracias a ti por la visita !

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