Sharing is caring!

Ya te he enseñado varias cosas sobre blogger hasta ahora, lo que no te había enseñado aún es a personalizar los títulos de la sidebar. Así que vamos a por otro tutorial de Blogger.

Es algo que muchas personas no toman muy en cuenta, pero si utilizas sidebar, es importante que también le des la misma importancia que le das a tus posts.

No digo que sea más importante, ya que a ti lo que te interesa es que lean tus posts. Lo que digo es que da mala imagen que entren a un post y vean una sidebar que no está cuidada.

Es importante en un blog que la sidebar no distraiga la atención del post. Esto no quiere decir que no debamos tener una sidebar bien hecha. Así que hoy aprenderás a personalizar los títulos para que se vea más bonita.

[box type=”warning”] Recuerda hacer un diseño acorde al diseño de tu blog. Así se verá un blog más profesional. Si haces cualquier tipo de diseño dispar, puede crear confusiones.[/box]

¿Qué es la sidebar?

Antes de empezar con cosas más técnicas, empecemos por el principio.

Una sidebar es una columna situada a la izquierda, derecha o a ambos lados del blog. Su utilidad es poder poner gadgets para que haya información relevante que queremos que aparezca en todos los posts.

No confundir con slider, el slideshare es otra cosa.

¿Qué son los gadgets?

Los gadgets son mini aplicaciones que ponemos en la sidebar para poder destacar diferente tipo de información según los gadgets que pongas en tu blog.

Existen gadgets de juegos, un reloj, el tiempo…, inútiles si quieres que tu blog sea profesional. Pero también existen diferentes gadgets útiles, como por ejemplo un contador de visitas para Blogger, el traductor, las entradas destacadas, el gadget de html/javascript, etc.

Los gadgets en Blogger son gratis.

Personalizar los títulos de la sidebar

Para personalizar los títulos de la sidebar te recomiendo que abras tu escritorio de blogger y lo hagas mientras lees este tutorial.

Ve a Tema → Personalizar → Avanzado → Añadir CSS. Allí es donde pegarás el código de las modificaciones que quieras hacer. Te recomiendo ir haciendo las modificaciones directamente allí, ya que ves cómo va quedando el título en la realidad y podrás ir cambiándolo si ves que no te gusta el resultado sin tener que guardarlo e ir al blog para verlo.

[box type=”warning”] No olvides nunca NO borrar los signos de ; ya que son los que cierran la línea y si no están puestos no funcionaría. Ni tampoco el de { ni } ya que abren y cierran el código y tampoco funcionaría. Copia el código tal cual e intenta no olvidar ningún signo.[/box]

Ponerle un fondo de color al título de la sidebar

Si quieres ponerle un fondo de color y ya está, el código será el siguiente:

.sidebar h2 {
text-align: center;
background-color: #A4A4A4;
padding-top: 10px;
padding-bottom: 10px;
}

Ahora te cuento paso a paso:

  • Text-align: Dónde está el texto alineado. Si lo quieres en el centro pones Center, si lo quieres en la izquierda pones left y si lo quieres en la derecha pones right.
  • Background-color: El color de fondo. Debes modificar el color cambiando el código de #A4A4A4 por alguno del color que te guste de esta página. Esa página te da los códigos de todos los colores.
  • Padding-top: La distancia que hay entre el texto y la parte superior del fondo. Contra más px pongas, más distancia habrá.
  • Padding-bottom: La distancia que hay entre el texto y la parte inferior del fondo.

Si no quieres que haya distancia, borra las líneas de padding-top y padding-bottom. O si quieres que sólo haya una de las dos, borra sólo la que no quieras.

fondo-titulo-sidebar

Redondear las esquinas

.sidebar h2 {
text-align: center;
background-color: #A4A4A4;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 50px 50px 50px 50px;
}

El text-align es como el de antes, si quieres lo puedes quitar. Lo que nos interesa es el border-radius.

El border-radius es el radio que se le da a cada borde. Así que si lo pones todo 50px tendrás las esquinas completamente redondeadas, si pones menos píxeles, estarán menos redondeadas. Lo que debes saber es lo siguiente:

  • El primer 50px corresponde a la esquina superior izquierda.
  • Segundo 50px corresponde a la esquina superior derecha.
  • El tercero corresponde a la esquina inferior derecha.
  • Y el último es la esquina inferior izquierda.

Es decir, que puedes ponerles a todos los píxeles o sólo a algunos. O algunos más y otros menos y conseguir diferentes efectos.

Ve probando con 50px y 0px en cada hueco y verás la de posibilidades que tienes de crear títulos increíbles

redondear-esquinas-titulo-sidebar

Ponerle un borde al título

Si quieres que simplemente sea un borde que cubra todo igual, debes poner este código:

.sidebar h2 {
text-align: center;
border: 1px solid #000000;
padding-top: 10px;
padding-bottom: 10px;
}

Como antes:

  • Text-align: alineación del texto. Lo pongo en todos porque me parece interesannte que la alineación sea en el centro. Creo que queda más bonito.
  • Border: borde del texto.
    1px es el grosor de la línea, contra más px le pongas más grosor tendrá.
    solid es el tipo de línea: sólido. Tambien puedes poner dotted si quieres linea de puntos, dashed si quieres lineas o double si quieres línea doble.
    El código #000000 es el color de la línea. En mi ejemplo es negro pero tu puedes ponerle el que quieras con la misma página que en el caso anterior.
  • El padding para separar el borde superior e inferior del texto.

Si lo que quieres es separar el borde superior, inferior, derecho e izquierdo, el código será el siguiente:

.sidebar h2 {
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
padding-top: 10px;
padding-bottom: 10px;
}

En este caso el text align y el padding es lo mismo que el anterior. El padding en este caso sería para la distancia que habría entre el borde superior e inferior y el texto.

Y los bordes se dividirían entre:

  • Border-top: borde superior.
  • Border-bottom: borde inferior.
  • Border-right: borde derecho.
  • Border-left: borde izquierdo.

En este caso podrías modificar igual que antes los píxeles, el tipo de línea y el color como antes. Puedes ponerlos todos igual o jugar con los grosores, los tipos de línea o el color de cada uno.

Como siempre, si hay algún borde que no quieres, borras esa línea de código o pones 0px y ya está.

Aquí también puedes añadirle una líndea de border-radius: 50px 50px 50px 50px; para redondear las esquinas. En cualquiera de los dos códigos que utilices funciona.

borde-titulo-sidebar

Personalizar el texto del título

Para poner una tipografía específica de google fonts, recuerda que te enseñé cómo instalarla en tu blog en este post de cómo usar google fonts en Blogger. Así que parto de la idea que ya sabes instalarla y sólo te enseño cómo añadirla a la sidebar y hacer algunas modificaciones.

El código sería el siguiente

.sidebar h2 {
font-family: ‘Merriweather’, serif;
font-size: 25px;
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}

Y las modificaciones serían:

  • Font-family: la fuente que has escogido. Si quieres usar la que has escogido en blogger borra esta línea. Si has escogido una de Google fonts reemplaza esta línea por la fuente que hayas escogido (el código CSS de la fuente).
  • Font-size: tamaño de fuente. Si quieres usar la de blogger, borra la lína. Si no quieres utilizarla, simplemente ve modificando los px hasta que tenga el tamaño que deseas.
  • Color: el color de la letra. Lo mismo, si quieres el color que le has puesto en blogger, borralo. Si no, modifica el código con alguno de la página de los códigos.
  • Text-transform: uppercase: La transformación del texto, en este caso indicamos que todo esté en mayúsculas. Si no quieres que sea así, borra la línea.
  • Letter-spacing: espaciado entre letras. Si no quieres que haya espaciado simplemente borra la línea o pon 0px, sino ve modificando los px hasta que tengan el espaciado que quieres.
  • Text-align: alineación del texto, como antes.

tipografia-tiutlo-sidebar

Todas las modificaciones juntas (fondo, redondeo de esquinas, bordes y cambio de tipografía)

El código completo quedaría así:

.sidebar h2 {
font-family: ‘Merriweather’, serif;
font-size: 25px;
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A4A4A4;
border-radius: 50px 50px 50px 50px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
padding-top: 10px;
padding-bottom: 10px;
}

Si no quieres poner diferentes tipos de borde y quieres el mismo en todos, o pones el mismo grosor, tipo de línea y color en todos por si quieres hacerle modificaciones en el futuro o pones border: 1px solid #000000;

Es decir, el código quedaría así:

.sidebar h2 {
font-family: ‘Merriweather’, serif;
font-size: 25px;
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
background-color: #A4A4A4;
border-radius: 50px 50px 50px 50px;
border: 1px solid #000000;
padding-top: 10px;
padding-bottom: 10px;
}

Y como antes, en ambos códigos puedes hacer las distintas modificaciones poniendo el tipo de fuente que has escogido, borrando líneas que no necesites, cambiando colores y modificando píxeles.

titulos-sidebar

Recomendación

A mi lo que me funcionaba mejor a la hora de modificar mis títulos cuando no sabía mucho, era copiar el código completo e ir borrando las líneas que no quería.

Así que mi recomendación es que utilices el código completo y lo copies en el CSS de tu blog, como te he explicado antes. Debes ir a Tema → Personalizar → Avanzado → Añadir CSS y allí pegar ese código.

De esta manera verás las modificaciones en directo. Podrás ir viendo lo que borras y si te está funcionando o no. En vez de ir recomponiendo tú el código con cada modificación.

No tengas miedo en ir modificando y jugando con el código de color, los píxeles y los tipos de línea, juega con ello.

¿Que te ha parecido este tutorial para tu blog en Blogger? ¿Habías personalizado alguna vez los títulos de tu sidebar?

¡Te mando un besazo enorme!

Laura Montón

¿QUIERES RECIBIR MÁS INFORMACIÓN SOBRE BLOGGER?

[box type=”download”]

Suscríbete a la newsletter y recibe todos los posts sobre blogger en tu email.

Además:
- Recibe descuentos exclusivos y noticias importantes antes que nadie.
- Forma parte de esta pequeña gran familia en la que todos nos apoyamos mutuamente.

He leído y acepto la política de privacidad (se encuentra al final de la web)

[/box]

Advertisements