Membuat Drop Cap (Upgraded!)

Aku sudah membahas tentang bagaimana membuat drop cap seperti di koran pada postingan awal2 saya. Tapi cara itu aku nilai terlalu merepotkan, karena harus menambahkan kode HTML pada setiap post.

Dengan cara yang sudah di-"upgrade", tidak perlu lagi menambahkan kode HTML tersebut. Kamu cukup membuat post seperti biasa dan post kamu akan tampil dengan dropcap seperti di koran.

Caranya:

1. Masuk ke account Blogger kamu, kemudian klik "Layout" - "Edit HTML",
2. Cari kode
   

   .post-body {
   xxxxxxxxxx;
   xxxxxxxxxx;
   }

3. Kemudian tambahkan di bawahnya kode
   

   .post-body p.dropcap:first-letter {
   font-size:3em;
   float:left;
   margin-right:5px;
   vertical-align:text-top;
   }

4. Untuk mengatur ukuran DropCap-nya ubah font-size-nya jadi 2.5em, 2em, atau nilai-nilai yang lain,
5. Kemudian cari lagi kode
   

   <data:post.body/>

6. Kalau di kode tersebut tidak diapit oleh kode <p> dan </p>, tambahkan kode tersebut sehingga menjadi
   

   <p class='dropcap'> <data:post.body/> </p>

7. Dan kalau kode <data:post.body/> sudah diapit oleh kode <p> dan </p>, cukup tambahkan kode class='dropcap' sehingga jadi seperti kode di atas,
   
8. Klik "Save Template" kalau sudah selesai,
9. dan sekarang semua post kamu akan terlihat seperti di koran! :D

Selamat mencoba!

Blog this!

Suka artikel dari blog ini? Silakan masukkan alamat email kamu untuk mendapatkan artikel terbaru dari Info Blog. Gratis!!
Atau baca Feed dari blog ini di sini.

Delivered by FeedBurner