Membuat Sidebar 2 Kolom

Jumat, 07 Mei 2010

Menambah Sidebar 2 Kolom hampir merupakan keharusan tiap blog. mengingat selain mempercantik blog juga dapat mempersempit ruangan blog kita. dengan maksud pengunjung tidak merasa bosan dengan blog kita. Sidebar dua kolom ini anda bisa lihat contohnya pada blog ini ada variasi antara 1 dan 2 kolom sidbar.
Sebaiknya kita mulai saja cara membuatnya :

Login ke blog anda Klik DISINI, silakan isi email dan password blog anda
Pilih ‘TATA LETAK’
Klik "Edit HTML"
Agar aman, silakan anda Download dulu template anda (klik Download Template Lengkap), Pada bagian atas
(gunakan Ctrl + F) Cari kode #sidebar-wrapper (atau yang mirip kode tersebut)
atau lengkapnya kode sperti 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 merupakan kode dasar dari template minima bawaan blogger. Kode diatas akan menjadi patokan untuk menambah kode selanjutnya yang kita inginkan menjadi 2 kolom. Jika sdh ketemu :

Copy kode dibawah ini dan letakkan di bawah kode diatas.

#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 */}

Anda ubah lebarnya sesuaikan dengan lebar templete anda ( warna Merah Anda edit / lebar asli sidebar dibagi 2)

Setelah itu cari kode :

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

Kalau ketemu Copy kode dibawah ini dan paste dibawah kode diatas

<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>