Cara Memasukkan Gambar di Header v2

Sebelum ni Ana dah buatkan tips untuk memasukkan sebarang gambar ke dalam header. Tutorial ni Ana buat khas untuk sahabat Manns'gor kerana tidak berjaya memasukkan gambar ke dalam header dengan tips sebelum ni. Sian Manns. Ok caranya begini..

Sediakan gambar header berukuran 660x250 (tinggi ikut sukala) dan uploadkan untuk dapatkan linknya.. Mudah upload di Photobucket

1. Loggin => Layout. Kali ini kita ke bahagian Edit HTML. Cari kod dibawah..

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

2. Tambahkan kod berwarna merah..

#header-wrapper {
background-image:url(http://i302.photobucket.com/albums/nn113/aburifaie/91.jpg);
height:250px;
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

3. Tukar link yang kelip² tu dengan link gambar Antum.Ini link header Ana. Xboleh guna. Tukarkan kod tinggi sekiranya gambar Antum lebih atau kurang dari 250px tinggi. Pastu klik preview dan lihat hasilnya.. Insyaallah gambar sudah muncul..

4. Tapi belum siap.. Border di dalam masih menyibuk kan.. Antum boleh buang atau besarkan die.. Cari kod ini, bawah sikit je.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Kod merah tu ialah border, kalau nak buang delete aje.. kalau nak besarkan tambah dengan kod height:238px; seperti ini..

#header {
height:238px;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Ok siap Alhamdulillah..

Tips² Terkait