Tutorial Menambahkan Kolom dibawah Header

Buat sobat pecinta blogger tentu kalian akan senang kalau kalian bebas menambahkan witget atau getgad di tamplate blog kalian dan ini tentu tak akan mudah bagi sobat yang baru saja membuat blog atau juga belum mengerti tentang kode CSS atau HTML. nah untuk menjawab pertanyaan kalian kali ini aku akan berbagi kepada kalian bagaimana caranya menambah kolom widget di bawah header blog.

memang tutorial ini sudah lama di bahas oleh blog-blog tutorial namun tutorial ini tidak akan basi lagi kalau banyak yang menginginkan tutorial ini. sebenarnya tutorial ini bisa kalian manfaatkan untuk membuat footer atau juga menambahkan sidebar blog. namun alangkah baiknya tutorial ini kalian pelajari lebih lanjut lagi. karena dengan kalian mengerti kode yang aku share ini bukan tidak mungkin kalian bisa membuat tamplate sendiri. mari kita mulai cara membuat kolom dibawah header namun silahkan kalian lihat dulu screenshort yang aku ambil dari blog ini.

pada gambar diatas aku sengaja membuat 5 kolom sekaligus. namun kalian bisa mengurangi atau menambahkan lagi.berikut ini tutorial membuat kolom dibawah header.

1. silahkan login duluke blogger.

2. silahkan pilih menu edit tamplate.

3. silahkan centang expant tamplate.

4. cari kode ]]></b:skin>

5. kalau sudah ketemu silahkan taruh kode dibawah ini tepat diatasnya.

<!--start-kepala-atas-http://giga-watt.blogspot.com-->
#tambah-kolom-kepala-atas {
clear:both;
}
.kolom-kepala-atas {
padding: 10px;
margin :5px auto;
}
<!--end-kepala-atas-http://giga-watt.blogspot.com-->

6. kalau sudah silahkan cari lagi kode. <div id='outer-wrapper'>

7. kalau sudah kalian dapatkan kodenya silahkan taruh kode dibawah ini tepat dibawahnya

 <div id='tambah-kolom-kepala-atas'>
    <div id='kolom1' style='width: 20%; float:left;
    margin:0; text-align:left;'>
    <b:section class='kolom-kepala-atas' id='col100'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='kolom2' style='width: 20%; float: left;
    margin:0; text-align: left;'>
    <b:section class='kolom-kepala-atas' id='col101'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='kolom3' style='width: 20%; float: left;
    margin:0; text-align: left;'>
    <b:section class='kolom-kepala-atas' id='col102'
    preferred='yes' style='float:left;'/>
    </div>
        <div id='kolom4' style='width: 20%; float:left;
    margin:0; text-align:left;'>
    <b:section class='kolom-kepala-atas' id='col103'
    preferred='yes' style='float:left;'/>
    </div>
    <div id='kolom5' style='width: 20%; float:left;
    margin:0; text-align:left;'>
    <b:section class='kolom-kepala-atas' id='col104'
    preferred='yes' style='float:left;'/>
    </div>

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

8. dan sekarang silahkan kalian simpan dan lihat hasilnya di tamplate kalian maka akan ada kolom yang baru sebanyak 5 kolom, kalau kalian menginginkan hanya 2 kolom kalian bisa hapus kode <div id='kolom3' kebawah dan pada kolom 1 dan 2 silahkan ganti kode style='width: 20%; menjadi style='width: 50%; kalau 3 kolom hapus pad kolom 4 kebawah dan ganti kode style='width: 20%; menjadi style='width: 33%; dan kalau ingin 4 kolom silahkan hapu kolom 5 dan silahkan ganti kode style='width: 20%; menjadi style='width: 25%; dan kalau inginkan 1 kolom silahkan hapus kolom2 sampai kolom 5 dan ganti kode style='width: 20%; menjadi style='width: 100%;.

nah kalau kalian masih bingung dengan penjelasan diatas kalian bisa meninggalkan pesan dibawah, nah itulah cara membuat kolom atau menambahkan kolom dibawah header untuk cara menambah kolom footer aku bahas di postingan berikutnya. semoga tutorialku ini bermanfaat dan bisa menjadi motifasi kalian untuk lebih maju untuk menjadi blogger. semoga sukses dan happy blogging.