Cara menambah 2 kolom di bawah sidebar

Trik Blogger - Wuuihh, akhirnya sempat buat tulisan baru soal trik blogger. Yang pasti, setiap postingan saya mengenai trik blogger ini adalah hasil dari pengalaman pribadi dalam mengutak-atik HTML template sampe ancur. Mungkin banyak dari Anda yang ingin memperkaya ruang penempatan widget dalam blog Anda. Salah satunya adalah dengan menambah sidebar (kolom samping). Banyak sudah tutorial mengenai ini, namun ada hal yang menarik bagi saya untuk berbagi (bagi yang belum tahu tentunya…he..3x). Oke, langsung saja. Seperti biasa, login ke account blogger anda, dan masuk ke halaman Edit HTML (untuk yang satu ini ngk perlu di expand, ntar malah pusing lihat kode2 HTML yang njelimet!he..3x). Setelah itu, cari kode #sidebar-wrapper, atau lengkapnya seperti kode di bawah ini :

#sidebar-wrapper {width: 300px;float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}

Kode di atas adalah kode dasar dari template minima bawaan blogger. Kode tersebut kita anggap sebagai kode utama sidebar anda dimana kita akan menambahkan 2 kolom dibawahnya nanti. Setelah meneukan kode di atas, masukkan kode di bawah ini setelah akhir kode di atas atau biasanya diakhiri dengan tanda }:

#sidebar1-wrapper {width: 145px;float:right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}
#sidebar2-wrapper {width: 145px;float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float */}

Oke, penambahan kode css sudah selesai, sekarang tinggal memasukkan kode di badian bodynya. Catatan penting yang harus diingat adalah, sidebar yang ditambahkan oleh seseorang mungkin saya tidak beraturan jika postingan kita buka, dimana jika postingan kita pendek atau sendikit, terkadang sidebar baru yang kita buat justru berada di bawah kolom posting. Perhatikan ilustrasi berikut ini :

Cari terlebih dahulu kode sidebar utama anda dibawah ini :

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

Setelah ketemu, letakkan kode sidebar1 dan sidebar2 dibawah ini tepat di bawah kode di atas :

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

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

Maka susunannya lengkapnya akan terlihat seperti ini :

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

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

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

Selesai, silahkan lihat hasilnya.

Catatan : Sesuaikan ukuran sidebar 1 dan 2 anda dengan sidebar utama. Umpamakan sidebar utama anda adalah 300, maka ukuran sidebar 1 dan 2 masing2 145. Kenapa bukan 150, karena 10 sisanya adalah jarak antara kedua sidebar. Setelah itu, perhatikan kode </div> yang merupakan kode terakhir di atas atau kode penutup sidebar utama. Kode tersebut harus ditempatkan dibagian paling akhir kode sidebar setelah sidebar1 dan sidebar2.