Photobucket
SponsoredTweets referral badge
» » Cara Membuat Kolom Tambah Gadget di Bawah Header

Cara Membuat Kolom Tambah Gadget di Bawah Header

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.. maka saya posting aja disini 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.
Blogger Edit Layout
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:
4 kolom under header b_thumb[2]
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 :
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 :
4 kolom under header3
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 ??.

multi kolom under 5
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> 

donasiSilahkan klik iklan di bawah sebagai donasi untuk blog ini

About the Author

I'm Deniez, the owner of this site. I'm a simple guys. I'm blogging since 2009 and I'm currently a guest blogger on Blogging With Success. "Make The Best" by Deniez.
Follow Me On Twitter or On Facebook

 

0

Please post your comment here ...