membagi dua header pada template blogspot versi terbaru

"pada template blogger baru tidak ada kode <div id='header-wrapper'> .solusinya gimana mas? mohon pencerahan. trims." adalah pertanyaan dari Rekan blogger atas nama Rey di posting mengenai cara membagi dua header blogspot. Karena sebelumnya memang belum pernah menggunakan template versi terbaru dari blogger akhirnya saya mencoba untuk mencari tahu beda dari template blogger versi terbaru dengan versi yang digunakan pada template ini.

Setelah membuat sebuah blog percobaan akhirnya dipilih template buatan Jason Morrow bernama Ethereal, ternyata memang banyak perubahan baik dari penggunaan CSS maupun HTML. Sedikit bingung dengan pertanyaan Rey akhirnya saya penasaran untuk mencoba membagi dua header template Ethereal seperti pada template versi lama, dan Alhamdulillah berhasil (lihat gambar).

Untuk melihat hasil dari Hacking header template blogger versi terbaru silahkan lihat pada blog uji template.
Jika tertarik untuk mencobanya, berikut ini adalah langkah-langkah bagaimana membagi header blogspot menjadi dua bagian.

1. Masuk ke akun Blogger anda. Pilih blog yang akan anda edit.
   
2. Tuju Rancangan » Edit HTML, Download template lama (persiapan jika proses modifikasi tidak berhasil)
3. Kemudian cari kode CSS seperti dibawah ini:
   .header-inner {
     padding: 27px 0 3px;
   }
   
   .header-inner .section {
     margin: 0 35px;
   }
   
4. Ganti semua kode CSS diatas dengan kode berikut:
   .header-inner {
     padding: 20px 0 3px;
   }
   .header-inner .section {
     width:440px;
     padding:0 1px;
     margin: 0 0 0 33px;
   }
   .header-kanan {
     width:470px;
     float:$endSide;
     padding:0 1px;
     margin: 0 33px 0 0;
   }
   Keterangan: Ganti kode berwarna merah sesuai dengan kondisi lebar template blog anda, pada template ini lebar max= 980px, caranya dengan menggunakan rumus:
   Lebar template keseluruhan (Width) = Lebar header-inner + padding kiri dan kanan header-inner + margin kiri dan kanan header-inner + header-kanan + padding kiri dan kanan header-kanan + margin kiri dan kanan header-kanan.
   Seperti pada contoh CSS diatas maka perhitungannya menjadi:
   Width = (440 + (1+1)+(0+33)+ (470 + (1+1)+(33+0)
   Width = 980px
5. Setelah itu kemudian cari kode dibawah ini (tekan; ctrl + F):
   <div class='region-inner header-inner'>
6. Setelah ketemu letakkan seluruh kode dibawah ini tepat dibawah kode diatas (point 5)
       <div class='header-kanan'>
   <b:section class='header' id='header2' maxwidgets='1' preferred='yes'>
   <b:widget id='LinkList100' locked='true' title='' type='LinkList'/>
   </b:section>
       </div>
   
7. Tekan tombol Simpan/Save. Jika muncul peringatan yang memberitahukan bahwa widget id=LinkList100 tidak tersedia pilih opsi "pertahankan Widget".
   

Semoga bermanfaat  dan selamat nge-blog ;)

Keterangan plus-plus:

• Template yang digunakan pada proses hacking ini adalah template blogspot versi terbaru (lihat berbagai model template versi terbaru di Rancangan » Perancang template).
• Lebar standar template ini sudah diubah menjadi 980px.