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

Header

• Cara Menghilangkan Tajuk Blog
• Memasukkan Gambar Di Header

Tips

• Cara Memasang Total Post & Total Komen
• Highlight Script/Kode Pada Postingan
• Cara Menukar Icon Pada Address Bar
• Cara Membuat Link Download
• Cara Menghilangkan Status Message
• Cara Membahagikan Posting
• Membuat Read More V2
• Jenis-Jenis Border, Tambah dan Buang
• Cara Memasang Chat Box
• Membuat Read More di Template Classic
• Memasang Emoticon Di Post Entry
• Cara Membuat Dropdown Menu
• Mengelakkan Widget Hilang
• Cara Menukar Template
• Cara Memasukkan Senarai Link
• Hilangkan "Subscribe to:Posts (Atom)"
• Cara Menghilangkan Tarikh Pada Posting
• Cara Membuat Top Post
• Cara Menambah Efek Salji
• Cara Membuat Kotak Search
• Menukar Tulisan Older Post
• Memasang Kotak 'Alert Message'
• Membuat Pesanan Di Posting
• Membuat Horizontal Link List/Label