Cómo poner la primera letra del texto distinta al resto en blogger

Alguien me dejó un día en el formualrio una petición para que explicara, por favor, cómo poner la primera letra del texto de manera distinta en Blogger.

Así:

Supongo que querrá imitar el estilo revista.

Aparentemente vio un tutorial por ahí pero no lo entendió y quería que yo lo explicara con mis palabras.

Para que te quedes tranquila de todos modos, yo tampoco lo entendí. Vamos, en mi opinión no tenía ningún sentido lo que decía y me parece normal que no te saliera.

Realmente es mucho más sencillo que todo eso. Os dejo un código que he escrito yo misma gracias a la ayuda de este artículo de about.com

Cómo hacer que la primera letra de un post sea diferente:

1) Vamos a Añadir CSS

2) Pegamos mi código:

.post-body:first-letter {
/*first-letter post pdb*/
font-family: Rouge Script;
}

3) Cambiamos lo que necesitemos

Me explico:

• Tras los dos puntos detrás de font-family escribiremos la fuente que queramos usar. Deberá ser una de Blogger o una de Google fonts (vemos cómo instalar las de Google Fonts en el Curso Intermedio para blogueras)

• Tras esa línea de código y antes del { que está solo, podemos añadir más líneas con cambios si lo queremos:

font-size: 50px;
lo pondríamos si quisiéramos que esa primera letra fuera más grande. Escribiremos un número más grande o más pequeño que 50 dependiendo cómo de grande queramos que sea la letra

font-weight: bold;
lo pondríamos si quisiéramos que la letra se viera en negrita

font-style: italic;
lo pondríamos si quisiéramos que la letra se viera en cursiva

color: #f9b4b4;
lo pondríamos si quisiéramos que la letra se viera de otro color. Sustituyendo ese código hexadecimal, que es el rosa que suelo usar yo en mi blog, por el color que vosotras queráis.

4. Si hemos cambiado el tamaño de la fuente, ponemos tras el código anterior esto otro:

.post-body:first-line { 
line-height: 2em; 
}

De este modo arreglaremos el espacio entre las líneas, pues al poner la fuente más grande se os separará del título del post. Si ponéis este otro código debajo os quedará bien.

Si lo necesitáis ajustar, podéis cambiar el 2 por un número menor o mayor (acepta y medios: 0.5, 1.5, 2.5, etc.)

Y con eso ya lo tenéis.

Espero que os sea útil.

Besotes, 

Facebook | Twitter | Pinterest | Bloglovin'

Temas relacionados:

1. Cómo bloquear el color del título de nuestro post
2. Cómo poner el título del post al lado de la fecha
3. Cómo cambiar el color azul que sale cuando algo selecciona algo en nuestro blog