Dalam sebuah blog memang banyak tutorial dan jika bahas satu persatu memang tiada habis-habisnya, tapi dengan ngeblog kita bisa berkreasi semau kita sendiri alhasil kreasikita bagus dan ditawai iklan oleh suatu produk dan banggalah kita, namun saya disini tidak membahas berbangga karena dapet duit tapi saya disini akan berbagi suatu tutorial yaitu membuat header menjadi 2 kolom, dalam kolom header biasanya kita hanya meletakkan logo blog kita dan selesai, namun dengan adanya bantuan 1 kolom lagi mungkin kita bisa gunakan untuk meletakkan iklan
Preview
Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode: ]]></b:skin> dan letakkan kode dibawah ini diatasnya
Kemudian cari kode yang mirip seperti ini
... merupakan kode yang agak panjang, jadi saya tidak menuliskannya.
Dan dibawahnya kode </b:section> pada kode diatas letakkan kode berikut
Sekarang cari kode ]]></b:template-skin> dan letakkan kode dibawah ini diatasnya
Semoga bermanfaat, selamat mencoba dan semoga berhasil
Preview
Cara Membuat Header 2 Kolom
Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode: ]]></b:skin> dan letakkan kode dibawah ini diatasnya
#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
Langkah 3#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
Kemudian cari kode yang mirip seperti ini
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
...</b:section>
Dan dibawahnya kode </b:section> pada kode diatas letakkan kode berikut
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
Contoh Penerapannya<div style='clear: both;'/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<div style='clear: both;'/>
Langkah 4<b:widget id='Header1' locked='true' title=' Judul Blog Sobat (Header)' type='Header'/>
...</b:section>
<b:section id='header-right' showaddelement='yes'/> <div style='clear: both;'/>
Sekarang cari kode ]]></b:template-skin> dan letakkan kode dibawah ini diatasnya
#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}
Langkah 5#layout #header-right {width: 50%; float: right;}
Semoga bermanfaat, selamat mencoba dan semoga berhasil