Bahagian footer pulak

Step pertama: Pergi ke Layout > Edit HTML. Tekan Ctrl+f untuk memudahkan korang mencari code yang aku nak suruh cari ni. Paste kan code kat bawah ni dalam kotak find:
#footer {
korang akan jumpa code macam ni:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Kita boleh tengok yang width footer kita adalah 660px(tulisan merah) sedangkan kita dah tukar width header dan body jadi 1000px dalam tutorial sebelum-sebelum ni. Jadi sekarang kita akan ubah width footer supaya ngam dengan bahagian body. Tak payah pening-peningkan kepala korang. Highlight seluruh code tu dan gantikan dengan code kat bawah ni:
#footer {
clear:both;
margin:0 0 0 0;
padding-bottom:70px;
padding-top: 20px;
line-height: 1.6em;
text-transform:normal;
letter-spacing:.1em;
text-align: center;
background: url(Masukkan URL Footer Anda Disini) no-repeat bottom center;
height: auto;
}
Ok, setel . Pada tulisan merah tu nanti kita akan masukkan URL footer kita. Tapi, sebelum tu, kita kenalah buat footer kita dulu. It's Photoshop time!
Step kedua: Create new file di Photoshop dengan width 1000px dan height ikut suka hati. Aku akan buat footer dengan height 92px. Gunakan ke-kreatif-an dan segala bakat terpendam untuk buat footer belog korang. Aku buat simple macam ni:

Click untuk gambar yang lebih jelas.

Step ketiga: Upload footer yang korang dah buat tu dalam Imgur untuk dapatkan direct link. Copy direct link dan paste-kan dalam code HTML yang aku suruh tadi. Selepas dah siap paste, preview dulu belog korang sebelum save template. Belog korang sepatutnya dah jadi macam ni:


Pemandangan daerah footer.

kalau dah puas hati, tekan SAVE TEMPLATE. Semoga tutorial ni mudah untuk difahami dan dipraktikkan.

Kredit By:Belog Cap Ayam

1 comment:

sHaR!Na eLyaNa said...

salam kak..cutenya blog akak..color pink gtu..ni mau tnya..cm na nak buat border bunga2 tu suka la kak..hehe