TUTORIAL : Vertical Menu Bar

ouhh yeahhh ! nak buat menu tab macam una ?? hahh , mehh , jom3 kite belajar yerr ? macam biasa .

First go to your Dashboard > Design > Add gadget > HTML/Javascript then copy paste code dekat bawah niee :

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.sidebarmenu ul{
width:250;
text align:center;
list-style-type: none;
font: normal 13px Century gothic;
}
.sidebarmenu ul li{
position: relative;
}
/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-align:center;
text-decoration: none;
padding: 0px;
}
.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #C6C6C6; /*background of tabs (default state)*/}
.sidebarmenu ul li a:visited{
color: white;}
.sidebarmenu ul li a:hover{
background-color: #000000;}
/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}
if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)
</script>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="LINK">HOME</a></li>
<li><a href="LINK">ABOUT ME</a></li>
<li><a href="LINK">TUTOTIAL</a></li>
<li><a href="LINK">TAGBOARD</a></li>
</ul>
</div></center></center>
MERAH : yang tuh dia punyer width ikut width sidebar korunk kayy ?
BIRU : biru tuh pulak wrna tab before cursor sentuh .
UNGU : yang nie dia punyer warna tab bila cursor sentuh .
HIJAU : hijau pulak link yang korunk nak letakk kayy ?
KUNING : yang kuning pulak words dia .

nota kecil :
bila dah masuk dalam ruangan HTML tuh kann ? jangan click RICH TEXT tauu ?? kalau tak dia takkan jadi punyaa , soo , hati2 yer semuaa waktu buat ?

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

50 comments:

  1. thanks yer sebab buat request Hanis :)

    ReplyDelete
  2. btw,blog kita hampir sama lah blockquotenya...hehe..

    ReplyDelete
  3. nak try laa tuto ni tapi link tu nak amek dr mne ek?

    ReplyDelete
  4. tengs una ~ lme da nakk tutorial nih .. :)

    ReplyDelete
  5. Awwaww, nice tuto. Zureen guna yea kakak tomel ;D

    ReplyDelete
  6. kak una, yang tab kat belah atas tu nak edit macam mana ek?

    ReplyDelete
  7. akak , thanks . dah lama crik ohhh . tibe2 jumpe . alot of thanks kat akak . !

    ReplyDelete
  8. kac unaa . aen guna tuto ney . tengss kc unaa .

    ReplyDelete
  9. kak una,kenape diye rapat-rapat ek?tak macam yg kak una punye?

    ReplyDelete
  10. Thanks kak una ! Nana guna tuto ni <3

    ReplyDelete
  11. knp width dea tak ikut ngn size sidebar eh?
    tak jadi lha.

    ReplyDelete
  12. kak Una, Lettha copy ye? nanti Lettha bagi credit :)

    ReplyDelete
  13. Una, tia re-tuto tau. Credit given :)

    ReplyDelete
  14. akk , adk share ehh tuto nie . adk credit name akk , keyh :) thanks ^.^

    ReplyDelete
  15. akak , knpe saya pun tak centre ekh ? cam mane nak buad?

    ReplyDelete
  16. Una ,, yas copy tuto ni ehh .. Yas akan credit ke una :)

    ReplyDelete
  17. Akk nape die jadi kecik eh ? sangat

    ReplyDelete
  18. kak una , link tuh macam mana ? tak paham laa :'(

    ReplyDelete
  19. hai akak. thanks banyak2 sangaaat untuk tuto ni.. dah lama cari.. hehe ilapyou.. :P

    ReplyDelete
  20. una . kila da dapat masukkan dalam blog . tapi cara2 nak create page die tu una taknak ajar ke ?

    ReplyDelete
  21. thanks una . btw kila rasa best pulak sbb semua tuto yang una bwadd kila menjadi . (:

    ReplyDelete
  22. mcm mne nak amik code die eh? ta pandai la!

    ReplyDelete
  23. fafa pkai yee .
    thanx 4 the tuto :)

    ReplyDelete
  24. Tengs 4 diz toturial.. blogwalker here~~ hihihixz

    ReplyDelete
  25. thanks akaq Una . btw , boleh saya tahu mcm mane nak buad list ? contohnya list tutorial akaq una yg pelbagai . mcm mana nak buad ?

    ReplyDelete
  26. akak thanks for this tuto :)
    tapi knpa dia rapat2? saye nk bgi dia jarak2 skit cemana ye? Thanks ^^

    ReplyDelete
  27. hye ! thanx sis .. dah lama dah cari .. akhir nya jumpa jugak .. amik ya .. :D

    ReplyDelete
  28. una , yang link pasal kite tuh nak amek kat mane ?

    ReplyDelete
  29. Menjadi tp saya punye jd ketepi... mcm mane nk k'tghkn balik yea..

    ReplyDelete

Assalammualaikum and Hye to all Blogger. Harap anda tidak mengeluarkan sebarang bahasa yang kasar ATAU keterlaluan untuk di baca. Ada apa-apa pertanyaan? Sila komen sini.. =TERIMA KASIH=