Tutorial : Membahagi footer kepada 3 bahagian

Assalamualaikum dan salam 1 Malaysia

Hari ini, kita akan membahagikan footer kepada 3 bahagia

Owkey, ikut step ini  saje.

Seperti mana yang diketahui kebanyakan template untuk blog mempunyai hanya satu columns pada footer.Ia menyebabkan kita tidak boleh meletakkan lebih widgets pada ruangan tersebut.Dengan membuat ruangan footer kepada tiga bahagian,maka lebih banyak widgets seperti Recent Posts, Recent Comments,Archives dan iklan dapat dimasukkan.Membuat footer sebegini pada blogspot adalah amat mudah dengan hanya mengikuti langkah dibawah ini:

Nota:sebelum anda mengedit template adalah disarankan supaya membuat salinan template terlebih dahulu dengan mengklik Download Full Template pada halaman Layout--- Edit HTML .Pindahkan widget yang ada pada footer pada mana mana side bar atau bahagian yang lain.

Langkah 1

Pada Design pilih edit HTML

Langkah 2

Cari kod berikut

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

@

<div id='footer-section'>

<b:section class='footer' id='footer'/>

</div>

Nota:pada sesetengah template selain dari footer-wrapper anda mungkin jumpa footer atau footer-section

Langkah 3

Tukarkan kesemua bermula dari <div> ke </div> dengan kod berikut:

<div id='footer'>

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

<b:section class='footer' id='col-bottom' preferred='yes'>

</b:section>

</div>

<div style='clear:both;'/>

</div>

Langkah 4

Kemudian save template anda.

Ranking: 5