Membuat 1, 2, 3, 4 atau lebih Kolom Tambah Gadget (Add Page Element) di Bawah Header Pada Template Minima Blogspot (bagian 4)

How to create 1, 2, 3, 4 or more Add Page Element Column under blogspot's minima template header (part 4)
<-- MEMBUAT 1 KOLOM TAMBAH GADGET (ADD PAGE ELEMENT) DI BAWAH HEADER
<-- MEMBUAT 2 KOLOM TAMBAH GADGET (ADD PAGE ELEMENT) DI BAWAH HEADER
<-- MEMBUAT 3 KOLOM TAMBAH GADGET (ADD PAGE ELEMENT) DI BAWAH HEADER
MEMBUAT 4 KOLOM TAMBAH GADGET (ADD PAGE ELEMENT) DI BAWAH HEADER

Untuk membuat 4 kolom Tambah Gadget (Add Page Element) dibawah header caranya adalah sebagai berikut:

1. Login ke Blogspot--> Tata LeTak --> Edit HTML

2. Untuk berjaga-jaga bila nanti pada hasil editnya ada hal yang tidak sesuai dengan keinginan, maka download terlebih dahulu template awal, sehingga kita bisa mengembalikan kondisi template seperti semula dengan cara meng-upload (unggah) template awal yang telah didownload sebelumnya itu.

3. Setelah itu cari kode ]]></b:skin>
dan tambahkan kode berikut diatas kode ]]></b:skin>

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

sehingga susunan baris kodenya akan terlihat seperti pada gambar dibawah ini:

4. Setelah itu cari baris kode berikut (atau yang mirip, tergantung model template yang dipakai ya):

dan tambahkan kode berikut dibawah ini dibawah kode tersebut diatas:

sehingga susunan kodenya akan menjadi seperti terlihat pada gambar dibawah ini:

5. Setelah itu klik tombol SIMPAN TEMPLATE, dan periksa pada Elemen Halaman apakah kolom Tambah Gadget yang baru dibuat sudah muncul dibawah header seperti terlihat pada gambar pertama diatas.

6. Jika ingin posisi kolom Tambah Gadgetnya seperti pada gambar dibawah ini:

maka baris kode seperti tersebut pada poin 3 dirubah menjadi seperti berikut:

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

sehingga susunan baris kodenya akan seperti terlihat pada gambar berikut:

7. Jika ingin posisi kolom Tambah Gadgetnya seperti terlihat pada gambar dibawah ini:

maka dibawah baris kode #under_header4{ tambahkan baris kode berikut margin:0 25%; dan rubah lebar width-nya, sehingga baris kodenya akan terlihat seperti dibawah ini:

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

8. Atau jika ingin semua posisi kolom Tambah Gadgetnya sejajar seperti terlihat pada gambar dibawah ini:

maka baris kode pada poin 3 akan menjadi seperti terlihat dibawah 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. Jika ingin membuat lebih banyak lagi kolom Tambah Gadget dibawah Header, tinggal ikuti aja langkah-langkah yang telah dijelaskan sebelumnya. Misalkan ingin membuat beberapa kolom Tambah Gadget seperti terlihat pada gambar dibawah ini:

maka susunan baris kode pada poin 3 akan menjadi seperti terlihat 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'>

Sementara susunan baris kode pada poin 4 akan menjadi seperti:

______________________

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.
* Untuk memudahkan pencarian baris kode, tekan Ctrl + F untuk menampilkan kolom pencarian yang letaknya ada dibawah kolom Edit HTML seperti terlihat pada gambar dibawah ini, lalu ketikan atau kopi paste baris kode yang ingin dicari pada kotak pencarian. Baris kode yang sesuai akan ditunjukan dengan diberi warna hijau.

Selamat mencoba.
____________________

3 komentar:

adminx mengatakan...: Mau tanya gan,
Kalau di right side hanya 1 kolom lalu dipecah jadi 2; lalu bikin 2 gadget kiri dan kanan caranya gimana; 1 April 2011 pukul 18.02
Farhan mengatakan...: @kyz pakai di ubahzuaikan adanya di template; 26 April 2012 pukul 10.20
Surya Chandra Gobel mengatakan...: bro,,
Saya kan punya template nih bekas download nama,a x10,,trus pas Saya ke tata letak,,sidebar kanan,a tuh ga ada,,
edit,a gmna biar sidebar kanan,a muncul di sebelah postingan,,??; 4 Juli 2012 pukul 04.30