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>
<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>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Setelah itu anda simpan. Sekarang coba lihat hasilnya.
**** Semoga Bermanfaat ****
![](http://signatures.mylivesignature.com/85857/mdjiung/45e98c4ef56b409223ba47f78d4166ea.png)
0 komentar:
Post a Comment