Membuat / Membagi Sidebar Menjadi Dua Kolom

Minggu, 08 Mei 20110 komentar



            Assalamu'alaikum wrwb................................
Bagimana apakah sobat sudah melihat contoh hasil dari 1 sidebar menjadi 2 kolom ?
Di bawah ini adalah hasilnya di halaman Rancangan :

 

kalau sudah lihat dan tertarik untuk mengubah sidebar sobat menjadi 2 kolom silahkan ikuti caranya berikut ini.

Pertama-tama login terlebih dahulu ke blogger dengan akun sobat sendiri, kemudian klik Design dan Edit HTML.

Setelah masuk ke halaman Edit HTML, cari kode seperti berikut :

#rsidebar-wrapper{width:300px;float:right;margin-left:5px;margin-right:10px;padding-right:10px;padding-top:10px;padding-bottom:15px;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 */
}

Atau yang mirip dengan kode di atas, contohnya :

#sidebar-wrap{width:…………………………………………………
………………………………………………………..
overflow:hidden;/* fix for long non-text content breaking IE sidebar float */
}

Kalo sudah ketemu, Letakkan kode di bawah ini, di bawah kode di atas :

#kolom1-wrap {
width:115px;
padding:0;
float:$endSide;
font-size:97%;
line-height:1.5em;
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 */
}
#kolom2-wrap {
width:115px;
padding:0;
float:$Left;
font-size:97%;
line-height:1.5em;
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 */
}

Kemudian Cari :

<div id='sidebar-wrap'>
<div id='sidebar-wrap'><div id='sidebar-wrap'>
<b:section class='sidebar' id='sidebar'>
……………………………………

</b:section>
</div></div>

Letakkan di kode di bawah ini, di bawah kode di atas tadi :

<div id='kolom1-wrap'><div id='kolom1-wrap'>
<b:section class='sidebar' id='sidebar2klm1' preferred='yes'>
<b:widget id='Text1' locked='false' title='Kolom 1' type='Text'/>
</b:section>
</div></div>

<div id='kolom2-wrap'><div id='kolom2-wrap'>
<b:section class='sidebar' id='sidebar2klm2' preferred='yes'>
<b:widget id='Text2' locked='false' title='Kolom 2' type='Text'/>
</b:section>
</div></div>

 Nah selesailah sudah cara membuat / mengganti sidebar satu kolom menjadi 2 kolom.
Selamat mencoba... semoga bermanfaat ... salam br4khm4t ....

Share this article :

Posting Komentar

 
Template ini : Dimodifikasi Oleh Basuki Rakhmat | BLOGnya Basuki
Terima kasih pada Mas Johny | SayaDownloas Templatenya
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger