siniput: Cara Membuat Kolom Tambah Gadget di Bawah Header

Berikut cara membuat tambah kolom gadget dibawah header:
1. Masuk ke Dashboard , pilih Layout dan Edit HTML

2. Beckup template yang ada, agar jika terjadi kesalahan dapat dikembalikan seperti awal.

3. Setelah itu cari kode yang seperti ini ]]></b:skin>, dan tambahkan kode berikut diatasnya. ( Untuk mempermudah pencarian pakai Ctrl+F dan tulis/copas ]]></b:skin> di 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. Selanjutnya cari kode berikut atau yang agak mirip

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

7. Atau juga yang seperti ini aja :
4 kolom under header 4

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%;
}
8. Yang seperti ini juga boleh :

kode pada poin 3 diatas ganti dengan yang ini :

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

9. Atau mungkin mau yang banyak kolom seperti ini

Sok.. ah.. pokoknya sampai puas dan tinggal ikuti aja langkah-langkah yang telah dijelaskan sebelumnya.
Kemudian kode pada point 3 diatas, harus dirubah seperti dibawah ini:

#under_header1{
}
#under_header2{
float:left;
width:50%;
}
#under_header3{
float:right;
width:50%;
}
#under_header4{
float:left;
width:33.33%;
}
#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:right;
width:33.33%;
}
#under_header7{
float:left;
width:25%;
}
#under_header8{
float:left;
width:25%;
}
#under_header9{
float:left;
width:25%;
}
#under_header10{
float:right;
width:25%;
}
#under_header11{
float:left;
width:50%;
}
#under_header12{
float:right;
width:50%;
}
#under_header13{
float:right;
width:50%;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>

Dan ganti juga seluruh kode HTML pada point no.4 diatas menjadi seperti ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ali rachmad (Header)' type='Header'/>
</b:section>
</div>
<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>
aaa<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>
<div id='under_header5'>
<b:section class='header' id='underheader5' preferred='yes'/>
</div>
<div id='under_header6'>
<b:section class='header' id='underheader6' preferred='yes'/>
</div>
<div id='under_header7'>
<b:section class='header' id='underheader7' preferred='yes'/>
</div>
<div id='under_header8'>
<b:section class='header' id='underheader8' preferred='yes'/>
</div>
<div id='under_header9'>
<b:section class='header' id='underheader9' preferred='yes'/>
</div>
<div id='under_header10'>
<b:section class='header' id='underheader10' preferred='yes'/>
</div>
<div id='under_header11'>
<b:section class='header' id='underheader11' preferred='yes'/>
</div>
<div id='under_header12'>
<b:section class='header' id='underheader12' preferred='yes'/>
</div>
<div id='under_header13'>
<b:section class='header' id='underheader13' preferred='yes'/>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Selamat mencoba....

Cara Membuat Kolom Tambah Gadget di Bawah Header

Artikel Terkait:

Popular Posts