Kali ini sy ingin berkongsi cara untuk membuat menu menegak untuk blog anda atau nama english nyer vertical menu. Koding ini dtgnya drpd Dynamic Drive. Sy sgt sukakan blogspot, pelbagai cara dan pelbagai widget kita boleh gunakan padanya. Untuk membuatnya pun tdklah ssh. Salin sahaja koding yang diberikan pada web td. Mcm xbest plak kan kalau sy sekadar kongsi link? sy kongsikan juga disini untuk pembaca syoknyerblogging.

1 Pergi ke Dashboard > Design > Add a gadget

2 Salin koding dibawah dan letakknya dalam widget Html/javascript

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.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-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{
color: white;}

.sidebarmenu ul li a:hover{
background-color: black;}


/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;}

.sidebarmenu a.subfolderstyle{
background: url(http://www.dynamicdrive.com/cssexamples/media/right.gif) no-repeat 97% 50%;}

/* 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="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

Untuk tgk demo http://pastehtml.com/view/1cd0ynd.html

Tips: untuk memudahkan penukaran menu lihat demo dan ubah butang mengikut namanya. Cth: ingin ubah Sub Item 2.1.1. Cari text (Ctrl + F) Sub Item 2.1.1 dan tukarkan mengikut nama dan link kesukaan anda.

Untuk menukar color tabs cari background-color: #012D58; dan tukar mengikut kaler anda inginkan. Untuk menukar kaler apabila mouse dihalakan cari  background-color: black;

Selamat Mencuba (^^,)

---

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="http://syoknyerblogging.blogspot.com/2010/12/cara-membuat-menu-menegak-pada-blog.html">Cara Membuat Menu Menegak Pada Blog</a>