Como se supone que todas hemos creado un blog bonito de la muerte. Dedicamos mucho esfuerzo, tiempo y paciencia a mejorar nuestros sidebar, cabecera, menús,etc…¿Pero que pasa con la estética de nuestras entradas? A parte de tener una fotos bonitas y una estructura ordenada del post, se pueden hacer muchas cosas chulas con un poco de CSS («códigos de estilos» para entendernos). Y quedaros tranquilas porque no es necesario tocar la plantilla del blog para nada.

Este tutorial es para crear formatos específicos que después podemos aplicar a una parte de nuestro post. Para que os quede más claro, y me he  creado dos estilos diferentes; uno con el nombre de encabezado (especial para el encabezado o h2,  y otro que lo llamo subencabezado (y lo suelo aplicar a los subencabezados o h3). Así tengo dos estilos diferentes que puedo utilizar y combinar como quiera.

Es muy recomendable resaltar las partes importantes de cada post mediante las etiquetas H. En una plantilla con las etiquetas H optimizadas, H1 la tendrá el título del post que es la parte más importante y después podemos ayudar a estructurar el contenido añadiendo etiquetas h a las partes del texto que queremos darle relevancia ante Google ya que los buscadores tienen en cuenta estas etiquetas. Por poner un ejemplo en un post de un receta, le daria H2 al texto Ingredientes y un H3 a la preparación de la misma. En la siguiente imagen os muestro donde podéis añadir cada etiqueta a un texto previamente seleccionado en el panel de edición de entradas de blogger.

Antes de seguir vamos a ver unos conceptos básicos para entender y jugar con este código.

Background; Define el color del fondo. Si no queréis fondo, borrar esta línea.

Bordes: Son los bordes del estilo. Podemos indicar su grosor, formato (solid (línea continua), dotted (puntos), dashed (línea discontinua) y double (línea doble), posición (top (arriba), bottom(abajo), left (izquierda)  right (derecha) ).

Padding; es el parámetro que define la anchura del relleno de un elemento, por ejemplo el fondo o background. También se le puede añadir top, bottom, right y left para marcar diferentes anchuras relativas a cada situación. Por ejemplo, padding-top: 10px nos marcará la distancia a la parte superior de elemento.

Hay muchas más variables pero de momento con estas nos vale para el post de hoy.
Ahora no toca la parte práctica y vamos a ver como lo podemos aplicar a nuestro blog.

Primer paso→Ir a Plantilla→Personalizar→Avanzado→Añadir CSS. Creamos un código con un nombre determinado con el estilo que queremos para una parte del texto. Como os contaba antes yo lo aplicaré al encabezado y subencabezado de mis posts. Os recuerdo que estructurar nuestros posts con encabezados, subencabezado, encabezado secundario ayuda a mostrar un contenido ordenado y a que google lo interprete como contenido importante a la hora de posicionar.

En este ejemplo Etéreo sería el texto al que aplicamos el CSS y en mi caso también es el subencabezado (h2 si tenéis las etiquetas h optimizadas para SEO). Ahora os expongo algunas combinaciones de estilos:

CSS con fondo y borde inferior

.subencabezado {  /*nombre del estilo o botón*/
background: #cccccc; /*color fondo*/
border-bottom: 5px solid #b5f2f2; /*grosor, estilo y color borde inferior*/
font: normal normal 18px quicksand;  /*fuente*/
color:#ffffff;  /*color de la fuente*/
letter-spacing: 2px; /*separación entre las letras*/
text-align: center; /*podemos cambiar por right. Si lo queremos a la izq. borrar esta línea*/
text-transform: uppercase; /*texto se transforma en mayúsculas. Si no queremos mayúsculas, borrar esta línea*/
padding: 6px;  /*tamaño-ancho del fondo*/
}

A tener en cuenta: Debéis personalizar el código cambiando los valores en rosa por los vuestros. La fuente que he elegido, la instalé en el blog desde google fonts. Vosotros podéis optar por las que trae blogger sin problemas.
Si queremos que nuestro borde sea igual para todo el contorno, borramos -bottom en la línea de border. Si lo queremos para otras partes(top, right o left) además de bottom, añadimos un línea para cada una.

¿Le damos forma a las esquinas?

.subencabezado {  /*nombre del estilo o botón*/
background: #cccccc;
font: normal normal 18px quicksand;  /*fuente*/
color:#ffffff;  /*color de la fuente*/
letter-spacing: 2px; /*separación entre las letras*/
text-align: center; /*alineación del texto*/
text-transform: uppercase; /*texto se transforma en mayúsculas*/
padding: 6px;  /*tamaño del fondo*/
border-radius: 30px; /*forma la borde del fondo*/
}

Si modificamos la última línea con los 4 parámetros de las esquinas del bordes/fondo, podemos darles algunos diferentes. Mira este ejemplo:

Para conseguir ese efecto en 2 de las esquinas, sustituí la última línea del código anterior por ésta:
border-radius: 30px 0px 30px 0px;

¿Y si le quitamos el fondo?

Debemos borrar la línea de background y aseguraros que el color de la fuente no sea blanco

.subencabezado {  /*nombre del estilo o botón*/
border: 2px solid #b5f2f2;  /*borde: estilo y color*/
font: normal normal 18px quicksand;  /*fuente*/
color:#cccccc;  /*color de la fuente*/
letter-spacing: 2px; /*separación entre las letras*/
text-align: center; /*alineación del texto*/
text-transform: uppercase; /*texto se transforma en mayúsculas*/
padding: 6px;  /*tamaño del fondo*/
border-radius: 30px 0px 30px 0px; /*ángulos de las 4 esquinas del borde/fondo*/
}

Podéis ir jugando las 4 cifras de la última línea para conseguir efectos diferentes muy chulos.

Segundo paso→Una vez que ya hayamos añadido el css personalizado, solo no quedará marca sobre que texto queremos que se aplique. Vamos a editar nuestra entrada y desde la vista HTML, añadimos el siguiente código donde esta el texto elegido.

<div class=»nombre del estilo»>Texto al que aplicamos el estilo</div>

Si preferimos que el estilo se aplique solo al texto y no a la línea completa donde está, cambiar div por span. Quedaría así

<span class=»nombre del estilo»>texto</span>

Al cambiar el div por el span , el estilo es normal que no nos quede tan bien, pero con modificar algunos parámetros como el tamaño de la fuente o el padding, ya se soluciona. Así quedaría el código modificado y el resultado

.subencabezado {  /*nombre del estilo o botón*/
border: 2px solid #b5f2f2;  /*borde: estilo y color*/
font: normal normal 18px quicksand;  /*fuente*/
color:#cccccc;  /*color de la fuente*/
letter-spacing: 2px; /*separación entre las letras*/
text-align: center; /*alineación del texto*/
text-transform: uppercase; /*texto se transforma en mayúsculas*/
padding: 10px;  /*tamaño del fondo*/
border-radius: 30px 0px 30px 0px; /*ángulos de las 4 esquinas del borde/fondo*/
}

En mi opinión este estilo span lo veo más adecuado para hacer botones con enlaces con CSS, que lo veremos en los próximos días.
Nos os preocupéis si no veis los cambios de estilo a primera vista en el editor de entrada. Dando a vista previa notareis la diferencia.

Os aconsejo recordar el nombre de cada estilo que habéis creado, en el caso que sean varios, para aplicarlo al texto correcto y poder encontrarlo en la plantilla en caso de querer modificarlo. Recordar que el CSS que añadimos desde personalizar plantilla, va directamente al html y desaparece de donde lo hemos introducido. Esta opción de añadir el css sin tocar la plantilla es un atajo para evitar entrar en el el html pero que quizás no contribuya mucho a que nuestro código este ordenado.

NOTA: Si solo queréis aplicar un determinado y puntual estilo CSS en una parte de un post, no hace falta todos los pasos anteriores. Con añadir el estilo en la vista html del post, es suficiente. Como los parámetros son igual que los comentados, os dejo un ejemplo de como sería el código a añadir:

<div style=»border:  2px dashed #b5f2f2; font: normal normal 16px quicksand; padding: 6px;»>texto al que queréis dar formato</div>

Os he simplificado y cambio algún parámetro para que veas diferentes opciones. Aquí el resultado.

Si os ha resultado útil esta entrada, no olvides compartirla y estar atentos a la siguiente entrega de Pon bonitas tus entradas con CSS, dedicada a crear botones con enlaces.

¿Soléis dedicar tiempo a darle un estilo diferente a vuestras entradas? Yo reconozco que soy un poco adicta a este tema. En los próximos días os enseñaré como crear botones con enlaces y diferentes estilos para no sobrecargar el blog con imágenes. Un saludo y nos vemos por las redes.

 

 

¿Te ha sido de utilidad el artículo?
(Votos: 0 Promedio: 0)

Pin It on Pinterest