Desember 07, 2011

Membagi Elemen Sidebar Menjadi 2 Kolom

Situseo Blog : Membagi ruang sidebar menjadi dua kolom, sebagian dari template menggunakan ruang sidebar hanya satu kolom, untuk merubah menjadi dua kolom kita bisa menambahkan kode CSS didalam template untuk membagi dua sidebar tersebut menjadi 2 bagian.

Sebelumnya kita pernah membahas mengenai Membuat Footer Multi Kolom. Untuk membagi sidebar menjadi 2 kolom, kalian bisa mengikuti caranya sebagai berikut:
  • Login ke akun Blogger - pilih Design/Rancangan - Edit HTML
  • Sebelum melakukan penambahan script sebaiknya melakukan backup template terlebih dahulu, dengan men-Download Full Template, supaya mudah mengembalikan template kebentuk semula bila hasilnya tidak sesuai dengan yang di inginkan.
  • Kemudian cari kode CSS seperti ini:
#sidebar-wrapper {
width:300px;
color:#4c4c4c;
padding:0;
}

Setiap template penamaan dan penyusunan kode CSS nya berbada-beda, yang perlu diperhatikan adalah bagian lebar atau widthnya.

Kode CSS bagian sidebar seperti contoh diatas menunjukan lebar 300px, untuk membagi 2 kolom bagian sidebar, maka kita bagi 2 nilai widht nya, sehingga setiap sidebar mempunyai ukuran 150px. Untuk menghindari berdepetnya sidebar tersebut, kita kasih jarak 10px setiap masing-masing sidebar, sehingga menjadi lebarnya 140px.

Setelah menentukan lebar sidebar kanan dan kiri, selanjutnya kita membuat kode CSS tambahan dengan nama #sidebar-wrapper2 { sehingga menjadi seperti ini:

#sidebar-wrapper {
width:300px;
color:#4c4c4c;
padding:0;
}

#sidebar-wrapper2 {
width:300px;
color:#4c4c4c;
padding:0;
}

Setelah membuat duplicate #sidebar-wrapper { kemudian ganti ukuran widhtnya menajadi 140px dan tambahkan margin:0px 10px 0px 0px; dan float : right; pada bagian sidebar-wrapper2. Sehingga hasilnya menjadi seperti ini:

#sidebar-wrapper {
width:140px;
color:#4c4c4c;
padding:0;
}


#sidebar-wrapper2 {
width:140px;
color:#4c4c4c;
padding:0;
margin:0px 10px 0px 0px;
float : right;
}

Selanjutnya cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML13' locked='false' title='Random Post' type='HTML'>
</b:section>
</div>

Perhatikan kode yang berwarna merah, sedangkan yang berwarna hitam setiap template berbeda, dan dalam contoh tersebut menunjukan bahwa sidebar tersebut sudah berisi widget random post.

Tambahkan kode yang berwarna hijau dibawah kode </div> sehingga menjadi seperti ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML13' locked='false' title='Random Post' type='HTML'>
</b:section>
</div>

<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>

Save template dan lihat hasilnya

Semoga bermanfaat,

8 Diskusi untuk Membagi Elemen Sidebar Menjadi 2 Kolom

8 Desember 2011 14.33  

ane coba dulu ya gan scriptnya . . terima kasih ya

9 Desember 2011 06.19  

@universal testing machine: silahkan sob, semoga berhasil

3 Maret 2012 09.21  

Ko malah menjadi dua atas bawah gan... kalau mau kesamping gimana?

3 Maret 2012 14.03  

@Fatan : coba atur bagian margin-nya, angkanya kamu rubah sesuaikan dengan ukuran kerataan element yang dibagi tersebut,

margin:0px 10px 0px 0px;

angka pertama untuk atas-kanan-bawah-kiri

7 Maret 2012 08.38  

Gan, klo udah punya 2 sidebar tapi dikanan semua mo di rubah kanan kiri gimana gan.. dah ane rubah lsidebar dan rsidebar tetep g mo bergerak. posting tetep nempel paling kiri terus...

7 Maret 2012 09.06  

O ya Gan.. Tambah lagi.. Itu tadi ukuran widgetnya juga berbeda ..

8 Maret 2012 03.17  

gan, klo dah 2 sidebar tapi dikana posting semua di rubah jadi kanan kiri posting gimana...

30 Agustus 2012 11.19  

aku butuh ini, tapi di widget atas footer namanya apa ya?

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top