24/01/2025

Memberi garis dibawah judul sidebar blogger

Memberi garis dibawah judul sidebar blogger

Salah satu cara untuk memodifikasi bagian judul sidebar agar terlihat tidak membosankan adalah dengan memberi garis dibawah judul sidebar, dengan cara memberikan sedikit kode CSS border pada bagian bawah judul sidebar.


Cara memberi garis dibawah judul sidebar blogger

1. Login di blogger.com.
2. Klik Tema, Edit HTML.
3. Cari kode berikut ini
div.widget > h2,
div.widget h2.title {
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
}
4. Hapus kode tersebut, lalu ganti dengan kode berikut ini
div.widget > h2,
div.widget h2.title {
border-bottom: solid 1px #000000;
margin: 0 0 1em 0;
font: $(widget.title.font);
color: $(widget.title.text.color);
}
5. Terakhir silahkan anda klik Simpan.

Catatan:
  • border-bottom adalah properti CSS yang digunakan untuk mengatur garis di bagian bawah suatu elemen
  • solid adalah salah satu jenis border atau garis pembatas, anda dapat mengganti dengan gaya lain semisal dotted, dash dan jenis border lainnya.
  • 1px adalah ukuran ketebalan border atau garis pembatas, anda dapat merubah sesuai yang anda inginkan, misal 5px dan seterusnya, semakin besar ukuran yang digunakan maka garis akan semakin tebal.
  • #000000 adalah kode warna hitam dalam pengkodean warna HTML, anda dapat menggantinya dengan warna lain semisal #cccccc, #111111 dan lain sebagainya atau anda dapat mencari kode warna lainnya di situs-situs pencarian.

Cara ini saya terapkan pada tema lama bawaan blogger yang bernama simple bold, mungkin berlaku untuk tema lainnya.
Semoga bermanfaat.