Categories
Theme WordPress

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

By Lutvi

Bukan Ustadz, bukan Dai apalagi Kyai. Juga bukan guru. Hanya sekedar santri miskin ilmu yang coba mengamalkan 1 ayat warisan dari para ulama. Saat ini diamanahi menjadi admin web WordPress Indonesia

26 replies on “Styling Sidebar”

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 😀

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.

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)

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

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.

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….

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.

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..

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.