Cara Membuat Header 2 Kolom di Template Blogger - Hallo sahabat trick terbaru, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Header 2 Kolom di Template Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Header 2 Kolom di Template Blogger
link : Cara Membuat Header 2 Kolom di Template Blogger

Cara Membuat Header 2 Kolom di Template Blogger

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:

#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

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>

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;'/>

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;'/>

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;}

8. Pratinjau template anda jika tidak ada yang error save atau simpan template anda.

Demikianlah Artikel Cara Membuat Header 2 Kolom di Template Blogger

Sekianlah artikel Cara Membuat Header 2 Kolom di Template Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Header 2 Kolom di Template Blogger dengan alamat link https://trickterbaruagar.blogspot.com/2015/01/cara-membuat-header-2-kolom-di-template.html

Tweet