Cara Membuat Gadget di Bawah Header

Pada posting sya x ini. Sya akan mmberithu cara mmbuat Gadget di bwah header.Caranya gampang2 susah , bener lho sebab kadang- kadang templatenya beda.. untuk itu perlu trial and error.

Langsung aja meluncur ke TKP, caranya seperti ini :

1. Masuk ke Dashboard , pilih Layout dan Edit HTML

2. Saya sarankan backup template lebih dulu, dengan cara Download Full Template. Siapa tahu nanti malah tambah ancur alias brantakan .

3. Setelah itu cari kode yang seperti ini ]]></b:skin>, dan tambahkan kode berikut diatasnya. ( Untuk mempermudah pencarian pakai Ctrl+F dan tulis/copas di ]]></b:skin> kotak Find yang disediakan, terus klik Next ).

#under_header1{
}
#under_header2{
float:left;
width:33.33%;
}
#under_header3{
float:left;
width:33.33%;
}
#under_header4{
float:right;
width:33.33%;
}

4. Langkah ke 3 sudah belum??. Kalau sudah coba cari kode berikut atau yang sekiranya mirip gitu lho...

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='Blog Doddy (Header)' type='Header'/>
</b:section>
</div>

dan tambahkan kode berikut dibawahnya :

<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>
<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>
<div id="under_header3">
<b:section class='header' id='underheader3' preferred='yes'/>
</div>
<div id="under_header4">
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

5. The end alias selesai, tinggal Save Template, silahkan check gadgetnya dah muncul atau belum seperti terlihat pada gambar pertama diatas. ( biasanya kalau dosanya sedikit dan imannya kuat ... langsung muncul tuh.. hehehe )

6. Jika posisi Tambah Gadgetnya mau yang seperti dibawah ini:



Maka Script kode HTML untuk point3 diatas dirubah menjadi seperti ini :


#under_header1{

float:left;
width:33.33%;
}
#under_header2{
float:left;
width:33.33%;
}
#under_header3{
float:right;
width:33.33%;
}
#under_header4{
float:left;
width:100%;
}

Klw ingin merubah Silahkan suka2 anda, tapi tolong dibawah baris kode #under_header4{ tambahkan kode berikut margin:0 25%; terus width-nya juga dirubah, sehingga kodenya akan seperti ini:

#under_header4{
float:left;
margin:0 25%;
width:50%;
}

7.Selesai deh....

Catatan:

Margin adalah jarak antar elemen pada template. Angka pertama menunjukan jarak bagian atas dan bawah elemen, angka kedua menunjukan jarak bagian kiri dan kanan elemen. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan.
float menunjukan letak kolom Page Element (Tambah Gadget) yang dibuat nantinya akan berada di sebelah kiri atau kanan.
width adalah lebar kolom Page Element (Tambah Gadget) yang dibuat. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan.

Cape juga ya.. Selamat mencoba aja semoga sukses..

Artikel Terkait: