24/10/14

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, 
Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

14 comentarios

  1. Hola Blanca! Pues no sé cómo sería ese artículo que no había forma de entender.... Pero tú lo has explicado que más fácil, imposible!! Está genial, no sé si lo llegaré a usar en mi blog, pero aún así me ha gustado; muy clarito, sencillo y útil, enhorabuena!!
    Besos y feliz finde!!

    ResponderEliminar
  2. Buenas guapisima!
    Muy interesante, además le da un toque chic al post.
    Me voy a animar y lo voy a incluir en mis posts una temporada jejej
    Gracias! Como siempre, muy bien explicado y de utilidad!!!
    Un beso!!

    ResponderEliminar
  3. Así sí que parece súper fácil, este fin de semana lo pruebo en mi blog ¡Muchas gracias, Blanca! ❤


    Patricia.

    ResponderEliminar
  4. Pues muchas gracias por el tutorial, siempre vienen muy bien!

    ResponderEliminar
  5. Muchas gracias Blanca. Estoy tomando nota de todos tus consejos en la creación de mi blog, y ten por seguro que me estás siendo de gran ayuda.

    Un beso.
    Vicen.

    ResponderEliminar
  6. Muchas gracias Blanca, he seguido tus pasos y perfecto a la primera.
    Muchos besos

    ResponderEliminar
  7. Muchas, muchas gracias, Blanca. Es algo que llevo queriendo hacer desde hace algún tiempo, pero por más que había seguido los pasos de un tutorial para insertar esa letra capital, no funcionaba. Ahroa mismo lo pruebo... Estoy convencida de que funcionará, así que gracias de antemano.

    ResponderEliminar
  8. Muy útil este tutorial. Un saludo guapa

    ResponderEliminar
  9. Hola, Blanca.
    Tengo un problema con el espacio entre líneas, no lo puedo hacer más pequeño para que quede igual que los demás, más grande sí pero no más pequeño, ni siquiera poniendo 0.1 ¿esto tiene solución?

    Enhorabuena por tu blog y gracias por la ayuda tan útil que ofreces.

    Saludos.

    ResponderEliminar
  10. hola pues no lo he conseguido soy una negada si me explicas donde exactamente inserto el codigo te lo agradeceria

    ResponderEliminar
  11. Muchas gracias!!!también puesto en el blog. Besos!!

    ResponderEliminar
  12. Muchas gracias por este post! Ahora el blog se ve mucho más lindo ♥

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.