Cara MUDAH Membagi Dua Kolom Header Pada Blog | Tips Blogspot | Cara Membuat Dua Kolom Header Di Blogspot

Cara MUDAH Membagi Dua Kolom Header Pada Blog | Tips Blogspot | Cara Mudah Membuat Dua Kolom Header Di Blogspot -  Posting kaili ini Kolom Blog GRATIS akan berbagi cara Cara MUDAH Membagi Dua Kolom Header Pada Blog | Tips Blogspot | Cara Mudah Membuat Dua Kolom Header Di Blogspot, perlu di ketahui bahwa desain template itu sangat komplek dan menggunakan banyak teknik, agar terfokus KBG mengambil sampel template magazine yang sobat ingin mengetahui teknik ini, sobat harus terlebih dahulu download Template Disini ]>> & KBG sarankan jangan pada blog kesayangan sobat tapi buatlah blog uJI Coba, Berikut perhatikan langkah Cara MUDAH Membagi Dua Kolom Header Pada Blog :

1. Login ke blogger lalu Klik rancangan - Klik tab elemen Halaman - Klik tab Edit HTML cari kode seperti ini :
   
   /* Header
   
   ===================================
   
   */
   
   #header-wrapper {
   
   width:900px;
   
   margin:0 auto 0px;
   
   background:$bgheadercolor url(http://kolombloggratis.blogspot.com/2011/02/cara-membagi-dua-kolom-header.html) 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;
   
   }


2. Ganti dengan kode berikut ini :
   
   /* Header
   
   ===================================
   
   */
   
   
   
   #header-wrapper {
   
   width:900px;
   
   margin:0 auto 0px;
   
   background:$bgheadercolor url(http://kolombloggratis.blogspot.com/2011/02/cara-membagi-dua-kolom-header.html) no-repeat top center;
   
   height:190px;
   
   }
   
   
   
   #head-inner {
   
   width:600px;
   
   background-position: left;
   
   margin-left: auto;
   
   margin-right: auto;
   
   float:left;
   
   }
   
   
   
   #header {
   
   margin: 0px;
   
   text-align: left;
   
   color:#ffcc66;
   
   }
   
   
   
   #r_head{
   
   width:300px;
   
   float:left;
   
   padding-top:10px;
   
   }
   
   


3. Coba scroll ke bagian bawah, dan temukan kode seperti 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>
   
   


4. Ganti dengan kode di bawah ini, lalu simpan template :
   
   <div id='header-wrapper'>
   
   <div id='head-inner'>
   
   <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='r_head'>
   
   <b:section class='header' id='header2' preferred='yes'/>
   
   </div>
   
   </div>