Monday, March 5, 2012

Cara Membuat Tiga Kolom Dibawah Header

Cara membuat tiga kolom di bawah header, tidak terlalu sulit bahkan cukup gampang karena sobat tinggal kopas sajah kodenya dan simpan jadi deh.
Waktu kemari - kemarin di  terbaru5 blog pernah juga membahas trik yang sama namun yang kemarin - kemarin cara membuat dua kolom dibawah header dan sekarang akan membahas yang tiga kolom biar lebih mantap menurut aku sendiri tapi gak tahu menurut sobat semua karena orang berbeda betul gak bro ??
Trik cara membuat tiga kolom dibawah header ini sudah saya coba dan berhasil, dan semoga sobat juga berhasil. Maaf bila kata - kata di dalam penyampaian tidak dengan bahasa indonesia yang baik dan benar makum sekolahnya cuma nongkrong.hehe
Aduh sampai lupa ni terlalu banyak basa - basi kita langsung sajah ke tkp.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Bila nanti terjadi kesalahan dalam pengeditan kita sudah mempunyai backupnya sehingga dengan mudah mengembalikan template seperti semula.

4. Cari kode ]]></b:skin> Gunakan fitur pencarian pada browser agar cepat menemukannya.

5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#box-main-container {
clear:both;
border-bottom:3px double #e6e4e3;
}
.box-column {
padding:0px 10px 10px 10px;
}

6. Selanjutnya cari kode <div id='main-wrapper'> Kalo tidak ada kodenya coba yang ini  <div class='main-outer'>

7. Copy kode di bawah ini dan paste di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

8. Klik SIMPAN TEMPLATE.

9. Selesai deh cara membuat tiga kolom dibawah header, trik ini sbenarnya buat saya sendiri biar nanti kalo butuh kan gak usah nyari sana - sini kita tinggal kopas jadideh. sekian trik dari terbaru5 blog semoga bermanfaat untuk para blogger. dan mohon maaf bila banyak kekurangan karena maklum masi baru di dalam dunia bloggernya atau kata para master newbi begitulah kira - kira. piss luv N rock N roll ajah.

No comments:

Post a Comment