Saturday

Menstail Header #01

Ramai juga yang berminat dengan header yang aku guna sekarang ni ya, aku dapat tahu pun kat entri khas untuk rekuas tutorial yang aku poskan itu hari. Dah lebih 100 komen aku terima dalam sedar tak sedar.

Tapi janji tau lepas buat tutorial ni kamu tukar warna headerbar dan navigation bar ni ya! Malulah aku nanti semua blogger pakat-pakat guna warna yang sama je.

Gurau jelah!



Html Header

Pertama sekali kamu kena buang kod header asal yang berada dalam templat kamu. Lain templat lain kod, jadi sila search dengan teliti.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title (Header)' type='Header'/>
</b:section>
</div>

Kemudian letakkan kod Html header yang baru di bawah kod Html <body>.

<div id='headerbar'>
<p>
<a href='http://dilarangmelarang.com/' title='Home'>
<img border='0' src='header.gif' style='margin:8px 0 0 10px;'/>
</a>
</p>
</div>

<div id='navigationbar'>
<p>
<a Title='Home' expr:href='data:blog.homepageUrl'>Home</a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a>
<a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a>
<a href='http://dilarangmelarang.com'>DilarangMelarang</a>
</p>
</div>


Imej Header



Memandangkan aku gunakan imej menggantikan teks, maka kamu perlu gunakan perisian Adobe Photoshop, PhotoScape atau apa-apa perisian mengedit imej untuk mencipta imej sendiri. Pastikan height imej adalah 30 piksel ya!

Css Header

Memandangkan kamu dah buang kod Html header asal, maka kamu kena buang kod Css header asal juga. Lain templat lain kod, jadi sila search dengan teliti.

Kemudian gantikan dengan kod Css header yang baru.

#headerbar{
background:#215976;
color:#999;
font-size:12px;
height:46px;
width:auto;
}
#headerbar a:link,#headerbar a:visited{
color:#fff;
font-size:11px;
font-weight:700;
margin-right:14px;
text-decoration:none;
}
#headerbar a:hover{
color:#ccc;
}
#navigationbar{
background:#454545;
height:32px;
width:auto;
}
#navigationbar a:link,#navigationbar a:visited{
border-right:1px solid #ccc;
color:#fff;
display:block;float:left;
font-size:12px;
font-weight:700;
height:20px;
line-height:20px;
margin-top:6px;
padding:0 10px;
}
#navigationbar p,#headerbar p{
border:0;
width:990px;
margin:0 auto;
padding:0;
}

Kalau kamu menggunakan templat minima, kamu mungkin menjumpai kod Css header asal sebegini.

Selamat berjaya!
Posted by at
Labels: , , , ,

10 comments:

  1. mohdisa11.7.09

    wah, thanks bro. best2...abis ko godek theme ni yerk...hehe

    ReplyDelete
  2. AzzaaM11.7.09

    ooho, mantap :0

    ReplyDelete
  3. HOT ZOOM11.7.09

    juki ko ni pakar template la.
    aku namakan ko nama baru juki template hehehe
    jangan mare heh

    ReplyDelete
  4. Eriyza11.7.09

    Hohoho!
    Makin byk ilmu dpt.
    Tq Juki.

    ReplyDelete
  5. Hafaisy11.7.09

    aku la yg requestkan tue ..hahaha

    ReplyDelete
  6. alone12.7.09

    simple juga caranya eh. trimas!

    ReplyDelete
  7. Hafaisy13.7.09

    Css Header

    Nak carik kat ner

    ReplyDelete
  8. MJ13.7.09

    Hafizul Asyrul, antara <b:skin><![CDATA[ hingga ]]></b:skin>

    ReplyDelete
  9. samanosuke_0413.7.09

    nie untuk blogger je ker? huhu, cantik theme baru ko..

    ReplyDelete
  10. cikgu dee27.7.09

    erk...baru sampai...aku dh ketingalan..huhu....cian kat aku bang juki..

    ReplyDelete

Subscribe to: Post Comments (Atom)