2009-08-02

Membuat Footer menjadi 3 Kolom

Tanpa basa basi kita Langsung ke TKP.
1.Login ke blogger.com
2.Pilih Layouts dan seperti biasa => Edit HTML.
3.Jangan klik Expand widget template, karena kita mau cepat.
4.Trus cari pake F3 kode </b:skin> dan copas kode dibawah ini tepat diatasnya.

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

5.Kalau sudah lanjut cari kode
<b:section class='footer' id='footer'/>

Kemudian ganti dengan kode di bawah ini :
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:
10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

6.Simpan pekerjaan anda, untuk melihat hasilnya silahkan menuju Page ELements
7.Kode yang berwarna merah bisa di ganti sesuai keinginan anda.
Gampang dan mudah bukan.....!!!!
source: http://suriyadi.com/2008/10/membuat-footer-menjadi-3-kolom.html

4 komentar:

Unknown on 19 August 2009 at 13:38

Akhirnya ketemu juga artikel yang menjelaskan footer dibagi menjadi 3 kolom

thanks banget yah admin

sukses selalu untuk anda

Kadri on 26 December 2009 at 02:30

Makacih ya Tutornya (^.^)

Najibblog2010 on 18 January 2010 at 12:09

Sudah say coba dan akhirnya berhasil..terimakasih mas...silahkan lihat di Najibblog,

Anonymous on 4 February 2010 at 10:59

Sy coba y....

Leave a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.
Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).
Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.
Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongkan.
Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi.