Sebelum ni aku ada buat entri pasal kenali code..tapi yang tu terlalu simple..kali ni mau cakap mendalam..tidak juga..masih ringkas tp lebih detail sikit..aku buat entri ni pasal ada feedback dari pengunjung..thanks.. ada juga orang sudi lepak sini..hhuhuhuh..lalala..hehehe huahuauhuhfha
Penerangan ini berdasarkan dari template asas yang simple iaitu template minima..biasa la kalau mau blajar mesti dari asas..tidak kenal huruf macamana mau membaca,x boleh baca macamana mau buat karangan..mcm tu la perumpamaannya..
Untuk permulaan aku akan terangkan pasal header..dalam penerangan ni aku sertakan 2 gambar untuk memudahkan pemahaman..
Gambar 1
gambar di atas ialah contoh header jenis tulisan..x ada gambar..malas mau letak..haha..berada pada atas sekali..sebab apa header ni di atas? sebab pada susunan code HTML..code HTML header di letakkan di atas ..bukan pasal nama dia header...nama header tu cuma nama ID..bukan kata arahan..pening? rilek jangan pening lagi...kalau nak pening sila pening pada penerangan gambar ke 2..haha
skrg dah tau kan kenapa header tu di atas..bukan sebab CODE CSS header di atas..tapi susunan code HTML
<html>
<head>
<b:skin>
#header ---cth
#header --lalala CTH CSS header pada template
#header --apa daaa
</b:skin>
</header>
<body>
<div id='header'> CONTOH CODE HTML PADA TEMPLATE
</div>
<div id='main wrapper> Blog Post
</div>
<div id='sidebar> Sidebar
</div>
<div id='footer'>
</div>
</body>
</html>
ada paham..?
Gambar2
gambar di atas tu cth pandangan admin blog..dalam petak merah tu ialah header...dalam petak merah tu ada section yang petak biru tu..section ni ialah add a gadjet tu...jika tiada section maka tiada la add a gadget pada area header tu...biasanya orang letak folower di section area header...ada juga yang letak iklan
orang cakap header tu identiti setiap blog jadi jika anda letak iklan dekat area header maknanya blog anda blog iklan?..hehe jangan marah aaaa....kalau aku..aku x letak iklan pada area header..melambatkan loading blog..aku suka letak iklan pada bahagian footer loading berat pun tapi entri kluar load terlebih dahulu..iklan tu nanti2 la..sebab orang datang ke blog ni utk cari tutorial bukan iklan..betul x?
Berikut adalah Code CSS untuk template MINIMA
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
SOALAN : apa akan jadi jika saya padam code css header pada template? ..
JAWAPAN : segala efek seperti warna tulisan,border,jenis tulisan,saiz tulisan,background,hover,tinggi,lebar dll efek yang disetkan untuk header akan hilang..header masih ada dan tetap berada di atas sebab pada code HTML code header di letakkan di atas sekali..
Kalau ada soalan lain tanya ja di ruangan komen.
Berikut adalah code html header pada template yang tidak di expand widget template
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='cool template design (Header)' type='Header'/>
</b:section>
</div>
simplekan..yang ni belum tick pada expand widget template..kalau tick pada expand widget template..lagi rumit..
Jika anda buang code di bawah ni.. add a gadjet pada gambar 2 pada petak biru tu..akan hilang..
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='cool template design (Header)' type='Header'/>
</b:section>
SOALAN : apa akan jadi jika saya delete keseluruhan code HTML HEAD....
JAWAPAN : header tu akan hilang..code CSS header akan hilang fungsi@ xda makna..
Nampak x perkaitan dari soalan tu?soalan 1.code CSS di buang..header tetap ada..soalan2..code HTML di buang header hilang CSS header hilang fungsi..
CSS - #header
HTML - <div -id='header'>
Kait punca code CSS dan HTML untuk header..
Apa macam penerangan ni..dapat ikut..
Jom teruskan dengan
#outer wrapper
pula...sekian..
8 ulasan:
bila masuk coding2 segala nie trosss pening hehe....
as salam, ummi penah cuba nak taroq pic kat tempat header tur...ntah apa2 jadik...sedih toi la
@nurr f@!sha f@t!h@h
kalau sy nak buat header sy buat header yang simple..guna manual edit..hehe..
@far_east
perkara biasa pening bab coding ni..harap dapat ikut cara penerangan sy..esk lusa bila da fhm blh edit template kaw kaw..hehe
sis tk berani sngat nk edit html bagai..
sebab tu make sure back up blog, klu papa jadi taklah gabra sangat hehe
makasih infonya ... :)
Ban Terbaik di Indonesia GT Radial
@sis92
jangan takut utk gagal sis..segala kegagalan aku mengedit template menjadikan aku gila utk edit template ni..smpi skrg aku masih gagal tp x pernah berhenti untuk menchoba..('',)
@Error Shinobi
sama2 bro
Catat Ulasan