Probando Dropcaps

Inauguramos este blog de pruebas con un pequeño hack que ya tenía ganas de probar, pero que sólo es útil si empiezas de cero un blog ya que si no tendrías que editar todas las entradas para poder verlos. Se trata de un código para que la primera letra del post se vea enorme. El código original lo he sacado de Beatiful Beta, un lugar muy recomendable para sacar jugo a blogger.

El truco viene a ser el siguiente:

Definimos una nueva clase denominada .dropcaps en las definiciones CSS de la plantilla.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

En mi caso he cambiado $headerBgColor por $titlecolor ya que la primera variable no está definida en mi plantilla.

el ultimo paso es usar esta línea en todas las entradas del blog:

(span class="dropcaps")D(/spanclass)
Sustituye los paréntesis por ><>


Este ejemplo sería para la letra D. Si lo que queremos escribir en el post por ejemplo sería: Bienvenidos a esta página, la letra que habría que resaltar sería la "B" con lo que el código en modo HTLM sería algo así: (una vez más, recordad lo de los paréntesis...)

(span class="dropcaps")B(/span)ienvenidos a esta página

Gracias a Beatiful Beta por este hack