Tutorial 143: Membuat Menu Bar *baru

Assalamualaikum..

Lama tak update tutorial. So ini tutorial just for back up..kalau tetiba terhilang coding dalam simpanan.

1.Login ke Blogspot, clik Template > Edit HTML > Rujuk sini

2. Selepas itu...cari code ini ]]></b:skin>
dengan cara tekan CTRL F
3. Copy code di bawah dan PASTE di ATAS/SEBELUM code yang korang cari tadi.

/* menu bar */
#menubar{
margin: 0;
padding: 6;
float:center;
border:0px solid #ffffff;
width:90%;
background:#ffffff;
}
#menubar li{
margin-left: 0;
padding: 5px;
list-style: none;
float: left;
font: bold 14px arial;
}
#menubar li a{
display: block;
margin: 0;
padding: 10px 10px;
background:#F6A0BD;
color: #000000;
box-shadow: 3px 2px 3px #333;
-webkit-box-shadow: 3px 2px 3px #333;
-moz-box-shadow: 3px 2px 3px #333;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center;
text-decoration: none;
border:3px dotted #ffffff;
}
#menubar li a:hover{
background: #E94F94;
color: #ffffff;
box-shadow: 3px 2px 3px #333;
-webkit-box-shadow: 3px 2px 3px #333;
-moz-box-shadow: 3px 2px 3px #333;
text-align: center;
text-decoration: none;
border:2px dashed #ffffff;
}
#menubar div{
position: absolute;
visibility: hidden;
}

 Petunjuk:
#F6A0BD warna background
 #000000 warna tulisan/font
dotted boleh pakai dashed, solid
*pandai-pandai la ejast nak colour apa.
  

4. Try Preview, jika tak ada sebarang masalah. SAVE sahaja.

5. Selepas itu, Copy code di bawah:

<br/><ul id='menubar'><center>
<li><a href='http://bicarafarah.blogspot.my'>Home</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html'>Tutorial Blog</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/my-review-collection.html'>Produk Review</a></li>
<li><a href='http://bicarafarah.blogspot.com/p/info-dan-tips.html'>Info/Tips</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/blog-page_16.html'>Portfolio: Header Design</a></li>
<li><a href='http://bicarafarah.blogspot.my/p/portfolio-header-design.html'>Portfolio: Blog Design</a></li>
</center></ul>

6. Pergi ke Layout Blog > Add Gadget > Html/JavaScript (bahagian crosscol) dan Paste code di atas dalam Html/JavaScript tapi ubah dulu :

Petunjuk:
http://bicarafarah.blogspot.my - link korang
Home - tab menu title

Kalau nak add just add code di bawah sebelum code bertanda kuning

<li><a href='http://bicarafarah.blogspot.my'>Home</a></li>

7. Save dan lihat hasil.

*kenapa pakai tab menu ni bagus? Sebab kemas dan tersusun..boleh letak banyak menu...boleh delete, add ubah bila-bila masa, jimat masa daripada nak design kat PS. Selamat mencuba..good luck!