Cara Membuat Kolom Tambah Gadget di Bawah Header

6/7/09

Cara Membuat Kolom Tambah Gadget di Bawah Header

12:00 AM Diposkan oleh Anonymous
Label: Tutorial

Jumat kemarin lepas sembahyang Isya sampai dini hari coba mengoprek template, kali ini yang dioprek adalah membuat kolom tambah gadget dibawah header untuk blogspot, tak tanggung2, empat buah gadget. saya pikir sediain dulu gadgetnya.. ngisinya kapan2 aja bila bahannya dah ada. Hasilnya bisa dilihat disini . Biar tidak lupa kalau nanti diperlukan lagi.. saya posting aja tentang Bagaimana Cara Membuat Kolom Tambah Gadget di Bawah 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 ]]></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. 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%;
}

7. Ah.... Sayamah ingin yang seperti ini aja :

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. Masih belum puas ?? ingin membuat lebih banyak gadget lagi seperti yang dibawah 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>

----------------Sekian aja dulu-----------------------

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..
Source : Happy Desug

Thanks telah mampir, yo kita saling vote dan comment..
Bila berkenan tolong bagikan dengan tombol share di atas.
Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Cara Membuat Kolom Tambah Gadget di Bawah Header, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.