Pernah nggak sih kamu membaca artikel di portal berita besar atau majalah, lalu huruf pertama di awal paragrafnya dibuat sangat besar dan elegan? Btw blog ini juga make kok, tuuhh intip di paling awal paragraf, hurufnya gede dengan elegan kan yaa? ihihihihi. Efek ini namanya Drop Cap. Nah, kamu juga bisa lho membuat efek kece ini di Blogger kamu sendiri biar tampilannya makin gacor, rapi, dan profesional!
Caranya gampang banget dan nggak perlu paham coding yang ribet. Cukup ikuti dua langkah super simpel di bawah ini:
Langkah 1: Format Tulisan Menjadi "Paragraf"
Langkah pertama ini dilakukan di halaman penulisan artikel (Post Editor).
- Buka dashboard Blogger kamu dan buat Postingan Baru.
- Ketik paragraf pembuka artikel kamu seperti biasa saja.
- Ini rahasianya: Blok (highlight) kalimat atau teks pembuka tersebut.
- Lihat ke menu toolbar di bagian atas (tepatnya di sebelah kiri ikon B / Bold). Klik menu dropdown format teks tersebut dan pilih format "Paragraf" (atau Paragraph).
Memilih format "Paragraf" ini sangat penting agar sistem Blogger membaca tulisanmu sebagai elemen khusus (tag
<p>), yang nantinya akan kita targetkan untuk diberi warna dan diperbesar.
Langkah 2: Pasang Kode CSS Drop Cap
Sekarang kita akan memasukkan kode ajaibnya supaya huruf pertama tersebut otomatis membesar dan memiliki warna gradasi yang kekinian.
- Kembali ke menu utama Blogger, lalu pilih menu Tema (Theme).
- Klik tanda panah kecil di sebelah tombol Sesuaikan, lalu pilih Edit HTML.
- Di dalam kotak kode, klik sembarang tempat lalu tekan Ctrl + F (Windows) atau Cmd + F (Mac) untuk memunculkan kolom pencarian.
- Ketik kode ini:
<b:skin>lalu tekan Enter. - Copy (Salin) kode CSS di bawah ini, lalu Paste (Tempel) tepat di ATAS kode
<b:skin>tersebut.
<style>
.post-body > p:first-of-type::first-letter {
float: left;
font-size: 3.8em;
line-height: 0.8;
font-weight: 900;
margin: 8px 12px 0 0;
padding: 8px 14px;
background: linear-gradient(135deg, #1e3a8a, #3b82f6);
color: white;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3);
}
</style>Langkah 3: Simpan dan Lihat Hasilnya!
Kalau kodenya sudah terpasang dengan rapi, jangan lupa klik ikon Disket di pojok kanan atas untuk menyimpan tema.
Sekarang, coba buka salah satu artikelmu. Voila! Huruf pertama di awal artikelmu otomatis berubah jadi lebih besar, kekinian dengan gradasi warna biru, lengkap dengan efek bayangan (shadow) yang halus.
💡 Tips Tambahan:
Bosan dengan warna biru? Kamu bisa banget mengubah warnanya! Cukup ganti kode #1e3a8a (biru gelap) dan #3b82f6 (biru terang) pada baris background: linear-gradient... dengan kode warna Hex (Hex Color Code) yang sesuai dengan tema blog kamu.
