Tutorial | Meletakkan Drop Cap Pada Setiap Entri

Drop cap adalah huruf pertama yang dibesarkan dalam satu perenggan. Contohnya macam dalam gambar ni...

Dalam majalah pun selalu kita jumpa benda ni kan? Tutorial I ni cuma akan jadikan drop cap untuk perenggan yang pertama sahaja. Kalau korang nak buat jugak untuk perenggan ke-2 & seterusnya, kena la buat secara manual macam dalam Tutorial II.

I. Meletakkan Drop Cap Pada Setiap Entri

1. Pergi ke Dashboard > Design > Edit HTML.
2. Tekan (ctrl+F) & cari ]]></b:skin> dalam ruangan Edit HTML tadi.
3. Copy kod dibawah dan pastekan kod tersebut sebelum ]]></b:skin>

.post-body:first-letter, .post-body .dropcap:first-letter {font-weight:bold;font-size:65px;font-family:monotype corsiva;float:left;padding:0;margin:-4px 5px 0px 0px;position: relative;background-color:none;line-height:0.9;}

4. Preview. Saiz & margin drop cap tu korang boleh ubah ikut citarasa sendiri.
5. Save.

Dah siap. Senangkan? Cuma perlu buat sekali je & untuk entri² akan datang, drop cap ni akan jadi secara automatic.


II. Meletakkan Drop Cap Dalam Entri Secara Manual

1. Pergi ke Dashboard > Edit Posts. Klik pada post yang korang nak edit.
2. Tukarkan kepada mode HTML.
3. Copy kod dibawah dan pastekan pada mana² bahagian dalam entri korang. Jangan lupa tukarkan tulisan tu dengan huruf/perkataan yang korang nak jadikan drop cap.

<span style="font-weight: bold; float: left; padding: 0pt; margin: -4px 5px 0px 0px; position: relative; line-height: 0.9;" >Tukarkan huruf/perkataan yang korang nak jadikan drop cap di sini</span>

4. Preview & Save.

Selamat mencuba ya!

Sumber: Blogger Sentral

Tutorial Pilihan | Membuat Floating Button
Tutorial Pilihan | Membuat Table of Contents

. Tweet