Cambiar los títulos de la sidebar en Blogger

El tipo de letra que aparece por defecto en los títulos de los gadgets que añadimos en la sidebar de nuestro blog es... ¡horrorosa! Muy pequeñita, gris y en general, poco atractiva.

Una solución rápida es poner imágenes como títulos de nuestros diferentes gadgets, queda muy mono... pero aumenta el tiempo de carga. Puede que tú apenas lo notes, pero Google si. Así que, como siempre, es decisión tuya decidir si te compensa el aumento del tiempo de carga o no.

Hoy voy a contarte lo que hago yo para tener unos títulos en los gadgets de la sidebar a juego con el resto del blog usando programación. Verás que es muy sencillo, no se tarda nada y en unos minutos, con un poco de imaginación, ¡tendrás una sidebar tan mona como la de este blog!

Plantilla Little Spring // + Info //

Para verlo con detalle, vamos a personalizar los títulos de una sidebar de blogger desde cero, usando un blog de pruebas. Recuerda que es muy importante, si vas a tocar el código, tener un blog donde probar los diferentes cambios a aplicar o hacer una copia de seguridad de tu plantilla antes. ¡No tengamos luego un disgusto y nos carguemos la plantilla original!

ELEGIR LA FUENTE

1.- Empezamos con un blog nuevo, con la plantilla simple de Blogger, que es la que ofrece más opciones de personalización. Y añadimos un nuevo gadget a nuestra sidebar, el que sea, para ver como aparecen los títulos por defecto.

2.- Primero vamos a instalar una nueva fuente desde Google Fonts. Más bonita y original, a juego con la que tengamos en los títulos de nuestras entradas o en el título del Blog.

Ir a Google Fonts


3.- Yo he elegido esta:

Ahora pinchando en el botón azul de la derecha: Add to Collection.

4.- En la zona inferior, aparecerá una ventana en gris con el siguiente texto:

Hacemos click en USE, en la parte derecha.


5.- Bajamos hasta el apartado 3 de la siguiente ventana, donde encontraremos el código para instalar la nueva fuente en Blogger.

6.- Lo copiamos y entramos a nuestra plantilla HTML:

Plantilla >> Editar HTML


7.- Una vez estemos dentro de nuestra plantilla, pinchamos en cualquier zona dentro del cuadrado del código y pulsamos, a la vez, Control + F. Se abrirá nuestro buscador interno.

8.- Escribimos </head> y pulsamos Intro. Encontaremos el siguiente código:

9.- Justo encima de </head>, pegamos el código de nuestro tipo de letra. Así:

<link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'>

  </head>


10.- Y para que funcione correctamente, añadimos una barra como puedes ver a continuación:

<link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'/>

Exactamente entre css' y >.

¡Listo! Ya tenemos nuestra nueva fuente en Blogger. Seguimos.

APLICAR EL NUEVO ESTILO

Si has pinchado en Vista Previa para ver lo bonita que queda tu nueva fuente, habrás podido comprobar que no aparece en ningún sitio. ¡Pues claro! Has instalado la fuente, pero no le has dicho a Blogger dónde quieres que la muestre. Eso es lo que vamos a hacer a continuación.

1.- Abrimos de nuevo el buscador interno de nuestra plantilla (recuerda, Control + F) y buscamos:

<b:skin>

Verás que te aparece así:

Tienes que pinchar en el triangulito negro de la izquierda para ver todo el código. Lo que aparecerá es el estilo de tu plantilla, lo que le da forma y color a tu blog. Su piel, por decirlo de alguna manera. O el CSS si entiendes ya algo de código.

2.- Ahora vamos a buscar:

/* Headings

Encontrarás algo así:

Lo que estamos viendo es el formato de nuestros h2.

Estos h2 son los títulos de la sidebar y también la fecha, por lo que tenemos que tener esto muy en cuenta a la hora de aplicar modificaciones. Lo que hagamos directamente en nuestro h2, no solo afectará a la sidebar, sino al formato de la fecha de nuestras entradas.

¿Ves los símbolos de dólar ($)? Esas son las variables que se pueden modificar desde el Diseñador de Plantillas. Odio el Diseñador de Plantillas. Cuando aplicas algún cambio avanzado, como modificaciones en el CSS a través del famoso agregador de código, ¡se añade todo desordenado al final de tu plantilla!

No sobrescribe el código ya existente, como vamos a hacer nosotros, ni lo coloca donde debe ir (en este caso dentro de Headings), sino que lo va añadiendo al final de tu plantilla... ¡y organizar ese desorden luego es caótico). Por eso me gusta trabajar directamente con la plantilla HTML, el resultado es más limpio y profesional. Y es lo que voy a enseñarte a hacer.


3.- Como no queremos que nuestros cambios se apliquen también a la fecha, vamos a crear un nuevo ID. Es decir, vamos a decirle a Blogger que solo aplique ese nuevo formato a los títulos de nuestra sidebar. Para ello, añadimos el siguiente código:

.sidebar h2 {
}

En este orden:

/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

.sidebar h2 {
}

Ten mucho cuidado con las llaves {}. Dentro de ellas va el estilo de cada nuevo fragmento de código.


4.- Una vez tenemos la ID creada para los títulos de nuestra sidebar, vamos a añadir primero el tipo de letra que hemos instalado desde Google Fonts.

Añadiremos este código entre las llaves de nuestro nuevo ID. Así:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
}

Ya puedes ver cambios en Vista Previa, aunque todavía queda mucho por hacer para que se vea como nosotros queremos.

5.- Vamos a aumentar el tamaño para mejorar la legibilidad de nuestros títulos. Para ello, creamos una nueva variable dentro de .sidebar h2.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
}

En Vista Previa podemos ver como el tamaño de nuestra letra ha aumentado y puede leerse mejor.

Puedes aumentar o disminuir el número de píxeles hasta conseguir el tamaño que quieras.


6.- El siguiente paso es aplicarle el color que queramos. Otra nueva variable.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
}

Ya va cogiendo forma en Vista Previa ¿verdad?

Puedes cambiar mi código de color (el fragmento marcado en rosa) por el que quieras de esta página:

Colores HTML

PERSONALIZACIÓN AVANZADA

Hasta aquí hemos visto lo básico para personalizar los títulos de nuestra barra lateral de blogger.

Ahora vamos a ir un pasito más allá para conseguir un resultado mucho más profesional. De momento, puedes guardar los cambios que hemos hecho hasta ahora para no perderlos.

1.- Vamos a poner en mayúsculas el título de nuestros gadgets añadiendo una nueva variable:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
}

La función uppercase hace que todo el texto se vea en mayúsculas. Si, por el contrario, quieres que todo se vea en minúsculas, habría que usar:

text-transform: lowercase;

Y se vería así:

De momento, te aconsejo dejarlo en mayúsculas para poder ver el resultado del siguiente cambio que vamos a hacer.


2.- Ahora aumentaremos el espacio entre los caracteres de las palabras del título de nuestros gadgets:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
}

Puedes aumentar o reducir el número de píxeles hasta que quede tal y como quieres. Y si no te gusta el espaciado, solo tienes que borrar esta línea de tu código.

En algunas plantillas queda genial, dependiendo del tipo de letra que uses. Es cuestión de probar y decidir en base a los resultados.


3.- Además, podemos variar la alineación de nuestros títulos con un nuevo fragmento.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}

Opciones de alineación:

center >> centrado
right >> a la derecha
left >> a la izquierda


4.- Y un color de fondo.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A9E2F3;
}

Al que podemos redondear los bordes:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A9E2F3;
border-radius: 50px;
}

La función de redondear los bordes puede darnos mucho juego si la desglosamos:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A9E2F3;
border-radius: 50px 0px 0px 0px;
}

Redondeamos solo el borde superior izquierdo:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A9E2F3;
border-radius: 50px 50px 0px 0px;
}

Redondeamos los dos bordes superiores, el izquierdo y el derecho:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A9E2F3;
border-radius: 50px 0px 50px 0px;
}

Redondeamos el borde superior izquierdo y el inferior derecho:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A9E2F3;
border-radius: 50px 0px 0px 50px;
}

Redondeamos los dos bordes superior e inferior izquierdos:

Puedes ir haciendo pruebas hasta que consigas el resultado que quieres, aumentando y disminuyendo el número de píxeles de redondeo.

Yo voy a dejar el fondo en blanco, para que puedas ver bien el siguiente apartado.

DECORANDO LA SIDEBAR

Llegados a este punto, ya sabemos modificar nuestro tipo de letra y colores. Ahora vamos a añadir elementos decorativos.

1.- Nuestro código hasta ahora (recuerda que yo he puesto el fondo en blanco para que puedas ver mejor los siguientes cambios) es éste:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-radius: 50px 0px 0px 50px;
}


2.- Vamos a añadirle un marco.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-radius: 50px 0px 0px 50px;
border: 1px solid #A9E2F3;
}

Si te fijas, aparece esa forma porque he dejado el redondeo de bordes activado aunque el fondo esté en blanco.

Puedes modificar el redondeo de los bordes como ya hemos visto o eliminarlo y dejarlo cuadrado:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border: 1px solid #A9E2F3;
}

Y quedaría así:

Vamos a ver detenidamente este nuevo código y sus opciones de personalización.

border: 1px solid #A9E2F3;

1px >> el grosor de la línea de nuestro borde. Puedes probar a aumentarla.

solid >> el tipo de borde.

Otros tipos de borde disponibles:

dotted >> punteado.

border: 3px dotted #A9E2F3;

dashed >> rayas.

border: 3px dashed #A9E2F3;

double >> doble línea.

border: 3px double #A9E2F3;

#A9E2F3 >> Color del borde. Puedes cambiarlo por el que quieras, como ya hemos visto.


3.- Yo he dejado el siguiente código para ilustrar lo que voy a contarte a continuación:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border: 3px double #A9E2F3;
}

Podemos desglosar nuestro código border, como hicimos con el redondeo, para que los bordes aparezcan solo donde queremos.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-top: 3px double #A9E2F3;
border-bottom: 3px double #A9E2F3;
border-right: 0px double #A9E2F3;
border-left: 0px double #A9E2F3;
}

Borde doble solo arriba y abajo:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-top: 0px double #A9E2F3;
border-bottom: 0px double #A9E2F3;
border-right: 3px double #A9E2F3;
border-left: 3px double #A9E2F3;
}

Borde doble solo a la izquierda y a la derecha:

Y lo bueno de desglosarlos, ¡es que podemos aplicar diferentes tipos de borde a cada uno de los lados del título! Por ejemplo:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-top: 0px double #A9E2F3;
border-bottom: 1px solid #A9E2F3;
border-right: 3px double #A9E2F3;
border-left: 0px double #A9E2F3;
}

Borde doble a la derecha y sólido abajo:

Y combinar diferentes colores:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-top: 0px double #A9E2F3;
border-bottom: 1px solid #EEEEEE;
border-right: 0px double #A9E2F3;
border-left: 3px double #A9E2F3;
}

4.- Y, para finalizar este tutorial intensivo sobre cambiar los títulos de la sidebar de Blogger, vamos a ver cómo dejar más espacio entre los bordes que enmarcan nuestro título:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-top: 3px double #A9E2F3;
border-bottom: 3px double #A9E2F3;
border-right: 0px double #A9E2F3;
border-left: 0px double #A9E2F3;
padding: 10px;
}

Que también puedes desglosar para aplicar diferentes espacios a cada lado.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-top: 3px double #A9E2F3;
border-bottom: 3px double #A9E2F3;
border-right: 0px double #A9E2F3;
border-left: 0px double #A9E2F3;
padding-top: 10px;
padding-bottom: 5px;
}

APLICAR UNA IMAGEN DE FONDO

¿Prefieres añadir un diseño de fondo a tu sidebar? ¿Como el de la plantilla de ejemplo?

1.- Diseña una imagen con el ancho de tu sidebar. Puedes comprobar el ancho en:

Plantilla >> Personalizar >> Ajustar ancho

2.- Súbela a una web de alojamiento de imágenes en internet, tipo Dropbox o Picasa. Vamos a necesitar una URL pública para trabajar con ella.

3.- Abre de nuevo tu plantilla HTML y busca de nuevo tu código Headings.

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #FFFFFF;
border-top: 3px double #A9E2F3;
border-bottom: 3px double #A9E2F3;
border-right: 0px double #A9E2F3;
border-left: 0px double #A9E2F3;
padding-top: 10px;
padding-bottom: 5px;
}


4.- Vamos a modificar el trozo de código marcado en negrita:

background-color: #FFFFFF;

Sustituyéndolo por:

background: url(URL DE TU IMAGEN DISEÑADA) bottom no-repeat;

Así:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background: url(URL DE TU IMAGEN DISEÑADA) bottom no-repeat;
border-top: 3px double #A9E2F3;
border-bottom: 3px double #A9E2F3;
border-right: 0px double #A9E2F3;
border-left: 0px double #A9E2F3;
padding-top: 10px;
padding-bottom: 5px;
}

Quedaría así:

5.- Vamos a eliminar los bordes, para que se vea solo la imagen decorativa:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #FA5882;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background: url(URL DE TU IMAGEN DISEÑADA) bottom no-repeat;
padding-top: 10px;
padding-bottom: 5px;
}

Resultado:

Nos aseguramos de adaptar el color de nuestra letra al diseño, para que quede perfecto.

6.- Tal vez necesites adaptar los espacios (padding) para que tu imagen quede perfecta:

.sidebar h2 {
font-family: 'Waiting for the Sunrise', cursive;
font-size:18px;
color: #494949;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background: url(https://lh3.googleusercontent.com/-xruosqIF4qw/U8o4qDJDAQI/AAAAAAAAXH0/6AvLe9oKxSU/w201-h5-no/separador_small.png) bottom no-repeat;
padding-top: 10px;
padding-bottom: 10px;
}

¡Y ya lo tendríamos preparado para instalarlo en nuestro blog después de comprobar que funciona correctamente!

Sé que este tutorial es un poco extenso, pero he querido explicarte cada detalle para que te quede perfecto.

Lo positivo de programar los títulos de tu sidebar de esta manera es que cada vez que añadas un nuevo elemento, aparecerá así automáticamente, no tendrás que diseñar nuevas imágenes para tus títulos nunca más.

Si te animas a hacerlo ¡déjame el enlace a tu blog en comentarios! 

Es guay saber que el tiempo que inviertes en hacer tutoriales detallados paso a paso sirven para ayudar a alguien a mejorar el aspecto de su blog.

¿QUIERES APRENDER A DISEÑAR BLOGS PROFESIONALES EN BLOGGER?

¡CON UN MONTÓN DE PLANTILLAS Y MANUALES PARA PRACTICAR!

ECHA UN VISTAZO A MI PROGRAMA DISEÑA EL BLOG DE TUS SUEÑOS: 

SI QUIERES QUE DISEÑEMOS EL BLOG DE TUS SUEÑOS JUNTAS

HAZ CLICK AQUÍ:

---

Suscríbete a mis entradas por email ¡para no perderte nada!





♥ Las recibirás en tu bandeja de entrada el mismo día que sean publicadas ♥