Kamis, 01 Agustus 2013

2 Kolom HEADER

Tidak ada komentar :
Pada template bawaan blog umumnya hanya ada 1 header, terkadang kalau kita akan membuat iklan header akan keulitan. Nah, sekarang bagaimana agar header itu bisa kita bagi menjadi 2 kolom kanan dan kiri dan akan muncul gadget tambahan. Berikut ini akan saya bagikan cara membagi header, semoga cara ini bisa bermanfaat.

Untuk merubahnya kita perlukan kode CSS yang tidak rumit, tapi jangan lupa sebelum kamu "mengobok-obok" templatenya kamu harus backup dulu buat berjaga-jaga.

OK..langsung saja.

1. Buka dasbord blog kamu
2. Buka template - Edit HTML
3. Cari kode .header-outer { gunakan ctrl+F biar cepat aja menemukan kodenya

berikut kode lengkapnya

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

Untuk merubahnya kita perlukan kode CSS yang tidak rumit, tapi jangan lupa sebelum kamu

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;min-height: 100px; }

#header {width: 45%;
margin-right: 10px;float: left; }

#hd-kanan {float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#hd-kanan {margin: 3px;}

Keterangan :
1. Untuk min-height:100px, adalah tinggi header yang akan dibuat, kamu bisa menggantinya sesuai keinginan kamu.
2. #header adalah header sebelah kiri dengan width:45%, kamu hanya bisa merubah lebarnya.
3 #hd-kanan adalah header sebelah kanan yang akan kita tambahkan, kamu bisa rubah lebarnya juga. Dan ini yang akan menjadi gadget baru nantinya.

Setelah pengaturan style header baru semua selesai, lanjut ke langkah berikutnya ini :
Cari kode berikut ini (gunakan ctrl+F) :

<div class='region-inner header-inner'>

Setelah kamu temukan, tambahkaan kode dibawah ini setelah kode diatas :

<b:section class='hd-kanan' id='hd-kanan' maxwidgets='1' showaddelement='yes'></b:section>

Untuk manambah gadget menjadi 2 atau 3 berjajar ke bawah, kamu bisa merubah maxwidgets="1"
Setelah itu simpan templatenya.
Nah selesai... kamu bisa lihat hasilnya header akan menjadi 2 dengan gadget sesuai keinginan kamu, gampang kan...

Begitu Sob... jangan lupa tinggalkan komennya, lo mau copas silahkan sertakan linknya juga ya...hehehe
http://songolas01.blogspot.com/


BLOG YANG DIIKUTI