Tutorial : Navigation version 3

No re-post or re-tuto

Hee , ada yang request tuto nih kan ,  so saya akan share kat korang okayy :)

1. Pergi ke Dashboard > Layout > add HTML java script
2. copy code bawah nih and paste dalam HTML java script tuh tau 

<style>
#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 900px;
  height: 100px;
  background: url(http://i.imgur.com/416UJrZ.png) no-repeat;
  position: relative;
left: 356px;}
#menu span {
  display: none;
  position: absolute;
}
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
}
#menu a:hover {
  background-position: left bottom;
}
#menu a:hover span {
  display: block;
}
#menu .home {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/KGzftyW.png) no-repeat;
  left: 96px;
  top: 17px;
}
#menu .home span {
  width: 90x;
  height: 51px;
  background: url(http://i.imgur.com/pe34usM.png) no-repeat;
  left: -8px;
  top: -5px;
}
#menu .home2 {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/C8XyMXg.png) no-repeat;
  left: 606px;
  top: 17px;
}
#menu .home2 span {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/xCdx18X.png) no-repeat;
  left: 8px;
  top: -6px;
}
#menu .about {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/3Cq0LhQ.png) no-repeat;
  left: 188px;
  top: 17px;
}
#menu .about span {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/qoCtJS9.png) no-repeat;
  left: 2px;
  top: 2px;
}
#menu .about2 {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/e9mp2QY.png) no-repeat;
  left: 508px;
  top: 17px;
}
#menu .about2 span {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/sviX1Wk.png) no-repeat;
  left: 2px;
  top: 2px;
}
#menu .rss {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/q84YwyX.png) no-repeat;
  left: 288px;
  top: 17px;
}
#menu .rss span {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/NaZNaHT.png) no-repeat;
  left: 16px;
  top: -1px;
}
#menu .rss2 {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/T6gFai1.png) no-repeat;
  left: 398px;
  top: 17px;
}
#menu .rss2 span {
  width: 90px;
  height: 51px;
  background: url(http://i.imgur.com/zcSlzh2.png) no-repeat;
  left: 26px;
  top: -6px;
}
</style>
<ul id="menu">
  <li><a href="YOUR LINK" class="home">Home <span></span></a></li>
  <li><a href="YOUR LINK" class="about">About <span></span></a></li>
  <li><a href="YOUR LINK" class="rss">Service <span></span></a></li>
  <li><a href="YOUR LINK" class="rss2">Xchange <span></span></a></li>
<li><a href="YOUR LINK" class="about2">Tutobies <span></span></a></li>
<li><a href="YOUR LINK" class="home2">Shopping <span></span></a></li>
</ul>

Dah siap ? Bagus ^_^ Sekarang anda leh guna lah . hehehe



Nota kaki bukan tangan:


Highlight kaler biru tuh ialah size blog anda kay . kena edit . sebab size tak sama . Jadi kalau tak center paham2 lah ek nak tukar yang mana :)