Yayan Seo - Tak Bosan - bosannya berbagi Trick Blogger dengan sahabat blogger semu.nya...
ya kali ini saya akan membagi trick tentang Cara Mmbuat Dua kolom Di Sidebar kanan .. YUK simak Tutorial Di bawah Ini..
ya kali ini saya akan membagi trick tentang Cara Mmbuat Dua kolom Di Sidebar kanan .. YUK simak Tutorial Di bawah Ini..
- 1. Login Ke Blogger Masing - Masing.
- 2 .Lalu klik edit Template .
- 3.lalu cari Code yang mirip dengan Ini
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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. Kalo sudah ketemu Tinggal tambahin Code di bawah ini tepat di bawah Code #sidebar-wrapper {
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
- 5. Sehingga Codenya MENJADI seperti InI .
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
- 6. sEtelah trick di atas Sudah Terlaksana . Sekarang KIta tinggal Mencari kode Yng mirip code di bawah
<div id='sidebar-wrapper'>
..................</b:section>
</div>
- 7. Sekarang tinggal masukan code di bawah ini Tepat Di bawah kode </b:section>
</div>
ini codenya...
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
- 8. sehingga kodenya menjadi seperti di bawah Ini...
<div id='sidebar-wrapper'>
..........
........
</b:section>
</div>
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
9. Simpan Template nya.
Semoga Tutorial Ini bermanfaat Bagi kawan-kawan Semua.
Terimakasih kalo kalian sudah menyimak artikel ku iNi..