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

26 thoughts on “Styling Sidebar

    1. panghaidar

      Newbie bantu jawab ya heehe
      kalau diartikel ini kan pake warna dengan css nya
      background:#660000;
      nah kalau pengen gambar caranya kayak gini

      background-image:url(‘paper.gif’);
      keterangan:
      url: url tempat image berada
      paper.gif : nama gambar

      CMIIW 😀

    1. panghaidar

      Sama saya juga, pertama colom search nya melebar sampe ke sidebar kanan..
      terus di baris komen, edit ga ada background nya..
      ada yang bisa bantu jawab?

      1. masjajang

        coba di cek lagi kode2nya seperti nama id di file index.php atao dibagian # di file style.css, siapa tau ada salah ketik. soalnya disaya berhasil dengan sukses.

  1. ifliandry

    cara menaruh banner ukuran 300px x 250px di sidebar lebar, bagaimana mas caranya ? … apa langsung melalui style.css
    #lebar {
    background:url(‘banner.jpg’) no-repeat;
    height:250px;
    width:300px;
    display:block;
    margin-bottom:10px;
    }
    seperti diatas atau bagaimana mas ?. kalo seperti yg saya tulis diatas bukannya jadi rumit mas, karena setiap mau ganti banner, harus bongkar codingan.
    atau menggunakan
    mohon bantuannya mas … (saya baru lihat serial tutorial ini kemarin, sejauh ini, saya praktekan lancar, baru mentok disini)

    1. ifliandry

      oh kelupaan …. terima kasih atas tutorialnya … sangat menolong, nubie seperti saya untuk belajar bikin theme … tetap bagi-bagi ilmu mas .. 🙂

  2. ifliandry

    maaf nanya tapi jawab sendiri …

    jawabannya sudah ketemu mas .. lihat di web lain, caranya :
    bikin post, lalu insert image, coding image html-nya diambil, lalu copy paste di widget text. semoga benar seperti itu mas.
    -terus terang saya buta mengenai hal ini-
    tapi inget comment Mas Lutvi :
    “Kalau mau jadi webmaster, nggak boleh manja, Pengen semua tersedia itu sifatnya user … ”
    Terima kasih tutorialnya, saya sudah sampai tahap akhir footer, dan lancar.
    Ada satu pertanyaan tersisa, tutorialnya kenapa gak dijadikan buku ? saya rasa buku mengenai hal ini belum ada.

    Sukses selalu + semoga rejekinya lancar mas.

  3. Bis-Belajar Bisnis Internet

    Mas Lutvi Di bahas dong belajar php nya, malahnya untuk wp ini kita kyanya harus menguasai php setidaknya php dasar karena klo cuma menerapkan saja tp gk tau kode apa ini dan itunya, mumet he…mudah2 jd motivasi, trims tutorialnya sangat membantu….

  4. more

    I just want to mention I am new to weblog and seriously savored this page. Probably I’m planning to bookmark your website . You actually come with tremendous article content. Many thanks for sharing your blog.

  5. Gail Bleak

    Hello there, You have done an incredible job. I will definitely digg it and personally suggest to my friends. I am sure they will be benefited from this site.

  6. Grover Cira

    hey there and thank you for your information – I’ve definitely picked up anything new from right here. I did however expertise some technical issues using this web site, since I experienced to reload the site lots of times previous to I could get it to load properly. I had been wondering if your web host is OK? Not that I am complaining, but sluggish loading instances times will often affect your placement in google and could damage your high quality score if ads and marketing with Adwords. Anyway I’m adding this RSS to my email and could look out for a lot more of your respective intriguing content. Ensure that you update this again very soon..

  7. Irwin Chuma

    I need some very creative ideas that will loosen up the atmosphere as my students are very serious. Any word games or writing games are appreciated!.

  8. Burl Chapa

    I like the valuable information you provide in your articles. I’ll bookmark your blog and check again here frequently. I am quite certain I’ll learn lots of new stuff right here! Best of luck for the next!

Comments are closed.