Untuk Membuat drop Cap sebenarnya harus lewat Edit HTML yang dapat merusak template kita . Namun ada cara lain.
Bila pada cara sebelumnya kita perlu mengedit HTML template blog, maka pada cara yang satu ini kita meletakkan langsung kode pembentuk drop cap di posisi Edit HTML postingan. Kode pembentuk drop cap yang dimaksud adalah seperti di bawah ini.
<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">huruf yang dijadikan drop cap</span>
Yang perlu diingat adalah saat meletakkan kode tersebut harus berada di posisi Edit HTML. Kemudian untuk mengetikkan huruf atau teks selanjutnya dapat dilakukan di Edit HTML atau Compose.
Contoh:
<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">H</span>ai, jumpa lagi dengan saya. Pada kesempatan kali ini kita akan membuat drop cap di posting tanpa harus mengedit HTML template blog. Bagi yang tidak mau mengedit template blog silakan menggunakan cara ini.
Maka hasilnya akan seperti ini.
Hai, jumpa lagi dengan saya. Pada kesempatan kali ini kita akan membuat drop cap di posting tanpa harus mengedit HTML template blog. Bagi yang tidak mau mengedit template blog silakan menggunakan cara ini.
Berikut penjelasan singkat mengenai kode di atas.
<span style="color: black; float: left; font-family: Times New Roman; font-size: 50px; line-height: 40px; padding-right: 3px; padding-top: 1px;">huruf yang dijadikan drop cap</span>
color: black; menunjukkan warna dari huruf drop cap, dalam hal ini warna huruf tersebut adalah black atau hitam. Anda dapat menggantinya dengan warna lain, misalnya red untuk merah, blue untuk biru, green untuk hijau, dan lain-lain.
float: left; ini menunjukkan kode agar tulisan awal diletakkan pada posisi kiri (left) alias mepet ke kiri.
font-family: Times New Roman; ini adalah jenis huruf drop cap, Anda dapat menggantinya dengan yang lain, misalnya Verdana.
font-size: 50px; ini adalah kode untuk besarnya huruf, bila ingin diganti dengan ukuran yang lain, silakan ubah nilainya saja.
line-height: 40px; ini merupakan kode untuk jarak baris.
padding-right: 3px; ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 3 pixel, jika Anda ingin mengganti jaraknya, silakan diubah nilainya.
padding-top: 1px; ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya.
0 komentar:
Posting Komentar