Membagi header menjadi dua,tiga atau 4 kolom

saya sarankan untuk mendownload lengkap template anda, untuk menjaga-jaga apabila execusi gagal.
selanjutnya kita simak tutorial dibawah ini yang saya dapatkan ketika saya menjelajahi blog teman.hehehe
Dalam tutorial ini prinsipnya bukan menambah elemen header yang telah ada menjadi beberapa kolom, tapi menghilangkan header yang telah ada dan mengantinya dengan elemen yang terdiri dari beberapa kolom sesuai dengan selera. Tapi yang menjadi tanda Tanya buat yang berminat menerapkannya pasti bagaimana menampilkan JUDUL BLOG kalau elemen header di hilangkan ???Untuk menjawab pertanyaan tersebut sebaiknya ikuti Tutorial ini biar gak tambah binggung, Langsung ke TKP >>

Sebelum melakukan Tutorial ini sebaiknya Download Template untuk menghindari kesalahan/Error.
1. Tahap Awal kita menghilangkan Elemen Header.
Gambar 1 : Header Masih Ada

>> Login ke Akun Blog >> Edit HTML >> Tata Letak lalu cari kode berikut (Gunakan Ctrl +F ) :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='more (Header)' type='Header'/>
</b:section>
</div>

Lalu hapus semua kode tersebut . . . !!!

Save !!!

Gambar 2 : Hasil Tahap Awal dengan tanpa Elemen Header



Tahap Selanjutnya Menambah Elemen Baru persis di posisi Elemen Header yang telah dihilangkan tadi.

Copas kode berikut diatas kode ]]></b:skin>

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}
Save !!
a. Untuk membuat Dua Kolom
Cari kode berikut :


<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>

<div style='clear: both;'/>


Lalu paste kan kode berikut persis dibawahnya :
<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>
b. Untuk membuat Tiga Kolom
Cari kode berikut :


<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>

<div style='clear: both;'/>


Lalu paste kan kode berikut persis dibawahnya :
<div id='box-main-container'>
<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>
c. Untuk membuat Empat Kolom
Cari kode berikut :


<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>

<div style='clear: both;'/>


Lalu paste kan kode berikut persis dibawahnya :
<div id='box-main-container'>
<div id='box1' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='box2' style='width: 25%; 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: 25%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'>
<b:widget id='HTML9' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='box4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Gambar 3 : Hasil Penambahan Elemen Baru dengan Empat Kolom

3.

Tahap Selanjutnya menganti Judul Blog yang hilang akibat penghapusan Elemen Header.
Tahap ini dilakukan dengan Membuat Logo/Grafik/Nama Untuk Blog via Situs Pembuat Logo gratis, untuk lebih lengkap Daftar Situs Pembuat Logo Gratis baca Disini. Dan saya anggap Logo Anda sudah siap, langkah selanjutnya meng Upload Logo tadi ke situs Peng Upload File Image, untuk Daftar Situsnya Baca Disini.
4.

Tahap ini menambah Widget baru untuk menampilkan Logo/Grafik/Nama Blog tadi. Tempat kan Widget ini pada salah satu Kolom Elemen yang baru saja dibuat tadi.

<a href="http://NAMA BLOG.blogspot.com" target="_blank">
<img src=" http://LINK IMAGE YANG DI UPLOAD" border="0" alt="NAMA BLOG " /></a>

Wuih Selesai juga Tutorial NYA, saya harap ini bisa membantu, INGAT SETIAP TEMPLATE BLOG BERBEDA, KARENA PEMBUAT DEFAULT NYA JUGA BERBEDA, JADI PASTI PADA SAAT PROSES DI ATAS TEMPLATE BLOG NYA ADA YANG TIDAK BISA DI SAVE.