Cara Mudah Membagi Dua Kolom Header Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Cara MUDAH Membagi Dua Kolom Header Di Blog | Tips Blog | Cara Mudah Membuat Dua Kolom Header Di Blogspot -  Posting kaili ini Kolom Blog GRATIS akan berbagi cara Cara MUDAH Membagi Dua Kolom Header Di Blog | Tips Blog | Cara Mudah Membuat Dua Kolom Header Di Blogspot, perlu di ketahui bahwa desain template (baca:Template Blogspot Keren dan SEO Friendly) 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 (http://kolombloggratis.blogspot.com/2012/01/free-download-templates-blogger.html) & 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>

Sumber : http://kolombloggratis.blogspot.com/2011/02/cara-membagi-dua-kolom-header.html#ixzz2Hq19daSK