Kamis, 28 April 2011

Membuat footer ada (yang pertama tidak ada menjadi ada)

Hari ini saya akan memposting cara menambah footer yang tidak ada footernya. Biasanya kita punya templates yang tidak ada footernya buat taruh widget di situnya. Maka saya akan memposting :
Cara menambah footer yang tidak ada footer

Caranya saya hanya mengcopy beberapa kode CSS dan menambah kode seperti <div id='footer-wrapper'> dan ikuti saja petunjuknya hahahaha.

1. Tulis CSS di bawah ini di atas </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
2. tambahkan script ini di bawah <!-- end content-wrapper -->

<div id='footer-wrapper'>
</div>
3. sebelum </div> tambahkan script di bawah ini sebelum </div>

<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='#ffae00' 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>

4. simpan dan lihat ke elemen laman apakah ada


Semoga bermanfaat !!!

(sumber kode : http://marcellinoagatha.blogspot.com/2009/05/membuat-footer-3-kolom.html)
Mohon jangan ngeliat sumber nya karena saya hanya mengambil kode script dan CSSnya saja tidak yang lain. jika mau bukti silakan buka web saya dengan sumbernya
Disqus Comments