Senin, 03 Agustus 2009

Cara membuat sidebar sebelah kiri postingan

Sebenarnya sich cara buatnya gampang-gampang susah, tergantung dari amal perbuatan. @#*&%#$#&he2x
langsung z y..
nih saya kasih tutorialnya dulu.
pada template original dari blogger, rata-rata hanya terdapat sidebar pada salah satu sisi saja. ada yang di kanan saja dan ada yang di kiri saja. pgn buat sidebar baru di sisi lawannya??pgn kayak gini??

(oia, nih gambar saya ambil dari happydesug cz saya masih belum tw cara mendaptkannnya..hehe)
yups..kita mulai.
1. log in ke blog anda
2. pilih tab layout(tata letak), lalu pilih edit html pada subtabnya
3. download(back up) dulu templatenya, buat jaga-jaga klo ada kesalahan bisa kamu ubah lagi ke awal.4. centangkan dulu expand template widget nya.
5. carilah kode outer-wrapper, lalu rubah
lebarnya(width) sesuai keinginan anda, kalau punya saya lebarnya 880. untuk memudahkan pencarian tekan ctrl+f lalu masukkan kode yang ingin dicari.
outer-wrapper ==> mengatur template
main-wrapper ==> mengatur kolom postingan, dan
sidebar-wrapper ==> mengatur sidebar sebelah kanan
maka, width pada outer-wrapper adalah lebar dari template dan begitu juga dengan main-wrapper dan sidebar-wrapper. oia, satu lagi, padding adalah jarak tepi template dengan kolom.
jadi jika anda ingin membuat lebar sidebar kiri dan kanan 220px & 220px, lalu paddingnya 10px (x2), lebar kolom postingan(main-wrapper) 410px dan jarak antara sidebar kiri dengan kolom postingannya 10px, maka lebar templatenya harus lebih besar atau sama dengan 880px.g bingung kan??
d lanjut y..
untuk membuat sidebar baru yang ada di sebelah kiri, buatlah / copy kode berikut ini:
#sidebarkiri-wrapper {
width: 220px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Code yang berwarna merah anda bisa menggantinya dengan lebar yang anda inginkan, tapi ingat, perhatikanlah lebar pada main-wrapper, padding, dan sidebar-wrapper nya, seperti yang tadi telah saya katakan. Untuk kode yang berwarna hitam, menunjukan letak sidebarnya, jika pada template aslinya hanya terdapat sidebar kiri saja, lalu anda ingin membuat yang sebelah kanan, maka ganti kode tersebut menjadi right.
lalu taruh di atas kode #outer-wrapper.
6. carilah kode<div id='main-wrapper'> , lalu copy kode di bawah ini dan letakkan di atasnya.
<div id='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'/>
</div>
7. Jika anda tadi merubah lebar templatenya, maka anda sekarang harus merubah lebar header dan footer nya sesuai dengan lebar template. hal ini di lakukan agar header dan footer tampil maksimal. jika tidak dirubah juga tidak karena tidak dosa.hehe
Untuk merubahnya:
Header: cari kode #header-wrapper, dan rubahlah widthnya sesuai dengan lebar template anda.
Footer: cari kode #footer-wrapper, lakukan hal yang sama dengan yang di atas (header).
8. Jika sudah, klik simpan template, lalu lihatlah hasilnya di elemen halaman.

Jika hasilnya tidak sesuai dengan gambar yang di atas, ( sidebar kanan berada di bawah kolom postingan), berarti anda belum merubah lebar templatenya (#outer-wrapper) atau lebar template yang anda masukkan masih kurang.
gimana??hehe
Salam Blogger..^_^

5 komentar:

  1. sapa sja yg punya blog ni..
    thx bgt...

    BalasHapus
  2. heheheheh........

    thx buat tipsnya mas.....

    BalasHapus
  3. makasih mas, kunjungi juga blog adik ya :) http://prediksibola888.blogspot.com

    BalasHapus
  4. kok gak bisa klik tambahkan gadget lah.

    BalasHapus