Menu Button လုပ္နည္း

မိမိတုိ႔ Blog လုပ္တဲ႕သူငယ္ခ်င္းမ်ား မိမိတုိ႔ ရုိးရုိး Templates ေတြ အသုံးျပဳတဲ႕ သူငယ္ခ်င္းမ်ားအတြက္ Menu လုပ္ရတဲ႕ေနရာမွာ အေတာ္ေလး ေခါင္းစားၾကပါတယ္။ အဲဒီလုိ ေခါင္းမစားရေအာင္ ကြၽန္ေတာ္ Menu လုပ္နည္းကုိ ကြၽန္ေတာ္ အေတာ္မ်ားမ်ားစုံေအာင္တင္ေပးတာျဖစ္ပါတယ္။ သင္႕ေတာ္တာ အသုံးျပဳႏုိင္ေစဖုိ႕ ရည္ရြယ္ခ်က္နဲ႕ ကြၽန္ေတာ္တင္ေပးခဲ႕တာပါ။ ေရွ႕ပုိင္းမွာ တင္ျပခဲ႔တာေတြကုိ Blog နည္းပညာထဲမွာ ဖတ္ႏုိင္ပါတယ္။ အခုနည္းကေတာ႕ အေတာ္ေလးေကာင္းတယ္ဗ် သိပ္ျပီ ေခါင္းမစားရဘူး။ ေျပာေနတာ ၾကာပါတယ္။ ေအာက္မွာၾကည္႕လုိက္ပါ။
လုပ္နည္း
Step#1
1. အရင္ ကြၽန္ေတာ္တုိ႕ ေအာက္က JavaScript ႏွင္႕ CSS ေတြရွိတဲ႕ Folder ကုိ download ခ်လုိက္ပါ။

Mediafire
Megaupload

Step#2
1. http://www.hotlinkfiles.com/ ဒီမွာ အေကာင္႕ေဖါက္ျပီ upload တင္လုိက္ပါ။ (DDM1_script.js ႏွင္႕ DDM1_style.css ႏွစ္ခုလုံးကုိတင္လုိက္ပါ။)

Step#3

1. မိမိ Blog မွ Layout ကုိ click လုိက္ပါ။
2. Edit Html ကုိ ထပ္ျပီ click လုိက္ပါ။ </head> ဆုိတာကုိ ရွာလုိက္ပါ။ ေအာက္က code ေတြမွာ မိမိတုိ႕ upload တင္လာခဲ႕တဲ႕ Link ေတြကုိ အနီေရာင္နဲ႕ ျပထားတဲ႕ေနရာမွာ အစားထုိလုိက္ပါ။ ျပီရင္ </head> ရဲ႕ အေပၚမွာ ထည္႕လုိက္ပါ။

<!--MULTI-LEVEL-DD-MENU-STARTS-->
<link rel="stylesheet" href="http://......HotLinkFiles.com...../DDM1_style.css" type="text/css" />
<script type="text/javascript" src="http://......HotLinkFiles.com...../DDM1_script.js"></script>
<!--MULTI-LEVEL-DD-MENU-http://bloggerstop.net-->

3. ျပီရင္ save Templates ကုိ click လုိက္ပါ။

Step#4

Vista Template ေတြအတြက္ ဒီအဆင္႕ မလုိပါဘူးခင္ဗ်ာ။တစ္ခ်ဳိ႕ Vista ေတြ လုိပါတယ္။
1. ဒီအဆင္႔ကေတာ႕ ကြၽန္ေတာ္တုိ႕ Header တုိးရမွာျဖစ္ပါတယ္။ Header တုိးနည္းကုိ

ဒီမွာ ေရးထားပါတယ္။

Step#5

ဒီအဆင္႕ကေတာ႕ မိမိ Link ခ်ိတ္ဖုိ႕အတြက္ ျဖစ္ပါတယ္။
1. Layout မွ Edit Html မွ Page element ကုိ click လုိက္ပါ။
2. မိမိတုိ႕ Header တုိးခဲ႕တဲ႕ေနရာမွ Add a Gadget မွာ ေအာက္က code ေတြမွ အနီေရာင္နဲ႕ ျပထားတဲဲ႕ေနရာေတြမွာ မိမိတုိ႕ Link ခ်ိတ္ခ်င္တဲ႕ url ေတြ ေခါင္းစဥ္ေတြ အစားထုိျပီ ထည္႕လုိက္ပါ။ ျပီရင္ save လုိက္ပါ.။ ကြၽန္ေတာ္ကေတာ႕ မႈးရင္ ဆုိဒ္က စတုိင္းအတုိင္း စမ္းထားတာျဖစ္တဲ႕အတြက္ မိမိလုိခ်င္တဲ႕စတုိင္း ျပန္ေျပာင္လုိ႕ရပါတယ္။ Title ေတြ အတုိအေလ်ာ႕လုပ္လုိ႕ရပါတယ္။

<!--MULTI-LEVEL-DD-MENU-STARTS-->
<ul class="menunew" id="menu">
<li><a href="#" class="menulink">Dropdown One</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li>
<a href="#" class="sub">Navigation Item 3</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li><a href="#">Navigation Item 6</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Blogger Help</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
<!--MULTI-LEVEL-DD-MENU-http://bloggestop.net-->

3. ဘယ္လုိေပၚတယ္ဆုိတာ ေအာက္က ကြၽန္ေတာ္ စမ္းထားတဲ႕ စတုိင္းကုိၾကည္႕လုိက္ပါ။

Posted in: Blog