Tutorial : Cara Tambah Column Di bahagian Footer

Wednesday, March 14, 2018
Siapa pakai Denim Template macam zati bahagian footer mesti ada satu column je kan? Tapi kalau siapa yang ambik Template kat mana mana website tu memang dah siap dah column untuk footer tu.

Yang nak tambah column tu meh tengok tuto ni.

** Sila backup / download dulu template korang untuk mengelakkan kesusahan dikemudian hari.. hehe **

1. Template > Edit HTML > Tick Expand Widget
2. Cari code ]]></b:skin>
3. Copy dan paste kan code dibawah ni diatas code yang korang cari tadi

#footer-column-divide {clear:both;}.footer-column {padding: 10px;}
4. Dah ? Cari code ni pulak

<div id='footer-wrapper'><b:section class='footer' id='footer' showaddelement='yes'/></div>ATAU<div id='footer'><b:section class='footer' id='footer' showaddelement='yes'/></div>
5. Tambahkan code <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Catatan : Kalau korang tak jumpa code <b:section class='footer' id='footer' showaddelement='yes'/>Korang just tambahkan je kat bawah code <div id='footer'> atau <div id='footer-wrapper'>

6. Code kat bawah ni adalah code column ye. Korang pilih nak berapa column then korang copy dan paste kan bawah code yang korang cari tadi.

FOOTER 2 COLUMN

<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

FOOTER 3 COLUMN



<div id='footer-column-divide'><div id='footer1' style='width: 33%; float:left;margin:0; text-align:left;'><b:section class='footer-column' id='col1'preferred='yes' style='float:left;'/></div><div id='footer2' style='width: 33%; float: left;margin:0; text-align: left;'><b:section class='footer-column' id='col2'preferred='yes' style='float:left;'/></div><div id='footer3' style='width: 33%; float: right;margin:0; text-align: left;'><b:section class='footer-column' id='col3'preferred='yes' style='float:right;'/></div><div style='clear:both;'/></div>
FOOTER 4 COLUMN 

<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; float:left;margin:0; text-align:left;'><b:section class='footer-column' id='col1'preferred='yes' style='float:left;'/></div><div id='footer2' style='width: 25%; float: left;margin:0; text-align: left;'><b:section class='footer-column' id='col2'preferred='yes' style='float:left;'/></div><div id='footer3' style='width: 25%; float: right;margin:0; text-align: left;'><b:section class='footer-column' id='col3'preferred='yes' style='float:right;'/></div><div id='footer4' style='width: 25%; float: right;margin:0; text-align: left;'><b:section class='footer-column' id='col4'preferred='yes' style='float:right;'/></div><div style='clear:both;'/></div>

7. Okay dah siap SAVE!
8. Pergi kat Layout > korang scroll kebawah dan tengok bahagian footer.Kalau jadi tahniah !


8 comments:

  1. Dpt pun tutorial mudah ni...tq atas perkongsian zetty..banyak dah guna tutorial dr blog zetty..heheh

    ReplyDelete
  2. hai ain datang singgah sini dan follow awak. salam perkenalan :)

    ReplyDelete
  3. perkongsian yang bagus dan bakal bantu ramai orang :)

    ReplyDelete
  4. tak pernah lagi pakai template ni tapi good tutorial zetty :D

    ReplyDelete

Terima kasih sudi baca entry Zati.
Komen yang baik-baik ye!

Budi Bahasa , Budaya Kita

Powered by Blogger.