Cambiar los títulos de la sidebar en Blogger

agosto 12, 2014


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








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 ♥






Te encantará:

40 pensamientos ¡falta el tuyo! ;)

  1. Ohhh eres una máquina!! Tenía muchas ganas de saber como hacer esto, y además muy bien explicado. Muchas gracias ^_^
    Besos cielete

    ResponderEliminar
    Respuestas
    1. ¡Gracias, amor!

      Si te animas a hacerlo... ¡me cuentas! :D

      Feliz tarde, preciosa ¡muaaaak!

      Eliminar
  2. GENIAL LO PRUEBO EN EL BLOG DE PRUEVA Y YA TE DIGO COMO QUEDA , EMOCIONADA ME TIENES CON LOS CODIGOS HACIA MUUUCHO TIEMPO QUE NO LOS TOCABA MIL GRACIAS POR TUS APORTACIONES Y TUTORIALES ME LO PASO GENIAL YA TENGO GANAS DEL CURSO EN NOVIEMBRE (CREO QUE ERAEN NOVIEMBRE EL CURSO HTMLJAJAJAJ ) UN ABRAZO

    ResponderEliminar
    Respuestas
    1. ¡Genial, Silvia!

      Pues ya me contarás :)

      Sí, al final empezamos en noviembre, que en octubre nace mi bebé y voy a necesitar unos diítas para adaptarme jejeje

      ¡Besos!

      Eliminar
  3. Cuando tenga tiempo lo pongo en práctica. Un millón de gracias!!!!

    ResponderEliminar
    Respuestas
    1. ¡Gracias a ti, guapa! Me alegra que te sea útil ;)

      Eliminar
  4. LOS ESTOY PROBANDO TOSDOS LOS TUTTORIALES EN UN BLOG DE PRUEVA Y SON GENIALES ME ENCATA UN BESAZO

    ResponderEliminar
  5. Sin duda este es el tutorial mas completo sobre este tema que he encontrado hasta la fecha. Te ha debido llevar mucho tiempo prepararlo, muchas gracias.
    Ahora eatoy acabando mi nuevo diseño y me entra la duda de si mantener mis títulos como imágenes o personalizarlos de esta manera. Me pregunto que será mejor pensando en el tiempo de carga.
    .

    ResponderEliminar
    Respuestas
    1. ¡Hola Laura!

      Pues depende de si te compensa el aumentar un poquitín el tiempo de carga manteniendo tus imágenes y si tienes tiempo para diseñar una nueva cada vez que añadas un nuevo elemento a tu sidebar ;)

      Es algo muy subjetivo.

      ¡Feliz finde!

      Eliminar
  6. Muchísimas Gracias Celia!!
    Acabo de descubrir tu blog (soy nuevísima en el mundo blogger) y me está ayudando un montón!!
    Mil gracias de nuevo!! :)

    ResponderEliminar
    Respuestas
    1. ¡Me alegro muchísimo, Diana! :D

      ¡¡Feliz semana y gracias a ti!!

      Eliminar
  7. Celia muchísimas gracias por este genial tutorial , porque no sólo pones los códigos sino que explicas el significado de cada uno para que seamos algo autónomos .. Yo lo voy aponer en práctica , además esos colores últimos que has usado , rosa y gris son los de mi blog .. hasta el códogo de color me has dejado .. GRACIAS GUAPETONA ..

    ResponderEliminar
    Respuestas
    1. ¡Hola Rocío!

      Claro, en eso consiste, ¡en aprender a hacerlo! No solo en copiar códigos ;)

      ¡Gracias a ti y feliz semana!

      Eliminar
  8. Enhorabuena por tu trabajo con este post... no sabes cuantas veces lo he visitado¡¡ Hoy por fin creo un post donde recomiendo este y además resumo todo el código que has proporcionado. Lo hago sobre todo para mí misma, que es algo para nunca olvidar, y así tengo el código resumidito.

    Repito, muy buen trabajo¡¡ de verdad admiro tu dedicación. Un saludo =)

    ResponderEliminar
    Respuestas
    1. ¡Hola Mónica!

      Muchas gracias por recomendarme, ¡es un detallazo!

      ¡Feliz miércoles! :)

      Eliminar
  9. Me estas salvando la vida muchísimo! no se como te lo voy a agradecer!

    ResponderEliminar
  10. No sabes como amo tus tutoriales, en serio, me has ayudado muchísimo para personalizar mi blog y la manera en que explicas hace que sea mucho más sencillo poder utilizar los códigos de HTML. ¡Muchas gracias!
    Un beso(:

    ResponderEliminar
  11. Estupenda entrada Celia!
    Sólo una pregunta: si quisiera instalar una nueva fuente (escogida en Google fonts) para usar en el cuerpo del blog, es decir en el texto de las entradas, ¿sabrías decirme dónde tengo que poner el código de dicha fuente?
    Muchísimas gracias!
    Saludos

    ResponderEliminar
    Respuestas
    1. ¡Hola Casala!

      Claro, tienes que buscar en tu plantilla Content en vez de Headings, instalas la fuente que quieras tal y como pone en el tutorial y en vez de en Headings, que es el código para la sidebar, pones el nombre de la fuente en:

      body {
      font: normal normal 14px NOMBRE DE TU FUENTE;

      que lo encontrarás justo debajo de Content :)

      ¡Espero que te sirva!

      Gracias ¡y feliz finde!

      Eliminar
  12. ¡¡Qué rapidez!! Muchísimas gracias, Celia.

    Buen finde para ti también!!

    ResponderEliminar
    Respuestas
    1. Es que me has pillado justo conectada en un ratito que se ha dormido el enano jejeje

      ¡¡Besos y ya me cuentas si te funciona!! ;)

      Eliminar
  13. Hola Celia, soy Mónica, el otro día por Facebook t pregunté una duda que tenía y me comentaste que no trabajabas el mismo programa de diseño que yo, pero estos tutoriales con HTML son geniales, acabo de cambiar el diseño de mis títulos. Si no te importa lo compartiré en un Blog que tenemos varias Blogueras por si lo necesitan y que visiten tu trabajo. ¡Feliz tarde!

    ResponderEliminar
    Respuestas
    1. ¡Muchas graciass. Mónica!

      Me alegra que te haya servido :)

      ¡¡Besos y feliz semana!!

      Eliminar
  14. Soy la única a la que no le aplica el formato a todos los títulos? en el de archivo de blog y lo más leído no me lo aplica, y no se porque...

    ResponderEliminar
    Respuestas
    1. ¡Ala! Es verdad ¡que raro!

      Pues a simple vista no sé decirte qué puede pasar, guapa... tendría que verlo desde dentro y hacer pruebas a ver qué les pasa a esos dos gadgets para que sean diferentes al resto...

      Eliminar
  15. Gracias por responder Celia, que ya se que ha pasado dos meses!

    Debo tener algo mal en la plantilla, investigaré.

    Un beso!

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Celia! que estoy entre emocionada y sorprendida!

      Me he puesto a mirar la plantilla como si supiera que hago y he detectado que los títulos estaban configurados como h4, desconozco la razón, y cambiando el formato a h2 ya está solucionado!

      Sientete orgullosa porque no se ni cambiarle la melodía al telefono y gracias a tus manuales y cursos he aprendido a trastear mi plantilla html!

      Gracias!

      Eliminar
  16. Hola Celia! Muchas gracias por el tutorial. He estado buscando para cambiar mi sidebar y el tuyo es el más completo y con el que me he atrevido a trastear. Lo he conseguido en parte, y es que la imagen que quería poner de fondo era un whasi-tape y en vez de cogerme la imagen entera me coge solo una parte y no se ve con la forma del whasi sino como un rectángulo...y no se cómo cambiarlo. Podrías echarle un vistazo y me cuentas qué puede ser?

    Mil gracias!!

    http://gemeleando.blogspot.com.es/

    ResponderEliminar
  17. Hola Celia, me encanta tu blog, pero tengo algún problema en mí HTLM Porque no puedo encontrar nada he intentada una y otra vez cambiar los títulos de las entradas del blog y ahora los títulos de los gadgets y tampoco, me puedes ayudar.
    Muchas gracias
    http://arapostres.blogspot.com

    ResponderEliminar
  18. Hola Celia, me encanta tu blog, pero tengo algún problema en mí HTLM Porque no puedo encontrar nada he intentada una y otra vez cambiar los títulos de las entradas del blog y ahora los títulos de los gadgets y tampoco, me puedes ayudar.
    Muchas gracias
    http://arapostres.blogspot.com

    ResponderEliminar
  19. FENOMENAL !!!! Aquí tienes el link de mi blog: http://mundosdecris.blogspot.com.es/
    En cuanto pueda lo aplicaré también a mi segundo blog y me pasaré a dejarte el link también.
    ¡ Muchas gracias por tu tiempo y ayudarnos con estas cosas tan utiles a las que no tenemos ni idea !

    ResponderEliminar
  20. lo prometido es deuda, aquí está mi segundo blog : http://aupairseronoser.blogspot.com.es/

    ResponderEliminar
  21. Execelente explicacion!!
    Estaba todo claro, con lujo de detalles. espero poder seguir aprendiendo mucho mas de usted

    ResponderEliminar
  22. Execelente explicacion!! Muchas gracias En cuanto pueda lo aplicaré mi blog

    ResponderEliminar
  23. super bueno!! pero no me funciono lo primero :( no se que habré hecho mal... joooooooooo

    ResponderEliminar
  24. Bueno creo que si lo he hecho bien, porque me sale bien los titulos de los de la izquierda.. pero yo queria cambiar era los de cada entrada... tienes algun post con esto?? Grancias!! me encanto tu explicación, super sencilla!!!

    ResponderEliminar
  25. Muchísimas gracias por este tutorial, Celia. LLevo un montón de días leyendo tutoriales para cambiar mi blog y ésta es la primera vez que entiendo paso a paso lo que voy haciendo.
    Un beso.

    ResponderEliminar
  26. Increíble, imposible explicarlo mejor, encima superdetallado, muchas pero muchísimas gracias!! Me ha servido de mucho.

    ResponderEliminar



¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥



El Perro de Papel es una Marca propiedad de Celia Espada García debidamente registrada en la OEPM, Modalidad M, Número 3527002 (0). Todos los recursos creados por Celia Espada García están correctamente protegidos y vinculados a la autora y no pueden usarse sin consentimiento previo.

Safe Creative #1408270134965
Los derechos de autor y propiedad intelectual del material compartido, tanto gratuitamente como de pago, en esta web y sus redes sociales pertenecen a "El Perro de Papel", exceptuando las referencias a otros creadores, los cuales están debidamente citados en los créditos.