Cara Membuat Header Menjadi Dua Bagian/Kolom

Membuat Header Menjadi Dua Bagian/Kolom. Asalamuallaikum, kali ini madhi akan sedikit share tips tricks yaitu Cara Membuat Header Menjadi Dua Kolom. Apa manfaat Membuat Header Menjadi Dua Bagian? sebenarnya itu semua tergantung dengan keinginan dan kebutuhan sobat. Langsung aja ke TKP sob, berikut adalah Cara Membuat Header Menjadi Dua Kolom silakan disimak:

1. Login ke aku Blogger sobat
2. Lalu Klik rancangan
3. Klik Edit HTML
4. Buat jaga2 Download Template Lengkap
5. Sekarang cari kode CSS seperti yang mirip beikut:/* Header
   
   #header-wrapper {
   width:930px;
   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;
   }
   
6. Ganti kode diatas dengan kode dibawah ini:/* Header
   
   #header-wrapper {
   width:930px;
   margin:0 auto 0px;
   background:#ffff;
   height:180px;
   }
   #header-one {
   width:50%;
   background-position: left;
   margin-left: auto;
   margin-right: auto;
   float:left;
   }
   #header {
   margin: 0px;
   text-align: left;
   color:$pagetitlecolor;
   }
   #header_two{
   width:50%;
   float:left;
   padding-top:10px;
   }Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template sobat.
   
7. Sekarang cari kode seperti berikut:<div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
   </b:section>
   </div>
   
8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
   
9. <div id='header-wrapper'>
   <div id='header-one'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
   </b:section>
   </div>
   <div id='header_two'>
   <b:section class='header' id='header2' preferred='yes'/>
   </div>
   </div>
10. Klik Simpan Template dan lihat hasilnya

Cukup segitu dulu info seputar Cara Membuat Header Menjadi Dua Bagian/kolom, selamat mencoba, semoga bermanfaat dan jangan lupa klik like ya sob :D Thanks