လွပတဲ့ Sliding JavaScript Side Bar Menu ေလးထည့္နည္းပါ။

 သည္ေန႕တင္လုိက္တဲ့နည္းပညာေလးကေတာ့  ဘေလာ့ရဲ႕ ဆိုဒ္ဘားေဘးကေန  slider ပုံစံ
ေလးနဲ႕ ထြက္လာမဲ့ နည္းေလးပါ...သူကေတာ့ မိမိတို႕ ညႊန္းလိုတဲ့ ဘေလာ့ေတြကို ထည့္ထားနိဳင္ပါတယ္... ေနာက္ တျခားမည္သည့္လင့္ေတြ ေနရာေတြမဆို အဲထဲမွာ ထည့္ျပီး လမ္းျပေပးနိဳင္ပါတယ္...ေနာ္  စမ္းၾကည့္လုိက္ပါ...


Step 1.   အေနနဲ႕  ေအာက္ကပုံေလးေတြအတိုင္းေပါ့ သြားလုိက္ပါ...

    ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ
                 ( မရွင္းပါက ပုံေလးေတြ ၾကည့္လုပ္ပါ  )

Step 2.  အေပၚပုံမွာျမင္ေနတဲ့ ေနရာေရာက္တာနဲ႕  Add a Gadget ဆိုတာကိုကလစ္ေပးလိုက္ပါ။

Step 3. ေနာက္တဆင့္ေအနနဲ႕  အေပၚကလို ဇယားေလးက်လာတာနဲ႕ အေပၚပုံျပထားတဲ့ အတိုင္း
             HTML/JavaScript  ဆိုတာကိုရွာျပီးကလစ္ေပးလိုက္ပါ။

Step 4. အဲခ်ိန္မွာ ေဘာက္ေလးတစ္ခု က်လာမယ္.. အဲထဲမွာဘဲ ေအာက္က ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္
             ေပးလုိက္ပါေတာ့.........

<script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/prototype.js" type="text/javascript"></script> <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/effects.js" type="text/javascript"></script> <script src="http://safir85.ucoz.com/bdlab-blogspot/24work/side-bar-menu/side-bar.js" type="text/javascript"></script> <a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Grab this"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks|Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free Backlinks"><img src="https://bitly.com/24workpng" alt="Free Backlinks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Free"><img src="https://bitly.com/24workpng" alt="Blogger Tips And Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <style> body{ font-size:75%; } a{ outline: none; } a:active{ outline: none; } #sideBar{ text-align:left; } #sideBar h2{ color:#F0FFFF; font-size:110%; font-family:arial; margin:10px 10px 10px 10px; font-weight:bold !important; } #sideBar h2 span{ font-size:125%; font-weight:normal !important; } #sideBar ul{ margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } #sideBar li{ margin:0px 5px 5px 10px; padding: 0 0 0 10px; list-style-type:none; display:block; background-color:#DA1074; width:177px; color:#FFFFFF; } #sideBar li a{ width:100%; } #sideBar li a:link, #sideBar li a:visited{ color:#FFFFFF; font-family:verdana; font-size:100%; text-decoration:none; display:block; margin:0px 0px 0px 0px; padding:0 0 0 20px; width:100%; } #sideBar li a:hover{ color:#FFFF00; text-decoration:underline; } #sideBar{ position: fixed; width: auto; height: auto; top: 140px; left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXwmyHNOWRvwwba0SRVLwapcsj5eyP51hKH3F_miahOxBAGLoQ4LikHzvjFUJO2rjK-Xc0A0bD_ov7PJGzOqoa_fy2SZ-7eveHRhX7GCq8cQJja4CZdWR9i2edd8dHqcxF7JwyoQBYbCq/s320/left.collapse.border.png); background-position:top right; background-repeat:repeat-y; } #sideBarTab{ float:left; height:137px; width:28px; } #sideBarTab img{ border:0px solid #FFFFFF; } #sideBarContents{ float:left; overflow:hidden !important; width:200px; height:320px; } #sideBarContentsInner{ width:200px; }</style> <div id="sideBar"> <div id="sideBarContents" style="display:none;"> <div id="sideBarContentsInner"> <h2> Left<span>Menu</span></h2> <ul> <li><a href="#">Link One</a></li> <li><a href="#">Link Two</a></li> <li><a href="#">Link Three</a></li> <li><a href="#">Link Four</a></li> </ul> </div> </div> <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB0kJAcH59bS96nOKr-oOOmxc2Rjs5gxxMd9RqHL4kBGazMAGWbko-TH9yNHi9D17W0IUFooNf59tpELyeULPao0_59Vb_E7cEMG8H290NXAFjpzvq34XbrU43wvKZyeiygfv5gPWwNxAb/s320/sidebarcollapse.png" title="sideBar" /></a> </div>

                                                                  ထည့္ျပီးတာနဲ႕ Save  
မွတ္ခ်က္     ။            ။
============
 <li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
             သည္လင့္ေတြမွာ မိမိတို႕လိုျခင္တာ ညႊန္းျခင္တာကို ထည့္ေပးရပါမယ္....ဥပမာ
 

  <li><a href="http://aungsanmks.blogspot.com/">ဘေလာ့ခရီးသည္</a></li>
 သည္လိုေလးေပါ့... #  ေနရာမွာ မိမိရဲ႕ ညႊန္းလိုတဲ့ လင့္ေပါ့ဗ်ာ.. ေနာက္ကေတာ့  ညႊန္းတဲ့ ဆိုဒ္ အမည္..
ဆိုဒ္ကိုမွ မဟုတ္ဘူးေနာ္ ဘယ္ေနရာကိုမဆို ညႊန္ျပနိဳင္ပါတယ္... လုိအပ္ပါက လင့္ေတြကို ထပ္ျပီး ပြါးနိဳင္ပါေသးတယ္ေနာ္.... အဲတိုင္းေကာ္ပီယူ ေအာက္ကေန လိုသလိုပြါးေစဗ်ာ......
အဆင္ေျပပါေစလို႕ ဆုောတင္းလွ်က္..........

 ထည့္ျပီးတာနဲ႕ Save