Cara Membuat Sidebar 2 Kolom

Sebenarnya cara ini tidak mau saya ajarkan (walaupun di mbah google banyak). Tapi berhubung teman saya yang bernama Auzi Muhammad Fazri sudah meminta caranya pada saya. yaa, apa boleh di kata. Langsung saja, step by step :

1. Login ke blogger anda > Layout > Edit HTML
2. Beri tanda centang pada "Expand Widget Templates"
3. Cari kode (fokuskan pencarian pada yang berwarna merah)

#sidebar-wrapper {
width: 430px;
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 */
}

4. Copy-paste kode berikut setelah tanda }

#newsidebar-wrapper {
width: 200px;
float: $endSide;
padding-left:5px;
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 */
}

Keterangan kode :
width untuk ukuran lebar sidebar
float untuk letak sidebar
padding untuk jarak sidebar

5. Cari kode (fokuskan pencarian pada yang berwarna merah)

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

titik-titik adalah lanjutan kodenya (tidak begitu penting untuk di ketahui)

6. Copy-paste kode berikut ini setelah </div>

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

7. Save Templates, lihat hasilnya di PageElements (pasti ada perbedaan)

Hasilnya akan seperti ini >



Keterangan, jika ada bagian yang berantakan anda bisa atur ukuran/tempat/jarak nya.
Terima Kasih, DO NOT FORGET TO COMMENT

1 komentar:

SLAMET SUYANTO, 25 July 2010 at 09:43 | [Reply]

thanks mas, aku udah coba.... kalo sebagian saja yang dibelah gimana mas,,,,

Post a Comment

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home