Styling Sidebar

Bagaimana pelajaran kemarin? Sudah berhasil semua kan? Kali ini kita akan buat supaya sidebar kita lebih cakep. Untuk pewarnaan, silahkan anda pilih sendiri-sendiri ya? Warna-warna yang dipakai di panduan ini semuanya berdasarkan selera saya.. hehehe… Anda bisa melihat daftar kode-kode warna di http://html-color-codes.com/ atau seperti saya menggunakan software color picker :)

Nah, kita langsung saja kalau gitu. Karena kali ini kita akan bahas soal styling (kalau bahasa Indonesia apa ya?) maka file yang kita utak-atik apa?

Bener… style.css jadi GPL, langsung buka style.css dan kita cari lokasi styling sidebarnya. Sebenarnya bisa langsung anda tambah di bawah, tapi kelak ketika anda mau mengubah-ubah lagi anda akan puyeng nyarinya hehehe…

Inilah style.css kita sebelumnya:

  1. #sidebar {
  2.   width:300px;
  3.   background:#FF9900;
  4.   float:left;
  5.   margin-left:10px;
  6.   }

Dan kita rubah seperti ini

  1. #sidebar {
  2.   width:300px;
  3.   float:left;
  4.   margin-left:10px;
  5. }
  6. #sidebar ul {
  7.   margin: 0px;
  8.   padding: 0px;
  9. }
  10. #sidebar li {
  11.   list-style:none;
  12.   font-size:12px;
  13.   margin-bottom:5px;
  14. }
  15. #sidebar li a {
  16.   text-decoration:none;
  17. }
  18. #sidebar h3 {
  19.   font-size:16px;
  20.   margin: 0 0 10px 0;
  21. }

Dan inilah hasilnya:

Hasil styling sidebar

Hasil styling sidebar

Saya menempatkan sebuah banner ukuran 300px x 250px di sidebar lebar sehingga bisa kelihatan ada bagian lebarnya. Sekarang tindakan terakhir adalah menghilangkan background warna abu-abu yang sementara saya pasang biar kelihatan bagian sidebarnya.

Mudah saja, cukup menghapus baris-baris sidebar di ID lebar, kiri dan kanan sehingga seperti ini:

  1. #lebar {
  2.   margin-bottom:10px;
  3. }
  4. #kiri {
  5.   width:145px;
  6.   float:left;
  7.   margin-right:10px;
  8. }
  9. #kanan {
  10.   width:145px;
  11.   float:left;
  12. }

Nah, sekarang anda lihat bagaimana hasil akhir blog anda. Insya Allah besok kita ngurusi bagian footernya. Sampai jumpa lagi

%d bloggers like this: