Dock Menu ျပဳလုပ္နည္း

ကြၽန္ေတာ္ Blog မွာ အသုံးျပဳထားတဲ႕ Menu ပုံစံမ်ဳိးလိုခ်င္တဲ႕ သူငယ္ခ်င္းမ်ား တင္ျပေပးလုိက္ပါ။ အျမင္ေလးကေတာ႕ Vista ပုံစံမ်ဳိးျဖစ္ပါတယ္။ ဒါေၾကာင္႕ သူငယ္ခ်င္းမ်ားအသုံးျပဳခ်င္သည္႕ အသုံးျပဳလုိ႕ရေအာင္ ကြၽန္ေတာ္တင္ျပေပးလုိက္တာပါ။မိမိ Templates ကုိ ဦးစြာ အရင္း Backup လုပ္ထားလုိက္ပါ။ ဒါမွ မိမိတုိ႕ တစ္ခုခု မွားယြင္းခဲ႕ရင္ ျပန္လည္ အသုံးျပဳႏုိင္ေအာင္ျဖစ္ပါတယ္။



Step#1

1. ေအာက္မွာ Css ႏွင္႕ Js ပါတဲ႕ Zip files ကုိ Download ခ်လုိက္ပါ။

Mediafire

Megaupload

2. ေအာက္မွာ တင္ျပထားတဲ႕ upload ဆုိဒ္ႏွစ္ခုမွ ၾကိဳက္နွစ္သက္ရာ ဆုိဒ္တစ္ခုမွာ Download ခ်ထားတဲ႕ css file ႏွစ္ခုႏွင္႕ Js file ႏွစ္ခုကုိ upload တင္လုိက္ပါ။

http://ripway.com/
http://www.hotlinkfiles.com/

Step #2

1. မိမိ Blog မွ Layout ကုိ click လုိက္ပါ။
2. Edit Html ကုိ click လုိက္ပါ။
3. </head> ကုိ ရွာလုိက္ပါ။
4. </head> ရဲ႕ အေပၚမွာ ေအာက္က code ေတြကုိ ထည္႕လုိက္ပါ။ ျပီရင္ မိမိတုိ႕ upload တင္ထားတဲ႕ files ေတြကုိ အနီေရာင္နဲ႕ျပသထားတဲ႕ေနရာေတြမွာ သူ႕ေနရာနဲ႕သူ မွန္ကန္ေအာင္ အစားထုိးလုိက္ပါ။
5. Save Templates ကုိ click လုိက္ပါ။

<!--DOCK-MENU-STARTS-->
<script type="text/javascript" src="http://www.hotlinkfiles.com/........../mootools-for-dock.js"> </script>
<script type="text/javascript" src="http://www.hotlinkfiles.com/........../UvumiDock-compressed.js"> </script>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.hotlinkfiles.com/........../uvumi-dock.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="http://www.hotlinkfiles.com/........../uvumi-dock-ie6.css" />
<![endif]-->
<script type="text/javascript">
var myDock = new UvumiDock("dock");
</script>
<!--DOCK-MENU-STOP-http://bloggerstop.net-->

Step # 3

1. ျပီရင္ Layout မွ Page elements ကုိ click လုိက္ပါ။
2. Add a Gadget ကုိ click လုိက္ပါ။ HTML/ JavaScript ကုိ click လုိက္ပါ။ ေအာက္က code ေတြကုိ ထည္႕လုိက္ပါ။ အနီေရာင္နဲ႕ ျပသထားတဲ႕ေနရာမွာ မိမိတုိ႕ ထည္႕ခ်င္တဲ႕ Image Links ေတြနဲ႕ ခ်ိတ္ခ်င္တဲ႕ ဆုိဒ္ေတြကုိ အစားသြင္းလုိက္ပါ။

<ul id="dock">
<li>
<a href="#home"><img src="images/home.png" alt="Home"/></a>
</li>
<li>
<a href="#orders"><img src="images/orders.png" alt="Orders"/></a>
</li>
<li>
<a href="#tools"><img src="images/tools.png" alt="Tools"/></a>
</li>
<li>
<a href="#stats"><img src="images/stats.png" alt="Stats"/></a>
</li>
<li>
<a href="#users"><img src="images/users.png" alt="Users"/></a>
</li>
<li>
<a href="#sync"><img src="images/sync.png" alt="Sync"/></a>
</li>
</ul>

3. ျပီရင္ Save ကုိ ႏုိပ္လုိက္ပါ။

Posted in: Blog