Cara Membuat Sidebar Menjadi dua Kolom

Tweet

Kali ini saya akan menerangkan atau menjelaskan Cara Membuat Sidebar Menjadi dua Kolom, walau cara ini sudah banyak para blogger yang mengetahuinya tapi tidak ada salahnya juga buat tutorial ini sekedar untuk menambah koleksi postingan saya. Langsung saja ke tutorial Cara Membuat Sidebar Menjadi dua Kolom

1. Login ke Blogger2. Backup template sobat dulu dangan cara download klik Download Template Lengkap ( untuk menghindari ke salahan )
3. Jangan beri tanda centang pada Expand Template Widget
4. Cari kode seperti di bawah ini

#sidebar-wrapper {
background:transparent url(http://2.bp.blogspot.com/_rLYhkzmU7RY/TDvfgoOK5uI/AAAAAAAAAAU/kOXGkdBkMT4/s1600/sidebg.gif) repeat-y scroll left top;
width: 344px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
padding-left:10px;
}

Setiap template mempunyai susunan kode yang berbeda-beda, agar mudah untuk mencarinya tekan ctrl F lalu ketikan sidebar-wrapper atau sidebar-wrap, sudah saya bilang tadi setiap templaite mempunyai susunan yang berbeda-beda, sript yang di atas mungkin beda dengan script sobat, yang perlu kalian perhatikan adalah nilai widthnya saja.

kita lihat contoh di atas widthnya 344px, karna kita ingin membaginya menjadi dua tinggal bagi saja 344 : 2 = 172. Sehinggan setiap kolom mempunyai lebar 172px.
Setelah selesai langkah selanjutnya adalah

5. Copy kode sidebar-wrapper kalian menjadi dua, lalu ganti nama sidebar-wrapper menjadi sidebar-wrapper2 (terserah kalian mau di ganti 2, 3, dst. pokoknya jangan sama dengan yang di atas). contoh hasilnya seperti ini

#sidebar-wrapper {
background:transparent url(http://2.bp.blogspot.com/_rLYhkzmU7RY/TDvfgoOK5uI/AAAAAAAAAAU/kOXGkdBkMT4/s1600/sidebg.gif) repeat-y scroll left top;
width: 344px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
padding-left:10px;
}

#sidebar-wrapper3 {
background:transparent url(http://2.bp.blogspot.com/_rLYhkzmU7RY/TDvfgoOK5uI/AAAAAAAAAAU/kOXGkdBkMT4/s1600/sidebg.gif) repeat-y scroll left top;
width: 344px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
padding-left:10px;
}

Lalu ganti ukuran widthnya menjadi 172 (dengan nilai yang sudah kalian bagikan tadi)

6. Setelah itu cari kode

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Daftar Isi' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Statistik' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
</div>

Yang harus sobat perhatikan yaitu kode yang berwarna biru kalau yang berwarna merah setiap template berbeda-beda

7. Copy kode yang berwarna biru di atas lalu letakkan di bawah </div>. Ganti sidebar-wrapper pada kode ke-2 menjadi sidebar-wrapper3 dan id='sidebar' menjadi id='sidebar2'. Hasilnya akan seperti ini

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Daftar Isi' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='Statistik' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
</div>

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

8. Lalu klik Save Template atau simpan template
9. Dilihat hasilnya.