Membuat Footer menjadi tiga kolom

Selasa, 27 Januari 2009
Mengutak - atik template memang menyenangkan walaupun harus berpikir keras namun hasil dari kerja kita bisa kita banggakan nantinya,untuk membuat kolom footer menjadi tiga ternyata hanya menambah beberapa kode di sana - sini,mari kita lihat bagaimana cara membuat kolom di footer



Sebelum itu coba lihat dulu panjang dari template kamu ( width )

dan jangan lupa klik expand widget





1. Kamu cari dulu kode ]]></b:skin>

2. Taruh kode di bawah ini di atasnya



#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}



3. Kemudian kamu cari lagi kode berikut



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


untuk memudahkan pencarian bila kamu pengguna mozilla bisa tekan ctrl + F


4. Taruh kode ini di bawahnya




<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>


5. Untuk memastikan tidak ada kesalahan silahkan klik pratinjau

6. Bila hasil bisa dilihat dan tidak terjadi masalah silahkan klik simpan

7. Berikutnya kamu pergi ke elemen halaman,tambahkan widget di fotter kamu dengan mengklik tambah gadget.alu klik HTML / Java script.tambahkan widget yang kamu suka
misalnya



<a href="WWW.KONSULTASIBLOGGER.BLOGSPOT.COM"><img src="http://3.bp.blogspot.com/_C-5LJJO7pvg/SW136rchrxI/AAAAAAAAAGQ/60jSHlU6WxA/s320/KONS+LOGO.png"></a>



lalu pilih simpan,tinggal lihat footer blog menjadi tiga kolom


Selamat mencoba...















0 comments:

Posting Komentar

Silahkan komentar di blog dofollow ini.Boleh berkomentar asal jangan spam ( Tidak sesuai dengan isi blog )Untuk komentar yang cuma Spam dan sedikit terpaksa saya Hapus ^_^

 
Adformat designed by Simon Pilkington