Tutorial ni atas request pengunjung setia blog ni..walaupun aku kurang mahir untuk membedah isi kandungan simple template..namun aku cuba juga buat..
Simple template ni nama ja simple dan nampak simple tapi coding dia tidak la simple mcm nama template tu..sebab tu aku lagi suka guna template lama..senang mau edit template ikut suka..sebab coding template lama cukup simple..
Mula2 pergi ke desbot---desaign---edit html...jangan tick pada expand widget template...
Cari code <header> (pembuka code) dan padam code tu sehingga </header>(penutup code)....rujuk gambar di bawah..
code yang anda padam tu adalah code header HTML untuk template simple
Oleh kerana anda telah buang code HTML header maka Anda kena buang code CSS header sebab code tu sudah tiada fungsi lagi....
Berikut adalah code CSS header untuk simple template
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
Setelah anda delete code HTML dan CSS header tu klik preview..jika ok baru la anda blh buat header sendiri..Simple punya..
Cara buat header..
<center><img src='URL GAMBAR HEADER ANDA'/></center>
Nota penting : untuk coding jika anda terlupa letak simbol remeh seperti ' / > code tu tidak akan menjadi...
pada template pula code tu akan error..jika anda letakkan simbol remeh di tempat yang tidak betul....akan jadi error juga...
<center><img src='http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg'/></center>
Di atas ni contoh code yang betul...dan di bawah aku sertakan 3 code yang tidak betul..
<center><img src='http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg/></center>
<center><img src='http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg/'></center>
<center><img src=http://iammookie.com/wp-content/uploads/2011/10/29pai3o.jpg'/></center>
Sekarang kita akan letakkan code tu pada template...
cari code <body expr:class='"loading" + data:blog.mobileClass'>
kemudian masukkan code gambar header anda selepas code di atas ni..sila rujuk gambar di bawah..
kemudian klik preview...jika ok save...hasil dia blh rujuk gambar di bawah..
Jadi jika ada error anda boleh rujuk code2 di atas tadi..cuba lihat code anda tergolong kepada code yang betul atau salah..kalau tidak pun anda cuba letakkan code yang betul di atas tu unk percubaan..
..sekian..
4 ulasan:
tanks broo.. dah settel...
@Aqmil Lambung
your welkame bro..('',)
thankz :) sye dpt ubah header sbb tutorial ni >_<
terimakasih banyak banyak. anda telah mempermudahkan urusan orang lain, semoga Allah mempermudahkan urusan anda , Amin :)
Catat Ulasan