Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



8. MEMBERI STYLE DI BAHAGIAN FOOTER
December 30, 2009
Posted by: Fauzie


Sekarang kita akan mencantikkan pula bahagian footer. Pertama sekali kita akan masukkan image. Untuk tujuan ini, kita akan menggunakan image yang sama dimasukkan di bahagian content. Tujuannya ialah untuk memberi effek footer sebahagian daripada content.

Pergi ke kod footer seperti di bawah ini:

#footer {
background: orange;
height: 66px;
}


Padam atau delete kod "background: orange;" dan "height: 66px:" dan gantikan dengan kod-kod berwarna maroon di bawah ini:

#footer {
background: url(http://i425.photobucket.com/albums/pp331/fauzi6009/
g11line20.gif) repeat fixed;
font-weight: bold;
padding:0 0 0 40px;
color:#c9c9c9;

padding: 13px 25px;
line-height: 18px;

text-decoration: none;
font-size: 10px;
font-family: Verdana;

}

Klik Preview dan Save Template.

Setelah berjaya memasukkan background image, kita akan memasukkan pula maklumat yang diperlukan. Untuk latihan ini anda hanya perlu masukkan maklumat yang telah saya sediakan dan anda boleh menukarkannya kemudian.

Sila anda cari kod ini:

<div id="footer">Footer</div>

Sila padam atau delete perkataan Footer dan gantikan dengan kod-kod berwarna maroon ini:

<div id='footer'>
<p><h2>Inspired by Tim Van Damme, Sohtanaka and others</h2></p>
<div id='copyright'>
Copyright &#169; 2009 Fauzi Mustafa<br/>
Powered by <a href='http://tip-buat-blog.blogspot.com/'>Jom Kita Blog</a> and
<a href='http://www.vadmin.co.nz/'>Blogger</a>
</div>

</div>

Klik Preview dan jika ok, klik Save Template. Jika anda view, tulisan pada bahagian footer ini nampak tidak menarik. Oleh yang demikian kita kena beri stail untuk nampak menarik.

Cari atau pergi ke kod seperti di bawah ini:

h1 {
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
font-family: "Liberation Sans Bold", Arial, sans-serif;
text-align: center;
color:#000; font-size: 20px;
}


Kemudian copy dan paste kod CSS maroon ini di bawahnya:

h1 {
font-weight: bold;
text-shadow: 1px 1px 1px #fff;
font-family: "Liberation Sans Bold", Arial, sans-serif;
text-align: center;
color:#000; font-size: 20px;
}
h2 {
font-weight: normal;
text-shadow: 1px 1px 1px #fff;
font-family: "Liberation Sans Bold", Arial, sans-serif;
text-align: center;
color:#000; font-size: 12px;
}

Klik Preview dan pastikan fontnya telah menjadi lebih menarik. Jika Ok, Klik Save Template.