HOMECara Membuat Header 2 Kolom di Template Blogger
Posted on - 5:09:00 PM with 3 comments
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.
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
 |
Artikel Terkait Dengan "Cara Membuat Header 2 Kolom di Template Blogger "
3 comments:
Ketentuan Berkomentar:
1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan
Admin Tips & Cara
thanks infonya min, kunjungi juga blog saya http://ganggoblog99.blogspot.co.id/
ReplyDeleteThank Gan.....
ReplyDeleteTulisannya sangat bermanfaat Bos terima kasih ane jadi dapat ilmu
ReplyDelete