Tutorial : Vertical Menu Tab

Assalamualaikum!! Hello!!

Dah masuk 6 hari aku tak update. Tapi buka blog hari-hari, siap meng-edit lagi! Aku rasa daripada dibiarkan begitu sahaja, baik aku isi sesuatu bukan? So, aku buat tutorial.. Tahu apa itu Vertical Menu Tab? Figure It yourself! Hahahahah.. Without wasting your and my time, let us go to the first time, YAWW!

Dashboard > Design > Add A Gadjet > HTML / Javascript

Then, paste-kan code di bawah ini di kotak HTML / Javascript tersebut.


<style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: http://www.dynamicdrive.com/style/ *//*Tutorial Vertical Menu Tab Nufatiamia */.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: #CCC; /*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///More Silly Tutorials at http://nufatiamia.blogspot.comvar menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commasfunction 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 : Adjust WIDTH ikut kesesuaian sidebar korang. 
BIRU : Warna menu tab boleh tambah border sekali! *buatlah warna yang pelik-pelik dan unik!
UNGU : Hover menu tab.
HIJAU : Link korang yang y'all nak letak.
KUNING : Perkataan yang mewakili LINKS.

Ada lagi yang code berwarna lain kalau korang perasan, yang itu, korang boleh edit sendiri kalau suka tak yah edit pun tak apa!

Harap-harap menjadilah! Benda remeh-temeh ni pun kena hati-hati tau!

Good Luck!