Membuat 2 kolom di bawah sidebar.

Dalam Template blogger default , biasanya kolom sidebar yang disediakan cuma satu. Fungsi dari kolom sidebar ini, tentu kita semua sudah pada tahu yaitu untuk menyimpan berbagai gadget atau pun widget, baik berupa gambar, aplikasi tambahan, file html, javascript dan masih banyak lagi, Sehingga tampilan web atau blog kita lebih rame. Sekarang bagaimana membuat tambahan kolom sidebar dan membaginya menjadi dua seperti gambar di samping?

Secara default kolom sidebar yang disediakan adalah seperti ini :

Bila ditambahkan dua kolom sidebar baru, nantinya seperti ini :

Contoh diatas menggunakan template minima yang telah diubah lebarnya. Untuk mengetahui cara menambah lebar template bisa dibaca blog lain klik disini. Sekarang kita langsung saja menuju cara  membuat dan membagi dua kolom sidebar.

Sigin di draft blogger
Dalam dasbor masuk Tata Letak --> Edit HTML


1.  Penambahan Kode CSS

Untuk menambah kolom di template, kita perlu membuat tambahan kode css. Karena yang akan kita buat adalah kolom untuk sidebar , kode yang perlu ditambahkan adalah kode dibawah ,Copy kode ini :

.singlesidebar {float:$endSide;  word-wrap:break-word;  overflow:hidden}

Letakkan atau paste dibawah kode ini

#sidebar-wrapper{ width:320px;  float:$endSide;  word-wrap:break-word;  overflow:hidden}

Kemudian Save atau simpan dulu.

2.  Kode ID untuk Pemanggilan

Setelah kode css kita buat, untuk memanggilnya , kita harus mendefenisikannya, yaitu dengan membuat ID pemanggilnya. Untuk itu Copy kode dibawah ini :

<div id='sidebar-wrapper'>
<div class='singlesidebar' style='width:100%'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div style='width:100%'><div class='singlesidebar' style='width:50%; float:left;'>
<b:section class='sidebar' id='sidebar1' preferred='yes'/>
</div>
<div class='singlesidebar' style='width:50%;float:right;'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>
</div><div style='clear:both'/>
</div>

Sekarang kita cari kode berikut , jika sudah ketemu hapus kode ini ganti dengan kode yang telah kita copy, kemudian paste kan disini .

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

Setelah itu anda simpan. Sekarang coba lihat hasilnya.

**** Semoga Bermanfaat ****

Artikel Terkait: