buat MENU style vertikal

kali ni nak buat tutorial untuk VERTIKAL MENU pula.. :) :)

1.  Design > Edit HTML
2. tick Expand Template Widget
3. backup template 1st untuk langah berjaga-jaga
4. Langkah selanjutnya copy Code di bawah ini, lalu paste kat atas kode ]]></b:skin>

 

/*****Green Menu css3*****/
.navbox {
position: relative;
float: left;
}

ul.nav {
list-style: none;
display: block;
width: 220px;
position: relative;
top: 0px;
left: 0px;
padding: 0px 0 0px 0;
background: url(http://4.bp.blogspot.com/-BxAEJI1qyGQ/TWfKDBLh1AI/AAAAAAAABsY/QrC2xGw8Ijk/s1600/pandet.png) no-repeat;
-webkit-background-size: 50% 100%;
-moz-background-size: 50% 100%;
}

li {
margin: 5px 0 0 0;
}

ul.nav li a {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
background: #38761d url(http://3.bp.blogspot.com/-BLmvYSA555E/TWfJgkrFtQI/AAAAAAAABsU/HfcjJuMThGc/s1600/pandet.png) no-repeat;
color: #999;
text-shadow: 3px 3px 6px #000;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;

width: 180px;
display: block;
text-decoration: none;
-webkit-box-shadow: 4px 2px 4px lime;
-moz-box-shadow: -5px -5px 35px lime;
}

ul.nav li a:hover {
background:lime url(http://3.bp.blogspot.com/-BLmvYSA555E/TWfJgkrFtQI/AAAAAAAABsU/HfcjJuMThGc/s1600/pandet.png) no-repeat;
color: #fff;
text-shadow: 3px 3px 6px #000;
-moz-box-shadow: -5px -5px 35px lime;
}

sekarang , boleh klik save. :)

then , pegi Page Elements > add Gadget > HTML Javascript

paste code kat bawah ni.. :)

<div class="navbox">
<ul class="nav">
<li><a href="masukan URL link">Menu </a></li><li><a href="masukan URL link">Menu </a></li>

<li><a href="masukan URL link">Menu </a></li>

<li><a href="masukan URL link">Menu</a></li>

<li><a href="masukan URL link">Menu </a></li>

<li><a href="masukan URL link">Menu </a></li>

<li><a href="masukan URL link">Menu </a></li>

<li><a href="masukan URL link">Menu </a></li>

<li><a href="masukan URL link">Menu </a></li>     
</ul>

</div>

ok..
cuma perlu edit sikit lagi :)
nampak text "masukkan URL link" ? text tu cuma perlu replace  ngan web address , text meenu tu pula tukar ngan tajuk web tu :)

semoga berguna ;)