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;
}

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

Eits hampir lupa, untuk menghilangkan warna 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;
}

Selamat berkreasi...!



Source : Wordpress

Wordpress

Tweet