Halo teman-teman blogger! Pernahkah kalian merasa bosan dengan tampilan judul (heading) di blog yang itu-itu saja? Biasanya hanya teks tebal berwarna hitam atau biru standar bawaan template.

Kalian mungkin ingin menambahkan garis bawah (underline) yang estetik di bawah judul agar terlihat lebih profesional dan rapi. Tapi, masalahnya sering muncul:

• Saat pakai CSS biasa, garisnya malah melebar sampai ujung kanan layar (nabrak!).
• Gaya font atau warna teks jadi berubah dan tidak sesuai dengan tema blog.
• Bentrok dengan CSS bawaan template sehingga tampilan jadi berantakan.

Tenang, di artikel ini saya akan membagikan trik CSS khusus yang 100% Aman. Kita akan menggunakan teknik background-gradient dikombinasikan dengan selector ID (#) agar garis hanya muncul sepanjang teks judul saja, tanpa merusak layout blog kalian.

---

Apa Keunggulan Kode Ini?

Sebelum masuk ke kodenya, ini alasan kenapa cara ini paling direkomendasikan untuk Blogger:

1. Anti-Nabrak: Garis bawah hanya selebar teks judul, tidak akan melebar satu baris penuh.
2. Isolasi Total: Menggunakan ID khusus, jadi tidak akan mengubah tampilan judul lain di luar area yang kita tentukan.
3. Tanpa Ubah Font: Jenis huruf, ukuran, dan warna teks tetap mengikuti tema asli blog kalian.
4. Warna-Warni: H1, H2, H3, dan H4 bisa memiliki warna garis yang berbeda secara otomatis.

---

Langkah 1: Salin Kode CSS Berikut

Salin seluruh kode di dalam kotak di bawah ini. Kode ini berisi perintah untuk membuat garis tipis, rapi, dan berwarna-warni.

<style>
/* CSS KHUSUS UNTUK ID #judul-keren */
#judul-keren h1,
#judul-keren h2,
#judul-keren h3,
#judul-keren h4 {
    display: inline-block !important;  /* Kunci: Lebar cuma sepanjang teks */
    margin-bottom: 15px !important;
    padding-bottom: 5px !important;    /* Jarak teks ke garis */
    border-bottom: none !important;    /* Hapus border bawaan */
    
    /* Buat garis pakai background (anti-nabrak) */
    background-image: linear-gradient(to right, #e74c3c, #e74c3c);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 2px;         /* Garis tipis 2px */
}

/* Ganti warna garis untuk tiap level judul */
#judul-keren h1 { background-image: linear-gradient(to right, #e74c3c, #e74c3c); } /* Merah */
#judul-keren h2 { background-image: linear-gradient(to right, #3498db, #3498db); } /* Biru */
#judul-keren h3 { background-image: linear-gradient(to right, #2ecc71, #2ecc71); } /* Hijau */
#judul-keren h4 { background-image: linear-gradient(to right, #f1c40f, #f1c40f); } /* Kuning */
</style>

Catatan: Kalian bisa menaruh kode CSS ini di bagian atas postingan (Mode HTML), atau jika ingin diterapkan sitewide, taruh di menu Tata Letak > Edit HTML (sebelum tag </head>).

---

Penjelasan Detail Kode (Bedah Kode)

Bagi yang penasaran bagaimana kode ini bekerja sehingga tidak "nabrak", berikut penjelasannya:

1. Selector #judul-keren
Kita menggunakan tanda pagar (#) yang berarti kita menargetkan ID. Ini sangat spesifik. Artinya, gaya CSS ini HANYA akan berlaku pada elemen h1, h2, dst yang berada DI DALAM pembungkus <div id="judul-keren">. Judul lain di blog kalian yang tidak ada di dalam div ini tidak akan terpengaruh sama sekali. Ini adalah kunci keamanan agar template tidak rusak.

2. display: inline-block !important;
Secara default, judul (h1-h4) adalah elemen blok yang lebarnya 100% mengikuti layar. Perintah ini memaksa judul tersebut menjadi "inline-block", artinya lebarnya akan mengecil dan menyesuaikan panjang teksnya saja. Karena wadahnya mengecil, garis di bawahnya juga ikut mengecil.

3. Teknik background-image vs border
Kenapa tidak pakai border-bottom? Karena kadang border masih bisa ikut melebar jika ada konflik CSS. Kita menggunakan background-image: linear-gradient(...) yang diposisikan di left bottom. Karena background menempel pada elemen, dan elemennya sudah kita kecilkan (poin no 2), maka garisnya pasti pas sepanjang teks.

4. background-size: 100% 2px;
Ini mengatur ukuran garisnya. 100% artinya lebar garis mengikuti lebar teks (dari kiri sampai kanan kata terakhir). 2px adalah ketebalan garisnya yang dibuat tipis agar elegan.

5. Variasi Warna
Bagian bawah kode mendefinisikan ulang background-image khusus untuk masing-masing tag (h1 merah, h2 biru, dst) sehingga kalian punya hierarki warna yang jelas tanpa perlu menulis class manual satu per satu.

---

Langkah 2: Cara Memasang di Postingan Blogger

Agar kode di atas bekerja, kalian harus membungkus judul-judul kalian dengan sebuah "pembungkus" khusus. Ikuti langkah ini:

1. Buka editor postingan Blogger.
2. Klik ikon pensil di pojok kiri atas, lalu pilih HTML View (Tampilan HTML).
3. Paste kode CSS (di dalam tag <style>) di bagian paling atas postingan.
4. Lalu, bungkus judul-judul kalian dengan tag <div id="judul-keren"> di awal dan </div> di akhir kumpulan judul tersebut.

Contoh struktur HTML yang benar adalah seperti kode di bawah ini:

<!-- Paste Kode CSS di sini -->

<div id="judul-keren">
    <h1>Judul Utama Artikel Saya</h1>
    <p>Isi paragraf...</p>
    
    <h2>Sub Bab Pertama</h2>
    <p>Isi paragraf...</p>
    
    <h3>Detail Kecil</h3>
    <p>Isi paragraf...</p>
    
    <h4>Poin Penting</h4>
    <p>Isi paragraf...</p>
</div>

---

Demo Hasil Akhir (Aktif)

Di bawah ini adalah contoh LANGSUNG bagaimana hasilnya nanti di blog kalian. Perhatikan bagaimana garisnya pas di bawah teks dan warnanya berbeda-beda.

Jika kalian melihat hasil di atas, garisnya rapi kan? Tidak ada yang nabrak ke samping, dan warna teksnya pun tetap mengikuti tema blog kalian.

---

Kesimpulan

Menghias judul di Blogger sebenarnya mudah jika kita tahu triknya. Dengan menggunakan teknik inline-block dan background-gradient yang dibatasi oleh ID khusus, kita bisa membuat tampilan blog jauh lebih elegan tanpa takut merusak template yang sudah ada.

Selamat mencoba! Jangan lupa bagikan artikel ini jika bermanfaat bagi teman-teman blogger lainnya.