Tutorial: Menu Bar Header.

Salam dan Hello.

Setelah berkurun tak bukak fromlog yang sekarang dalam proses peng-delete-an, aku jumpa la beberapa blogger yang tanya camana nak buat menu bar macam kat blog aku ni. Sorry sangat kat orang yang tanya tu, dah lama dah kot korang tanya tapi baru aku nak jawab soalan korang sekarang dengan buat tutorial khas utk korang. hehehe~


Kepada sesiapa yang bertanya tu, aku tak ingat nama-namanya, ini dia cara buatnya. Nama 'benda' ni Menu Bar tau, atau Navigation Header ke atau yang sewaktu dengannya lah.



Mula-mula aku nak bagitau, aku jumpa tutorial ni dekat blog maribinablog. Lepastu aku edit² balik code dia sebab aku nak yang ada double list la kononnya. Ini aku nak credit lah kat tuan empunya tuto ni. Terima kasih yaa! Aku just terangkan balik camana aku buat Menu Bar versi aku, Hahazirah. ;)

1. Macam biasa first back up lah template blog kao. Kang tak jadi naya blog kao tau. Pegi dekat Design > Edit HTML > Tick/Tandakan kotak Expand Widget Templates.

2. Lepastu copy code bawah ni dan paste di Design > Edit HTML > Tick/Tandakan kotak Expand Widget Templates sebelum ]]></b:skin>

#nav {
  height: 35px;
  width: 800px;
  background: #111 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -110px;
  padding: 3px 6px 2px;
  margin:0;
  font: 12px Arial;
  clear:both;
  margin-left: px;
  padding-bottom: 0px; }

#nav ul {
  background: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -110px;
  padding:0;
  margin:0;
  list-style:none;
  line-height:1; }

#nav a {
  display:block;
  width: 105px;
  margin:0;
  line-height: 20px ;
  padding: 5px;
  color: #fff;
  font-weight: bold; }

#nav a:hover{
  text-decoration:none;
  background: #dddcd8 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 0;
  background-color: #666;
  color: #000; }

#nav ul div {
  float:left;
  width: ;
  background: transparent;
  overflow:hidden;
  border-radius: 0em; }

#nav ul div ul li {
  border-top:0; }

#nav ul div ul li ul li {
  border-top:0; }

#nav ul div.firstchild a {
  background-color: #fff;
  color: #000; }

#nav ul div.firstchild ul {
  border-top:0; }

#nav ul div ul {
  background: #32312e;
  position: absolute;
  margin:1px 0 0 px;
  width: ;
  left:-999em; }

#nav ul div ul ul {
  background: #32312e;
  margin:-30px 0 0 115px; }

#nav ul div:hover ul ul,
#nav ul div.sfhover ul ul {
  left:-999em; }

#nav ul div:hover ul,
#nav ul div li:hover ul,
#nav ul div.sfhover ul,
#nav ul div li.sfhover ul {
  left:auto;
  }

Mari tengok sini nak edit² warna, tukar background ke atau nak tukar width ke, tengok bawah ni ok:
Tulisan biru - Untuk height menu bar, contoh: 35px
Tulisan hijau - Untuk width menu bar, sesuaikan ikut width blog anda (tengok width dekat outer-wrapper/content wrapper).
Tulisan Merah - Tukar warna background menu bar, contohnya: black/#000000 dan boleh jugak tukar background image kalau mahu. tukarkan url image.
Tulisan Oren - Tukar saiz font, jenis font dan apa² yang berkaitan dgn font.

dan tukarlah apa yang patu kat tempat lain tu ok.

3. Akhir sekali copy pulak code bawah ni dan paste selepas <div id='content-wrapper'>.

Atau boleh jugak paste di Layout > Page Elements > Add a Gadget > HTML/JavaScript dan drag/seret kan di bawah gadget header anda.

<center><!-- start nav --> <div id='nav' style='text-align:center'>

<ul>
<div class='firstchild' style='background-color: ;'><a href='#'>Home</a>
<ul>
<li><a href='#'>Link</a></li>
</ul></div>

<div style='background-color: ;'><a href='#'>About</a></div>

<div style='background-color: ;'><a href='#'>Link</a>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a>
<ul>
<li><a href='#'>Link 5</a></li>
<li><a href='#'>Link 6</a></li>

</ul></li></ul></div>

<div style='background-color: ;'><a href='#'>Link</a></div>

<div style='background-color: ;'><a href='#'>Contact</a>
<ul>
<li><a href='#'>Contact 1</a>
<ul>
<li>Put Anything You Want Here</li>
</ul></li>

<li><a href='#'>Contact 2</a>
<ul>Just Put Anything You Want Here

</ul></li></ul></div>

<!-- end nav --></ul></div></center>

Tukar la apa yang patut, contoh:
# = link engkorang, contohnya: http://hahazirah.blogspot.com
Tulisan Bold = Nama link korang tu, contohnya: HOME

4. Ok, dah siap! Sesuaikanlah width dgn height dia ikut blog kao yea. Sorry again sebab lambat buat tuto. Peace, and Good Luck! :D

12 comments:

  1. nice tutorial.

    i'm following u.

    visit me back n follow. :)

    ReplyDelete
  2. kak zira , diba buat tak jadi laa . dy jd kbawah smue , huahua ):

    ReplyDelete
  3. eiyadiba - oh yeke, yg ni mmg pening skit. kena buat dgn teliti.

    ReplyDelete
  4. dah jadiiiiiiii.....~~~~~~ thx ea yunk...tp mula2 susah...lpz godeh2 jadi lorh.....
    (^_^)V

    ReplyDelete
  5. @Queen of Sadness - wokei, bgus la kalo mcm tu. benda ni sume mmg mcm tu la, kena phm2 kan dia btul2, bru dia nk jd. :)

    ReplyDelete
  6. Pretty nice post. Aku hanya tersandung pada blog Anda dan ingin mengatakan bahwa saya telah benar-benar menikmati browsing posting blog Anda. Dalam hal apapun saya akan berlangganan feed Anda dan saya harap Anda menulis lagi segera!.

    ReplyDelete
  7. @Anonymous - Terima kasih anon. terharu saya mbacanya. :D

    ReplyDelete
  8. Kak zira mcm mana klau kita nak letak gambar kita pastu nak tulis2 kat Menu Bar tu ? Konon nya kan mcm kan ada Home , About ngn lain2 kn . then kat about tu la yg saya nk letak gmbar tu pastu nk tulis2 . macam mana eh ? heee ^^

    ReplyDelete
  9. @Wany Shukri ohh.. fhm2. yg tu awk buat stu page kan, lps tu awk link kan page tu td ke tempat about, home, etc tu. hrp fhm k. =)

    ReplyDelete