Caranya sangat mudah, ikuti langkah-langkah berikut:
Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:
#box-main-container {Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
2. Kemudian cari kode<div id='main-wrapper'>
setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):
<div id='box-main-container'>
<div id='box1' style='width: 50%; 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: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div id='box1' style='width: 50%; 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: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode
<div id='box-main-container'></div>
<div id='box1' style='width: 30%; 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: 40%; 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: 30%; 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 id='box1' style='width: 30%; 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: 40%; 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: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.
Apabila hasil kolom yang baru berada di atas posting atau dengan kata lain tidak sesuai harapan coba cyber mania taruh code diatas tadi di bawah code
<div id='content-wrapper'>
dan lihat lagi hasilnya..Semoga bermanfaat.
sumber : http://amatullah83.blogspot.com
baca juga tutorial lainnya
- Menambahkan Translator
- Menambahkan Shoutmix pada blog
- Meta Tag Sumber Trafic Pengunjung
- Cara Membuat blog terkenal dengan pagerank
- Memasang Domain co.cc di blogger
- Mengganti Domain Dasar dengan Domain gratis co.cc
- Custom domain blogger dengan Subdomain
- Membuat Sidebar Dua Kolom
- Cara Membuat Blog di Blogspot
- Tema Untuk Xp
- Read More Icon - Cara Mengganti Read More Dengan Icon
- Menu Berjalan MarQue
- Cara Membuat Form Kontak Email Di Blogger
- Cara Membuat Menu dropdown
- Cara Menambahkan Status YM di Blog
- Menambahkan Widget Reader
- Verifikasi rekening Paypal dengan rekening bank
- Tutorial Daftar Paypal
- Custom domain blogger dengan Subdomain
- Membuat Tukar Link Menjadi Lebih Hidup
- Menambahkan Widget Reader
- Mendaftar RSS Feed di FeedBurner
- Mengenal Layanan Feed
- Membuat Halaman Berlangganan Artikel pada FeedBurner
- Warna banyak gunanya, apalah artinya hidup tanpa warna
Terima Kasih atas tutorialnya................
mas kok boxnya ngak muncul ya????
tolong donk ksh tw ke blog saya
Thank's ya gan infonya..!!
penambahan kolom berjalan lancar..
klo dibawah postingan gmn yah
to zulig...sebelumnya thx gan uda berkunjug..wah ane belum sempet ber eksperimen sampe ke sana gan..mungkin agan2 yg lain bisa menjawabnya..hehe
Makasih mas petunjuknya, petunjuk mas pas buat blog say.
mantab thx inpoh nya :)
nah ini dia yang cocok banget! 3 blog yang membahas ini tidak ada yang cocok, dan tips di blog inilah yang menghilangkan puyeng kepala saya..
Makasih boss!!
gan , pnya saya udah terlihat 3 widgetnta , tpi sayang berantakan..
gak bisa diatur..
mohon bantuannya gan ...
lihat sndiri blog saya http://bagasi-nemo.blogspot.com