Membuat Header 2 Kolom

Header 2 kolom? bingung maksud dari Header 2 kolom? maksudnya y dalam template default dari blogger itu rata-rata mempunyai headerr hanya 1 kolom saja biasanya letaknya di tengah kalau tidak di samping sebelah kiri dan saya belum pernah melihat Header 1 kolom letaknya di kanan, mungkin kalau template dari luar blogger ada yang menggunakan header 2 kolom tapi tidak banyak juga sich yang memakainya.

Pada kesempatan ini saya akan menjelaskan cara membuat Header 2 kolom, kegunaan Membuat Header 2 kolom yaitu memberi ruang lebih untuk menaruh Widget. Biasanya Header 2 kolom di pakai untuk menaruh iklan ataupun yang lain seperti saya, saya memanfaatkannya untuk menaruh google adsense di sebelah kanan dan Header saya di sebelah kiri dengan ukuran kurang lebih 150 (kiri) dan 510 (kanan), nah kalau sobat ingin membuat header 2 kolom ikuti saja langkah-langkah di bawah ini :

1. Seperti biasa login ke blogger
2. masuk ke Tata Letak => Edit HTML
   
   
   
3. setelah berada pada halaman tersebut cari Tulisan Header-Wrapper biasanya letaknya tidak jauh dari atas, lalu hapus kode seperti di bawah ini
   
   
   #header-wrapper {
   width:900px;
   margin:0 auto 0px;
   background:$bgheadercolor
   no-repeat top center;
   height:190px;
   }
   
   #header-inner {
   width:900px;
   background-position: center;
   margin-$startSide: auto;
   margin-$endSide: auto;
   }
   
   #header {
   margin: 0px;
   text-align: left;
   color:$pagetitlecolor;
   }
   
   
   
   
   
4. setelah di hapus masukan kode di bawah ini tepat di tempat sobat hapus kode di atas
   
   
   #header-wrapper {
   width:980px; /*sobat bisa mengecilkan atau membesarkannya*/
   margin:0 auto 10px;
   }
   
   #headerkiri {
   width:200px; /*sobat bisa mengecilkan atau membesarkannya*/
   background-position: left;
   margin-left: auto;
   margin-right: auto;
   float:left;
   }
   
   #header {
   margin: 5px;
   text-align: left;
   color:$pagetitlecolor;
   }
   
   #header h1 {
   margin:5px 5px 0;
   padding:15px 20px .25em;
   line-height:1.2em;
   text-transform:uppercase;
   letter-spacing:.2em;
   font: $pagetitlefont;
   }
   
   #header a {
   color:$pagetitlecolor;
   text-decoration:none;
   }
   
   #header a:hover {
   color:$pagetitlecolor;
   }
   
   #header .description {
   margin:0 5px 5px;
   padding:0 20px 15px;
   max-width:150px;
   text-transform:uppercase;
   letter-spacing:.2em;
   line-height: 1.4em;
   font: $descriptionfont;
   color: $descriptioncolor;
   }
   
   #header img {
   margin-$startSide: auto;
   margin-$endSide: auto;
   }
   
   #headerkanan{
   width:750px; /*sobat bisa mengecilkan atau membesarkannya*/
   float:right;
   padding-top:26px;
   }
   
   
   
   
5. setelah itu cari kode yang hampir mirip dengan kode di bawah ini, tapi kalau sobat susah dan cari saja Header-wrapper tapi bentuknya tetap sama seperti kode di bawah ini
   
   
   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
   </b:section>
   </div>
   
   
   
   
   
6. setelah ketemu hapus dan ganti dengan kode di bawah ini
   
   
   <div id='header-wrapper'>
   <div id='headerkiri'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
   </b:section>
   </div>
   
   <div id='headerkanan'>
   <b:section class='header' id='header2' preferred='yes'/>
   </div>
   </div>
   
   
   
7. nah kalau sudah tinggal sobat simpan deh
8. Selesai

Mudah bukan Membuat Header 2 kolom? kalau mudah y sukur deh dan kalau susah y kasian deh hihihihi, kalau sobat mengalami kesulitan atau ingin sebuah tutorial sobat bisa memberi tahu lewat kotak komentar di bawah ini atau bisa mengisi di buku tamu yang letaknya ada di samping blog saya ini, saya kira cukup sampai disini dulu y. Terima Kasih And Happy Blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg