-->

viernes, 13 de abril de 2007

Primera letra del párrafo más grande

He leído en Mandarin Design un tutorial sobre cómo conseguir lo que llama técnica Drop Caps. Consiste en hacer que la primera letra del párrafo aparezca más grande. No había oído hablar nunca de esa técnica, y buscando más información he encontrado en Ayuda para el blog otro tutorial basado en el anterior para conseguir el mismo efecto. Pues bien, entre uno y otro he sacado un tutorial sencillo que a mi me funciona y espero que a vosotros también.

1. Accedemos a Plantilla --> Edición de HTML y copiamos antes de ]]></b:skin> el siguiente código:

<style type="text/css">
.dropcaps {
float:left;
color: $titlecolor;
font-size:100px;
line-height:72px;
padding-top:2px;
padding-right:5px;
}
</style>

Algunas plantillas no tienen definido $titlecolor, así que sólo teneis que cambiarlo por $headerBgColor, o sino por el signo # seguido del código del color que querais. AQUÍ encontrareis una tabla de colores que os puede servir.
Además podeís ir variando los valores font-size, line-height, padding-top y padding-right hasta que se ajuste mejor a vuestro blog, ya que los que veis ahí arriba son los que a mi me quedaban mejor en el párrafo.

Guardais la plantilla y pasais al punto siguiente del tutorial.

2. Accedemos a Opciones --> Formato, y en el apartado Plantilla de entrada copiais el siguiente código:

<span class="dropcaps">LETRA</span>

De esta manera, ese código os aparecerá siempre que vayais a escribir una entrada, y sólo tendreis que cambiar la palabra "LETRA" por la primera letra de lo que vayais a escribir.

Guardais los valores y listo.

Ejemplo:

Tres empleados de la cafetería del parlamento iraquí han sido detenidos para ser interrogados sobre el atentado suicida con bomba ocurrido en el edificio, según fuentes legislativas.
Además, hoy se ha celebrado una sesión especial del parlamento para condenar el atentado.



NOTA: El resultado no lo podreis visualizar en "Vista previa", tendreis que guardar para poder ver cómo queda.

2 comentarios:

Anónimo dijo...

aixxx que bonito se está quedando mi blog

gracias

MonjaGuerrillera dijo...

Ya entendi, este es el codigo que al añadirlo a la plantilla te pone una flechita --> encima de la cabecera. Si quito el codigo de la letra cap, desaparece la flechita.

¿Habra una forma de dejar el codigo de la letra caps sin que aparezca esa flecha?

Gracias

 
Copyright © 2007 | Diseñado por BlogyWeb