Cara Menambah 3 kolom diatas footer / dibawah posting

Menambah 3 kolom diatas footer / dibawah posting

Jika kemarin saya pernah posting bagaimana menambahkan 3 kolom dibawah header, tapi sekarang saya akan posting tentang cara menambahkan 3 kolom diatas footer, tujuan menambah kolom ini tidak lain yaitu memberikan ruang baru untuk widget apabila sudah tidak mencukupi untuk dipasang widget baru lagi. sebenarnya caranya hampir sama dengan menambah 3 kolom dibawah header namun perbedaannya hanyalah peletakan kode HTML yang diletakkan secara berbeda tempat.

Nah caranya sebagai berikut :
1. Login ke blogger
2. Pada dasboard klik Rancangan
3. Klik Edit HTML
4. Silahkan cari kode ]]></b:skin>
Letakkan kode berikut diatas kode ]]></b:skin>

/* 3kolom-bawah
---------------------------- */

#3kolom-bawah {
width: 930px;background:#666666;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}

#kiri-bawah {
width: 290px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#tengah-bawah {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#kanan-bawah{
width: 290px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

5. Kemudian kamu cari kode ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Dan Letakkan kode dibawah ini diatasnya

<div id='3kolom-bawah'>
<b:section class='3kolom-bawah' id='kiri-bawah' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='3kolom-bawah' id='tengah-bawah' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='3kolom-bawah' id='kanan-bawah' preferred='yes' showaddelement='yes'>
</b:section>
</div>

6. Klik simpan template!

Keterangan:
Perhatikan kode berwarna merah silahkan ubah sesuai dengan lebar kolom template kamu dan masing-masing kolom juga harus disesuaikan agar tidak saling bertabrakan, untuk kode berwarna hijau yaitu kode warna widget kamu bisa merubahnya.
Semoga berhasil!

from: http://u-sup.blogspot.com/2010/11/menambah-3-kolom-diatas-footer-dibawah.html

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!

Posted in: Tips Blogging