Cara Membagi Header Menjadi Dua Kolom di Blog

Tidak terasa postingan kali ini adalah artikel saya yang ke-200. Semoga artikel-artikel yang saya tulis selama ini dapat bermanfaat bagi temen-temen semua. Pada tutorial kali ini saya akan membahas bagaimana membagi header dua bagian, yang nantinya dapat kita gunakan sebagai penempatan widget search engine, gambar, iklan atau apa saja yang membuat elemen baru itu terisi. Memang secara default header template sebuah blog biasanya hanya satu kolom untuk membaginya menjadi dua kita hanya sedikit memasukkan kode HTML ke dalam template.

Saya sering menemukan blog dengan header yang sudah dibagi dua. Nampaknya hal ini sudah menjadi suatu kewajiban dan keharusan pada template blogger yang dipakai. Barangkali anda juga tertarik seperti saya, untuk memodifikasi header blogger. Gambar di atas sudah bisa menjelaskan kira-kira hasilnya akan seperti itu nantinya. Oke langsung saja ke cara pembuatan. Berikut langkah-langkahnya :

Membagi header menjadi dua kolom

1. Login ke blogger dengan id anda
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode CSS seperti ini :
   

   #header-wrapper {
   width:660px;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   }
   
   #header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
   }
   
   #header {
   margin: 5px;
   border: 1px solid $bordercolor;
   text-align: center;
   color:$pagetitlecolor;
   }

   Hapus dan ganti semua kode tersebut dengan kode CSS ini :
   

   #header-wrapper {
   width:930px;
   margin:0 auto 0px;
   

   background:#38610B url(http://i33.tinypic.com/sw6cfo.jpg) no-repeat top center;

   height:180px;
   }
   
   #head-inner {
   width:500px;
   background-position: left;
   margin-left: auto;
   margin-right: auto;
   float:left;
   }
   
   #header {
   margin: 0px;
   text-align: left;
   color:#ffcc66;
   }
   
   #r_head{
   width:430px;
   float:left;
   padding-top:10px;
   }

6. Sekarang cari 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>

   Hapus kode itu dan ganti dengan kode ini :
   

   <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>

7. Klik tombol SIMPAN TEMPLATE
8. Selesai

Jadi, jika anda ingin melakukan perubahan dari kode CSS di atas, fokuslah hanya pada bagian yang berwarna hijau saja. Kode CSS yang lain bisa anda sesuaikan. Untuk melihat hasilnya, silahkan masuk ke Elemen Halaman. Jika langkah-langkahnya benar maka di sana sudah ada dua header. Artinya, header default sudah terbagi menjadi dua kolom header sebelah kiri dan kolom header sebelah kanan. 

Semoga bermanfaat.

Read More