Cara Membuat Kolom Tambah Gadget di Bawah Header
4/30/2013
By
Agung DeidaraRyu
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.
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{4. Langkah ke 3 sudah belum??. Kalau sudah coba cari kode berikut atau yang sekiranya mirip gitu lho...
}
#under_header2{
float:left;
width:33.33%;
}
#under_header3{
float:left;
width:33.33%;
}
#under_header4{
float:right;
width:33.33%;
}
<div id='header-wrapper'>dan tambahkan kode berikut dibawahnya :
<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>
<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]](http://lh5.ggpht.com/_itjmAOpA6wA/Sit6C3FO3eI/AAAAAAAAAok/L1KWKsga9ns/4%20kolom%20under%20header%20b_thumb%5B2%5D%5B2%5D.png)
#under_header1{7. Ah.... Sayamah ingin yang seperti ini aja :
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%;
}
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 :
#under_header1{9. Masih belum puas ?? ingin membuat lebih banyak gadget lagi seperti yang dibawah ini ??.
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
Kemudian kode pada point 3 diatas, harus dirubah seperti dibawah ini:
#under_header1{Dan ganti juga seluruh kode HTML pada point no.4 diatas menjadi seperti ini :
}
#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'>
<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>
Semoga Bermanfaat.
Author
My name is Agung Prastyo. Nineteen my Age. I from Pekanbaru City.
0 komentar:
Syarat Berkomentar :
-Coment yang sopan !!
-Tidak mengandung kata2 Negatif.
-Dilarang Menghina dll.
Salam DND Ryujinki (^_\ \