Cara membagi header menjadi 2 kolom

Sekarang kembali posting tutorial blog tentang Cara membagi header menjadi 2 kolom. Nah, sobat pasti bertanya, untuk apakah kolom header dibagi menjadi 2 kolom? jawabannya, kalau header blog, pada umumnya kolom pertama yaitu kolom judul blog sobat dan kolom kedua bisa sobat pakai seperti untuk adsense, pemasangan iklan, search engine dll. Membagi / membelah header menjadi 2 kolom, perlu diketahui desain template itu sangatlah komplek dan menggunakan banyak sekali teknik.


Agar mudah dan terfokus, sebagai contoh untuk menbagi header menjadi 2 bagian kang reggy menggunakan template buatan blogjuragan yaitu Thesis seo blogger template, silahkan sobat mendownloadnya disini Disini. Tetapi jika sobat merasa sudah ahli dalam pengeditan template tidak masalah lah jika menggunakan template sobat sendiri ;). Jika sobat sudah mendownload dan mengupload templatenya ke blog sobat, tampilan header sebelum di edit gambarnya seperti di bawah ini

Oh iya, sebelum kita ke tkp, agar tidak terjadi hal yang tidak diinginkan seperti blog kesayangan sobat menjadi acak - acakan hanya karena hal percobaan, kang reggy sarankan jangan dulu mencoba tutorial ini pada blog kesayangan sobat. Buatlah blog untuk percobaan kemudian upload template thesisnya.  Are you ready guys? ok 1...2...3 lets go, eiitts, kayak mau perlombaan lari aja, hehehe :p. Okedeh sobat, kita langsung ke cara membagi header menjadi 2 kolom

1. Login pada pada Blogger menggunakan id blog sobat
2. Template
3. Edit HTML lalu Lanjutkan
4. pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini
   

   #header-wrapper {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPWaZdzDifRTVOchc_9z3QqbASWdBcziH_EX5TbRNNpamIserBTlZZbKEcGxnhrkYTxtHBBBiNUjtmF24jvYBDiig4qq6ii57l5LgD9EIav9w18YkloqGhqDkeCZailabrs7Wr6BI_AhKf/s1600/line.gif) repeat-x scroll left bottom;
   height:119px;
   width:900px;
   }
   #header-inner {
   background-position:center center;
   margin-left:auto;
   margin-right:auto;
   }
   #header {
   color:#000000;
   text-align:left;
   }

5. hapus dan ganti kode tersebut dengan kode dibawah ini:
   

   #header-wrapper {
   -moz-background-clip:border;
   -moz-background-inline-policy:continuous;
   -moz-background-origin:padding;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPWaZdzDifRTVOchc_9z3QqbASWdBcziH_EX5TbRNNpamIserBTlZZbKEcGxnhrkYTxtHBBBiNUjtmF24jvYBDiig4qq6ii57l5LgD9EIav9w18YkloqGhqDkeCZailabrs7Wr6BI_AhKf/s1600/line.gif) repeat-x scroll left bottom;
   height:100px;
   width:900px;
   }
   #header-inner {
   width:428px;
   margin:0 auto;
   padding-top:6px;float:left;
   }
   #header {
   color:#000000;
   text-align:left;
   }
   #r_head{
   width:468px;
   float:right;
   padding-top:6px;
   }

6. selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
   

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

7. hapus kode di atas dan ganti dengan kode di bawah ini
   

   <div id='header-wrapper'>
   <div id='header-inner'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
   </b:section>
   </div>
   <div id='header-kanan'>
   <b:section class='header2' id='header2'/>
   </b:section>
   </div>
   </div>

8. Simpan Template

Selesai deh, jika semua langkah sudah sobat lakukan seperti di atas, tampilan kolom sesudah diedit akan menjadi seperti pada gambar di bawah ini

Bagaimana sob ? susah apa mudah ? oh iya, kang reggy baru ingat, jika sobat ingin mengubah ukuran setiap kolom, tinggal utak - atik kode yang berwarna merah dengan ukuran yang sesuai dengan kebutuhan sobat. Okedeh sob, sampai disini dulu untuk Cara membagi header menjadi 2 kolom. Sampai Jumpa ;)