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:

#sidebar {
  width:300px;
  background:#FF9900;
  float:left;
  margin-left:10px;
  }

Dan kita rubah seperti ini

#sidebar {
	width:300px;
	float:left;
	margin-left:10px;
}
#sidebar ul {
	margin: 0px;
	padding: 0px;
}
#sidebar li {
	list-style:none;
	font-size:12px;
	margin-bottom:5px;	
}
#sidebar li a {
	text-decoration:none;
}
#sidebar h3 {
	font-size:16px;
	margin: 0 0 10px 0;
}

Dan inilah hasilnya:

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:

#lebar {
	margin-bottom:10px;
}
#kiri {
	width:145px;
	float:left;
	margin-right:10px;
}
#kanan {
	width:145px;
	float:left;
}

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