Hasil styling sidebar

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:

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:

#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

Dicari dengan kata kunci:

cara menghilangkan sidebar twitter,cara menghilangkan sidebar di twitter,menghilangkan sidebar twitter,cara menghilangkan sidebar pada twitter,membuat sidebar dengan css,mengatur sidebar wordpress,merubah ukuran sidebar wordpress,cara merubah ukuran sidebar wordpress,cara edit sidebar wordpress,cara menghilangkan warna sidebar pada twitter