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

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

Diakses dg kata kunci:

cara menghilangkan sidebar twitter (76), cara menghilangkan sidebar di twitter (52), menghilangkan sidebar twitter (35), cara menghilangkan sidebar pada twitter (30), membuat sidebar dengan css (23), merubah ukuran sidebar wordpress (16), cara merubah ukuran sidebar wordpress (14), mengatur sidebar wordpress (11), cara menghilangkan warna sidebar pada twitter (10), cara edit sidebar wordpress (10), menghapus sidebar (8), Styling (6), cara membuat sidebar css (5), merubah sidebar di wordpress (5), sidebar dengan css (5), memberi warna sidebar wordpress (5), cara edit sidebar depan wordpress (4), cara mengatur lebar widget pada wordpress (4), mengedit sidebar wordpress (4), merubah background sidebar wordpress (4), ubah lebar sidebar wordpress (4), mengatur sidebar di wordpress (4), mengatur sidebar (3), mengatur lebar sidebar pada wordpress (3), menghilangkan sidebar pada wordpress (3), cara mengatur lebar wordpress (3), cara mengubah lebar thema wp (2), mengubah sidebar (2), cara menghapus sidebar kanan (2), ganti warna sidebar wordpress (2), merubah style sidebar di wordpress (2), cara mengubah backround sidebar wordpress (2), cara mengubah ukuran widget sidebar wordpress (2), cara membuat sidebar twitter berwarna (2), cara membuat sidebar menggunakan CSS (2), styling sidebar wordpress (2), cara menambah merubah ukuran sidebar wordpress (2), cara menganti sidebar di wordpress (2), cara menganti warna tex di sidebar wp (2), Masang background warna di daftar halaman WP (2), rubah lebar sidebar wordpress (2), apa itu sidebar dalam twitter (2), membuat sidebar pada css (2), mengatur sidebar blog (2), menambah sidebar di bawah left right sidebar wp (2), cara buat Styling Sidebar (2), mengubah lebar wordpress (1), mengubah lebar side bar wp (1), mengubah font di twitter (1), menghilangkan right sidebar di wordpress (1)

Daftar Isi Membuat Theme WP

1. Cara Membuat Theme WordPress
2. Membangun Theme WP: Style.css
3. Membangun WP Theme: index.php
4. Bikin Theme WP: Designing
5. Bikin Tema WP: Layout
6. Membuat Theme: Heading
7. Buat Theme WordPress: Blog Header
8. Buat Theme WP: Konten
9. Mengatur Konten dalam Themes WordPress
10. Styling Konten WordPress
11. Membuat Sidebar Widget
12. Styling Sidebar
13. Membuat Footer
14. Membuat Custom Background
15. Membuat Drop Down Menu
16. Search Form Gaya dengan Image
17. Memasang Featured Image
18. Memperbaiki tampilan halaman depan
19. Membuat Featured Slide Show
20. Bermain-main dengan Looping WordPress
21. Memecah File Themes
22. Memecah Sidebar
23. Membuat File Single.php, archive.php, dll