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!"
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
