Tuesday, June 23, 2009

Membuat Footer 3 Column

Footer ibaratkan kaki di dalam blog (foot=kaki) heuheuheu... Ramai yang memandang remeh berkenaan dengan Footer dan ada separuh di antara blogger yang tidak meletakkan apa² pada bahagian ini. Bahagian ini merupakan alternatif untuk meletak Widget ataupun credit pada sesebuah blog. Bagi template default, biasanyahanya tersedia Footer dimana anda hanya perlu menambahkah gadget (Add a Gadget) untuk memasukkan widget kedalamnya dan ianya hanya memiliki 1 column. Di sini aku nak kongsikan dengan kawan² di mana Footer juga sebenarnya boleh dibahagikan kepada 3 column.

Jika sebelum ini anda selalu meletakkan widget di bahagian sidebar, dengan footer 3 column ini anda boleh meletakkan seberapa banyak widget pada bahagian bawah blog anda.

Berikut adalah cara-cara membuat footer 3 column.

1. Login ke ID Blogger atau terus ke Dashboard.

2. Pilih Layout kemudian ke menu tab Edit HTML.

3. Copy coding dibawah dan paste pada bahagian atas </b:skin>

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

4. Kemudian cari code dibawah ini

<div id='footer-wrapper'>

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

</div>

5. Gantikan coding di atas atau boleh juga letakkan dibawahnya dengan coding dibawah 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;'/> </div>

6. Setelah selesai semuanya, SAVE TEMPLATE! Dan anda boleh beralih ke Layout > Page Element dan melihat hasilnya.


Selamat Mencuba!

12 comments:

Luth Textile said...

bro, aku dulu cari tutorial ni..thankx a lot..

Ilyani said...

thanks for the column... :)

hana_tomei said...

thanks abg ady...terharu sgat nie abg ady wat tutorial nie...thanks again...

mannira said...

tq for sharing... nanti nak buatla yek...

Ann said...

thnks so much :)

PisangGorengKeGorengPisang said...

terima kasih sb kongsi ilmu semoga lebih maju jaya

adreYna said...

bestnye!!dpt wt 3 column untuk footer..
pepun thnkz en ady...=)

Seti@wan Dirgant@Ra said...

Aku sudah pake yang ini Bang,... Makasih.

Eyna's said...

Alhamdulillah...menjadi dah...
Thanks ADY...
le ni proses menyusun plak je yg tinggal...

Unknown said...

saya dah try tapi still tak leh... cemana nih...

Unknown said...

saya dah buat tapi still tak menjadi... nanti saya pastekan kan sini ek... html yang saya dah buat... kat mana silapnya... adakah sbb saya gu na pyzam punya layout atau apa yang tersalah... huhuhu..

Ilyani said...

nak tanye lh...nape footer saye xde kaler background eh?camne nak letak?