Membuat header 2 kolom Blog - Banyak sekali pertanyaan dari sahabat blog saya yang mengatakan bagaimana sih membuat kolom header menjadi 2 kolom atau lebih pada template blogger. Sebenarnya mudah sekali membuat tampilan header di template blog menjadi 2 kolom atau lebih, anda hanya harus jeli melihat kode HTML di template blog anda dan melakukan sedikit perubahan pada template blog. Kita semua tahu bahwa kode HTML di template blogger memiliki beberapa kode yang hampir sama sehingga kalau kita tidak jeli melihatnya kadang kita salah meletakkan kode-kode tersebut di dalam template.
Baiklah tanpa berpanjang lebar lagi berikut cara membuat kolom header menjadi 2 kolom atau lebih, terlebih dahulu berikut preview tampilan dari hedaer blog anda nanti jadinya:
Membuat Header 2 Kolom di Template Blogger
Langkah langkah membuat header 2 kolom atau lebih di header blog:
1. Log in ke Blogger
2. Unduh atau cadangkan template blog anda dulu untuk berjaga-jaga
3. Masuk ke Template dan Edit HTML
4. Cari kode ]]></b:skin untuk mempermudah tekan Ctrl+ F dan masukkan kode berikut ini diatas kode tadi:
5. Kemudian cari kode yang hampir mirip dengan kode berikut ini karena setiap kode template masing-masing blog berbeda:
0 Merupakan jumlah kolom yang anda kehendaki
0 Ganti dengan 'yes'
0 Merupakan kode yang agak panjang jadi saya tidak menuliskannya
6. Di bawah kode <b/:section> letakkan kode berikut di bawahnya:
Sehingga tampilannya akan seperti di bawah ini:
7. Sekarang cari kode ]]></b:template-skin> dan letakkan kode dibawah ini diatasnya:
8. Pratinjau template anda jika tidak ada yang error save atau simpan template anda.
Baiklah tanpa berpanjang lebar lagi berikut cara membuat kolom header menjadi 2 kolom atau lebih, terlebih dahulu berikut preview tampilan dari hedaer blog anda nanti jadinya:
Langkah langkah membuat header 2 kolom atau lebih di header blog:
1. Log in ke Blogger
2. Unduh atau cadangkan template blog anda dulu untuk berjaga-jaga
3. Masuk ke Template dan Edit HTML
4. Cari kode ]]></b:skin untuk mempermudah tekan Ctrl+ F dan masukkan kode berikut ini diatas kode tadi:
#header {width:50%;display:inline-block;_float:left;}
#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
50% Pengaturan panjang dan padding kolom header kanan dan kiri#header-right {width:35%;display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
5. Kemudian cari kode yang hampir mirip dengan kode berikut ini karena setiap kode template masing-masing blog berbeda:
<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>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
...
</b:section>
0 Merupakan jumlah kolom yang anda kehendaki
0 Ganti dengan 'yes'
0 Merupakan kode yang agak panjang jadi saya tidak menuliskannya
6. Di bawah kode <b/:section> letakkan kode berikut di bawahnya:
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
<div style='clear: both;'/>
Sehingga tampilannya akan seperti di bawah 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>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
<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;'/>
7. 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;}
#layout #header-right {width: 50%; float: right;}
8. Pratinjau template anda jika tidak ada yang error save atau simpan template anda.
Tidak ada komentar:
Posting Komentar