cara Memberi Garis Pada Menu Sidebar

Meskipun judul sidebar blog sudah dirubah seperti tombol misalnya , tapi jika menu di bawahnya masih berwarna polos, Tapi tampilannya masih terasa kurang sempurna.

Nah, apalagi yang bisa dilakukan agar tampilan menu sidebar tersebut tampak lebih menarik? Sebenarnya ada banyak cara yang bisa dilakukan, misalnya dengan merubah warna dan memberi efek bayangan pada hurufnya. Tapi yang tidak kalah menarik adalah dengan memberi garis pada menu sidebar tersebut. Caranya pun cukup mudah. Jika ingin mencoba anda bisa ikuti beberapa langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
4. Kemudian carilah kode: .sidebar li

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.

6. Nah, sekarang sisipkanlah sebaris kode ini: border-bottom:1px solid #000000; di bawahnya. Soal urutan penempatannya tidak menjadi masalah. Sebagai catatan angka 1 adalah ukuran ketebalan garisnya. Sedangkan yang berwarna hijau adalah kode dari warna garisnya. Anda bisa rubah keduanya sesuai dengan ketebalan dan warna garis yang anda inginkan.Sebagai contoh cara penyisipannya akan terlihat seperti di bawah ini:

.sidebar li {
border-bottom:1px solid #000000;
line-height:1em;
margin:0px 0px 0;
padding-top:2px;
padding-left:15px;
padding-bottom:4px;
text-shadow:0 1px 0 #Ffffff;
}

(Anda tidak perlu bingung jika semua kode di atas tidak persis sama dengan kode yang terlihat pada blog anda, karena itu tergantung pada template yang kita gunakan . Yang penting adalah anda sudah menyisipkan sebaris kode tadi)

7. Jika sudah jangan lupa klik SIMPAN TEMPLATE
dan tunggu hingga proses selesai.
8. Sekarang anda sudah bisa melihat hasilnya dengan mengklik Lihat Blog.
Selamat Mencoba!

0 komentar: