Membuat Dropcap pada Posting

Dropcap, yuph, udah pada tau kan gmn cara kerja dropcap ? Trik yg simple tapi menambah style postingan pada blog .
Disini saya akan share cara buatnya . Ada 2 cara membuat dropcap . Yang pertama dengan cara manual, dan yang kedua dengan cara otomatis .

Cara Manual,

1. Tambahkan css dibawah ini sob..
.frame{
background:transparent url(http://lh5.ggpht.com/_dfnTVAxeWMI/SmEap-CgdGI/AAAAAAAABhM/HbiEtsSoRaE/s800/strong.gif) no-repeat scroll center 2px;
display:block;
float:left;
font-size:44px;
font-weight:normal;
height:44px;
width:54px;
line-height:0.76em;
margin:0 0.18em 0 0;
padding:12px 0 0;
text-align:center;
text-transform:uppercase;
color:#333;
}

NB: >> http://lh5.ggpht.com/_dfnTVAxeWMI/SmEap-CgdGI/AAAAAAAABhM/HbiEtsSoRaE/s800/strong.gif ini adalah background gambar dari dropcap, bisa langsung temen2 ganti .

>> Untuk style lainya bisa temen2 ganti sendiri .

2. Selanjutnya, karna cara manual, butuh pemanggilan disetiap postingannya, jadi tambahin script dibawah ini disetiap awal posting,

<span class="frame">D</span>ropcap,

Nah muda, tapi cukup ribet untuk harus nambahn span disetiap posting,

sekarang cara yg otomatis,

1. Cari kode .post body { di css temen2 .
2. Lalu tambahin kode berikut .
.post-body p.dropcap:first-letter {
font-size:3em;
float:left;
margin-right:5px;
vertical-align:text-top;
} untuk mengatur besar kecil dropcapnya, ganti ajah style nya sesua kenginann .

3. Lalu cari kode
<data:post.body/>
Kalo code nya gag di apit <p> <data:post.body/> </p>

tambahin ajah, jadi <p class='dropcap'> <data:post.body/> </p>

kalo udah diapit sama <p> tinggal nambah class,

Nah selesai........ kalo yg otomatis langsung semua posting menggunakan dropcap .