Membuat Drop Cap atau Huruf Awal Besar di Blogger

Pernah melihat artikel yang huruf pertamanya dibuat besar dan turun menempati beberapa baris? Gaya itu disebut drop cap. Sejak dulu drop cap dipakai di buku, majalah, dan koran untuk menandai awal bab atau artikel, dan sampai sekarang masih sering dipakai di situs berita dan blog.

Di Microsoft Word, fitur ini ada di menu Insert > Drop Cap. Blogger tidak punya tombolnya, tapi hasilnya bisa dibuat dengan sedikit CSS. Artikel ini membahas dua cara: manual per paragraf, atau otomatis di semua artikel.

Contoh drop cap

Drop cap cukup dipakai sekali, yaitu pada huruf pertama paragraf pembuka. Kalau dipasang di tengah artikel atau di banyak paragraf, tampilannya malah terlihat ramai dan mengganggu pembaca. Paragraf ini adalah contohnya: huruf D di awal turun menempati dua baris, lalu teks mengalir di sebelah kanannya.

Cara 1: Manual per paragraf

Dengan cara ini Anda menentukan sendiri paragraf mana yang memakai drop cap.

1. Buka Tema, klik tombol panah di samping Sesuaikan, lalu pilih Edit HTML.
2. Cari kode ]]></b:skin> (tekan Ctrl + F di dalam editor). Kalau tidak ada, cari </style> yang pertama.
3. Tempel CSS berikut tepat di atasnya, lalu simpan.

.dropcap {
  float: left;
  font-size: 3.6em;
  font-weight: 700;
  line-height: 0.8;
  margin: 0.08em 0.12em 0 0;
}

Setelah itu, buka postingan yang ingin diberi drop cap, lalu pindah ke Tampilan HTML (ikon pensil di kiri atas editor). Bungkus huruf pertama paragraf dengan kode berikut:

<p><span class="dropcap">R</span>endiansyah membahas ...</p>

Ganti huruf R dengan huruf pertama paragraf Anda, dan hapus huruf itu dari awal kalimat supaya tidak tertulis dua kali.

Cara 2: Otomatis di semua artikel

Kalau ingin setiap artikel langsung memakai drop cap tanpa mengedit postingan satu per satu, pakai CSS berikut sebagai pengganti CSS di Cara 1. Tempatnya sama, di atas ]]></b:skin>.

.post-body > p:first-of-type::first-letter {
  float: left;
  font-size: 3.6em;
  font-weight: 700;
  line-height: 0.8;
  margin: 0.08em 0.12em 0 0;
}

Kode ini hanya mengenai huruf pertama di paragraf pertama setiap artikel. Paragraf lain, judul, dan gambar tidak ikut berubah.

Menyesuaikan tampilan

Warna dan jenis huruf juga bisa diubah dengan menambahkan color dan font-family, misalnya:

  color: #2563eb;
  font-family: Georgia, serif;

Penutup

Pakai Cara 1 kalau drop cap hanya untuk artikel tertentu, atau Cara 2 kalau ingin semua artikel seragam. Setelah memasang, buka satu artikel di HP dan di komputer untuk memastikan ukurannya pas dengan tema blog Anda.