Cara Membuat Huruf Drop Cap di Blog

"Bagaimana cara menerapkan tipografi Drop Cap huruf pertama awal paragraf artikel menjadi lebih besar di Blogger? yuk simak caranya, hanya css lho!"

YZG 31 August 0

Pernahkah sobat memperhatikan beberapa website memiliki tampilan huruf pertama di awal paragraf berukuran lebih besar dibandingkan huruf setelahnya?

drop cap (jamak drop caps) - (Tipografi) Sebuah huruf awal besar yang turun di bawah baris pertama paragraf , biasanya digunakan pada awal bagian atau bab dari sebuah buku. Wikipedia

CatatanDroid sendiri menerapkan tampilan ini karena dirasa lebih enak dilihat dan sebagai tanda pembeda awal paragraf pada artikel.

Bagaimana Cara Membuat Drop Cap di Blog?

Hanya Bermain Kode Html dan CSS - Membuat tampilan huruf awal Drop Cap di artikel blog cukup mudah dilakukan, pada konsepnya kita cukup menambahkan class baru pada selector span.

Yang selanjutnya class baru tersebut kita isi dengan beberapa baris kode css yang untuk membuat tampilannya berubah sesuai dengan yang kita inginkan.

Tutorial Membuat Drop Cap Huruf Awal Lebih Besar

Buka Blogger.com dan login dengan akun sobat
Buka menu Template/Theme
Klik icon tanda panah kebawah disamping tombol Customize/Kostumisasi
Lanjut pilih Edit HTML

Masukan kode CSS berikut ini diatas /b:skin

.first-letter { float: left; color: #636363; font-size: 47px; font-weight: 700; padding-right: 6px; line-height: 1em; }

Save template

Kode CSS first-letter telah berhasil kita pasang pada template blog kita, selanjutnya adalah tinggal menerapkannya kedalam artikel.

Yuk langsung praktek!

Penerapan Drop Cap di Artikel

Buat postingan baru / edit postingan yang sudah ada
Atur editor ke mode HTML view

Pada huruf awal bungkus dengan kode ini

<span class="first-letter">(huruf pertama)</span>

contoh kata awalnya Pernahkah :

<span class="first-letter">P</span>ernahkah

Review/Publish artikel dan lihat hasilnya

Nantinya huruf P yang telah kita bungkus dengan span class first-letter diatas akan terlihat lebih besar sendiri seperti huruf pertama pada awal paragraf artikel ini.

Penjelasan Tambahan

Kata first-letter pada class="first-letter" dapat kalian ubah sesuka hati pada langkap CSS diatas.

Misal ingin kalian ubah menjadi dropcaps atau huruf-awal, contoh:

.dropcaps { float: left; color: #636363; font-size: 47px; font-weight: 700; padding-right: 6px; line-height: 1em; }

atau

.huruf-awal { float: left; color: #636363; font-size: 47px; font-weight: 700; padding-right: 6px; line-height: 1em; }

Dan jangan lupa, ubah juga kata "first-letter" pada baris <span sesuai dengan kata class yang telah kalian ganti ya!

Jika ingin merubah warna silahkan ganti kode hex warna #636363 diatas, dan jika ingin merubah ukuran silahkan ubah 47px.

Penutup dan Kesimpulan

Bagaimana sobat, cukup mudah bukan? dengan kode CSS sederhana diatas kita dapat membuat tampilan awalan huruf paragraf artikel kita menjadi tampil beda.

Cara ini CatatanDroid dapatkan dari beberapa kode yang terdapat di dalam template-template blogger keluaran Arlinacode/idntheme. Thanks to them.

Akhir kata semoga artikel tips blog cara membuat drop cap di artikel blog kali ini dapat bermanfaat bagi sobat pembaca. Terima kasih dan Selamat mencoba! CatatanDroid