​ဘ​ေလာ့​မွာ ​ေၾကာ္​ျငာ​ေတြ (​သို႔) ​ဆိုဒ္​ေတြ​ကို Slide Show ​ေလး​နဲ႔ ​ၫြွန္​ျပ​ျခင္​လား

​မ​ဂၤ​လာ​ပါ  ​ဘ​ေလာ့​မိတ္​ေဆြ​အ​ေပါင္း​တို႔ ​သည္​နည္း​လမ္း​ေလး​က​ေတာ့ ​မိ​မိ​တို႔ ​ဘ​ေလာ့​ေပၚ​မွာ ​ေၾကာ္​ျငာ​ေတြ ​ျဖစ္​ေစ ​မိ​မိ​တို႔ ​လမ္း​ၫြွန္​လို​တဲ့ ​ဝက္​ဆိုဒ္​ေတြ ​ျဖစ္​ေစ... ​မိ​မိ​တို႔​သြား​ေစ​လို​တဲ့ ​ေန​ရာ​ေလး​ေတြ ​နည္း​ပ​ညာ​ေလး​ေတြ  ​ပို႔စ္​ေလး​ေတြ​ကို ​ျဖစ္​ေစ  slider ​ပံု​စံ​ေလး​နဲ႔ ​လွ​လွ ​ပ​ပ ​လမ္း​ျပ​လို​ပါ​က  ​နည္း​လမ္း​ေကာင္း​ေလး ​တစ္​ခု​ကို  ​ေရး​သား​ေဖၚ​ျပ​လိုက္​ပါ​တယ္​ေနာ္....
​သူ​က​ေတာ့ ​စ​လိုက္​ေလး​နဲ႔​ဆို​ေတာ့  ​လွ​ပ​ေသ​သပ္​တယ္.. ​ပံု​ေလး​ေတြ ​လုပ္​မယ္.. ​လင့္​ၫြွန္​ဖို႔ ​လင့္​ထည့္​မယ္... ​ဆို​ပါ​ေတာ့  ​စမ္း​သတ္ ​ၾကည့္​လိုက္​ပါ​ေနာ္... ​ေအာက္​မွာ ​လုပ္​နည္း​နဲ႔ ​လို​အပ္​ေသာ​ကုဒ္​ေတြ​ကို  ​ေပး​ထား​ပါ​တယ္... ​အ​ရမ္း​လြယ္​ကူ​ပါ​တယ္.....

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

          <style type="text/css"> .container1 { width: 660px;padding: 0;margin: 0 auto; } .folio_block { position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;} .main_view {float: left;position: relative;} /*--Window/Masking Styles--*/ .window {-moz-box-shadow: 0px 0px 5px #303030; -webkit-box-shadow: 0px 0px 5px #303030; box-shadow: 0px 0px 5px #303030;border:1px solid #000000;height:240px; width: 660px; margin-top:15px;overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute;top: 0; left: 0; } .image_reel img {float: left;} .paging_btrix { position: absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100; /*--Assures the paging stays on the top layer--*/text-align: center; line-height: 40px; background: url(http://1.bp.blogspot.com/-UQAJVYvatlY/UTbGMUctYcI/AAAAAAAAHIE/PSM-s1tbAd8/s1600/paging_btrix_bg2.png) no-repeat; display: none; } .paging_btrix a { padding: 5px;text-decoration: none;color: #fff; } .paging_btrix a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging_btrix a:hover {font-weight: bold;} </style><!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka --><div class="container1"><div class="main_view"> <div class="window"> <div class="image_reel"> <a href="(link ​ထဲ့​ရန္)"><img src="(​ပံု Link ​ထဲ့​ရန္)" alt="" /></a> <a href="(link ​ထဲ့​ရန္)"><img src="(​ပံု Link ​ထဲ့​ရန္)" alt="" /></a> <a href="(link ​ထဲ့​ရန္)"><img src="(​ပံု Link ​ထဲ့​ရန္)" alt="" /></a> <a href="(link ​ထဲ့​ရန္)"><img src="(​ပံု Link ​ထဲ့​ရန္)" alt="" /></a> </div></div><div class="paging_btrix"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> <a href="#" rel="4">4</a> </div></div></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging_btrix").show(); $(".paging_btrix a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //paging_btrix + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging_btrix a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging_btrix a.active').next(); if ( $active.length === 0) { //If paging_btrix reaches the end... $active = $('.paging_btrix a:first'); //go back to first } rotate(); //Trigger the paging_btrix and slider function }, 5000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging_btrix a").click(function() { $active = $(this); //Activate the clicked paging_btrix //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script>

   ​မွတ္​ခ်က္   ။                 ။  ​သ​တိ​ထား​ရ​မွာ​က  ​ကုဒ္​ေတြ​ထဲ​မွာ ​ရွိ​တဲ့ ​က်​ေနာ္ ​ျမန္​မာ​လို​ေရး​ထား​တဲ့
 ( link ​ထည့္​ရန္)  (​ပံု link ​ထည့္​ရန္ ) ​ဆို​တဲ့​ေန​ရာ​ေတြ​မွာ...
​မိ​မိ​တို႔ ​လု္​ပ​ထား​ေသာ ​ပံု​ေတြ​ရဲ့ ​လင့္ိ​ကု ​အ​စား​ထိုး​ပါ... ​ေရွ႕​က link ​ထည့္​ရန္  ​ေန​ရာ​မွာ​ေတာ့ ​အဲ​ပံု​ရဲ့ ​သြား​ရ​မည့္ ​လင့္​ကို ​ထည့္​ေပး​လိုက္​ပါ...​ဒါ​ဆို ​လွ​ပ​ေသ​သပ္​ေသာ  ​စ​လိုက္​ေလး​တစ္​ခု​ရ​ပါ​ၿပီ​ေနာ္
​အ​ဆင္​ေျပ​ပါ​ေစ

​ခု​လို​အား​ေပး​တဲ့​အ​တြက္ ​အ​ထူး​ေက်း​ဇူး​တင္​ပါ​ေၾကာင္း ​ေျပာ​ၾကား​ပါ​ရ​ေစ..​ဘ​ေလာ့​ခ​ရီး​သည္​မွ ​နည္း​ပ​ညာ​မ်ား​အား ​မည္​သူ​မ​ဆို ​လြတ္​လပ္​စြာ ​ကူး​ယူ​သံုး​စြဲ​ႏိုင္​ပါ​တယ္.. ​က်ြန္​ေတာ္ ​ပိုင္​ဆိုင္​ေသာ​ေန​ရာ​ေလး​မ်ား​အား ​ဆက္​လက္ ​လည္​ပါတ္​လို​ပါ​က ***************************************

​ဘ​ေလာ့​ခ​ရီး​သည္​သို႔ { ​ဒီ​မွာ } ​သြား​လိုက္​ပါ
​လယ္​တီ​ေျမ​သား​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ
​စာ​ေပ​နန္း​ေတာ္​သို႔{ ​ဒီ​မွာ } ​သြား​လိုက္​ပါ