HOME | ABOUT ME | DAFTAR ISI | welcome to happydesug.blogspot.com

Selasa, 01 Desember 2009

Membuat Kolom Tambah Gadget di dalam Header Template Minima Blogspot

Untuk membuat kolom Tambah Gadget yang berada di dalam kolom Header Minima, yang bisa digunakan untuk meletakan horisontal menubar,  banner atau lainnya, seperti terlihat pada gambar, maka caranya adalah sebagai berikut:

template minima dengan kolom tambah gadget dalam header

1. Login ke Blogspot –> Layout (Tata Letak) –> Edit HTML

edit HTML layout

2. Cari baris kode ]]></b:skin> dan letakan baris kode yang berwarna merah diatasnya, sehingga susunannya menjadi seperti terlihat dibawah ini:
#kolomatas{
width:650px;
float:left;
margin:0 5px;
}

#kolomatas1{
}

]]></b:skin>
catatan: lebar kolomatas (width) sesuaikan dengan lebar header.
margin sesuaikan dengan letak kolom yang dibuat, apakah lebih dekat ke garis pinggir header atau mau lebih jauh lagi.
3. Setelah itu letakan baris kode berwarna merah didalam baris kode <div id='header-wrapper'>, setelah baris kode </b:section>, atau diatas baris kode </div>, sehingga baris kodenya menjadi seperti terlihat dibawah ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='testing blog (Header)' type='Header'/>
</b:section>

<div id='kolomatas'>
<b:section class='kolomatas1' id='kolomatas1' preferred='yes'> 
</b:section>
</div>
</div>
 4. Cari baris kode  header-wrapper dan dan tambahkan kode yang berwarna merah untuk mengatur tinggi garis pinggir header agar bisa melingkupi widget yang akan kita tambahkan nanti.
#header-wrapper {
width:660px;
height:120px; margin:0 auto 10px;
border:1px solid $bordercolor;
}
5. Simpan template.

layout template minima dengan kolom tambah gadget dalam header

Sekarang template minima sudah memiliki kolom Tambah Gadget yang berada dalam Header-nya.

UPDATE: Lihat Membuat Link Tambah Gadget Di bawah Header

Posting Dengan Kategori Sama



2 komentar:

bliyanbayem mengatakan...

wah, boleh nih tipsnya mas dodi. mungkin lain kali bisa saya jadikan referensi!!

dodi mengatakan...

@bliyanbayem: sip n makasih bro dah mampir ya :-)

Posting Komentar

Related Posts with Thumbnails