Senin, 04 Februari 2013

Cara Menambah Elemen 3 Kolom Dibawah Header

Cara menambah/membuat Elemen 3 kolom dibawah Header Blogspot. Jika anda merasa kurang dengan jumlah kolom/elemen bawaan yang ada pada template Blogspot anda, dan ingin menambah jumlah kolom dibawah Header menjadi 3 buah kolom tambahan, silakan gunakan cara berikut Cara menambah/membuat Elemen 3 kolom dibawah Header Blogspot.

Cara membuat 3 Kolom dibawah Header Blogspot:

1. Silakan buka/masuk ke Template > Edit HTML > Lanjutkan
2. Centang kotak pada '' Expand Template Widget''
3. Cari kode ]]></b:skin> (gunakan Ctrl + F) lalu masukkan kodenya di kotak find
4. Letakkan kode berikut diatas/sebelum kode ]]></b:skin>


<div id="tiga-kolom-bawah-header" style="float: left; margin: 0; text-align: left; width: 35%;"> <b:section class="tiga-kolom" id="tigakolom" preferred="yes" style="float: left;"> </b:section></div>

5. Lanjutkan cari kode <div id='main-wrapper'>
6. Letakkan kode berikut diatas kode <div id='main-wrapper'>

<div id='tiga-kolom-bawah-header'>
<div id='kolomkiri' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='kolomkiri' id='kolomkiri' preferred='yes' style='float:left;'/>
</div>
<div id='kolomtengah' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='kolomtengah' id='kolomtengah' preferred='yes' style='float:left;'/>
</div>
<div id='kolomkanan' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='kolomkanan' id='kolomkanan' preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

7. Simpan template, selesai.


Keterangan :
Anda bisa mengatur lebar kolom, dengan merubah angka persen yang ada.

Selamat mencoba, jangan lupa simpan dulu semua kode html anda buat jaga-jaga jika terjadi gangguan /kesalahan. Semoga sukses.

Tidak ada komentar: