Vertical Menu တစ္ခု ဖန္တီးျခင္း....

မဂၤလာပါခင္ဗ်ာ....

ကြၽန္ေတာ္ ေက်ာင္းပိတ္ရက္ေလးမွာ အားလံုးအတြက္ အဆင္ေျပမယ့္ POST ေလးတစ္ခု မွ်ေ၀ခ်င္ပါတယ္။Vertical Menu လုပ္တဲ့ပံုစံေလးပါ။ကိုယ့္ရဲ ့ ဘေလာဂ့္ကို အလွဆင္မယ္၊ သူမ်ားေတြနဲ ့မတူေစခ်င္ရင္ေတာ့ စမ္းလုပ္ႀကည့္ပါခင္ဗ်ာ။
အရင္ဆံုး ကိုယ့္ရဲ ့ဘေလာဂ့္ကို Login ၀င္လိုက္ပါ ခင္ဗ်ာ။ Layout>>Edit HTML ကိုသြားပါ။ေရာက္ျပီဆိုရင္ေတာ့ Ctrl+F နဲ ့ ]]></b:skin> ဆိုတာေလးကိုရွာလိုက္ပါ။ ေတြ ့ျပီဆိုရင္ ေအာက္က Script ေလးကို ]]></b:skin>
အေပၚကေန ထည့္ေပးပါ။

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

အနီေရာင္နဲ ့ေရးထားတဲ့ေနရာမွာ ေအာက္မွာေပးထားတဲ့ အထဲက ကိုယ္ႀကိဳက္ရာကို ေျပာင္းေပးလို ့ရပါတယ္ခင္ဗ်ာ။ႀကိဳက္ျပီဆိုရင္ေတာ့ ဘေလာဂ့္ကို Save Template လုပ္လိုက္ပါ။

black1.gif
black2.gif

blue1.gif
blue2.gif

green1.gif

green2.gif

pink1.gif
pink2.gif

red1.gif red2.gif

ျပီးတာနဲ ့"Page Elements" Menu ကိုသြားပါ။ "Add a Gadget ႇ>>>HTML/JavaScript" မွာ ေအာက္က Code ေတြ ထည့္ေပးပါ ခင္ဗ်ာ။

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>




အနီေရာင္နဲ ့ေရးတားတဲ ့Link ေနရာမွာ ကိုယ္အသံုးျပဳမယ့္ Link ေတြကိုထည့္ေပးပါ။
အျပာေရာင္နဲ ့ေရးထားတဲ ့စာသားေတြေနရာမွာေတာ့ ကိုယ္ေပၚေစခ်င္တဲ ့နာမည္ကိုေရးလိုက္ရင္ ရပါျပီခင္ဗ်ာ။
ကြၽန္ေတာ္ verticle menu Post ေလးကို ဒီေနရာကေန သင့္ေတာ္သလို ျပန္ဆိုပါတယ္။
အဆင္ေျပပါေစ ခင္ဗ်ာ။

ဒါေတြလည္းေရးထားေသးတယ္ဗ်ာ။