ဘေလာ့မွာ ေၾကာ္ျငာေတြ (သို႕) ဆိုဒ္ေတြကို 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwyOqSFCXTG1IOvHCH8yJj5FSaM7ofTMC7m1mG3aUJql7FuIxSl7Qi_GWnW7YmUm5sHEdMhuiXrG0uU7V_CkIMBwU4Pf5eSW6ccumE4o8xJxBUA2NotuQK7qk73P2U53RKbPjNmbJvUKA/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 ထည့္ရန္  ေနရာမွာေတာ့ အဲပုံရဲ႕ သြားရမည့္ လင့္ကို ထည့္ေပးလိုက္ပါ...ဒါဆို လွပေသသပ္ေသာ  စလုိက္ေလးတစ္ခုရပါျပီေနာ္
အဆင္ေျပပါေစ

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

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

Read more »

ဘေလာ့ကာ ဆိုဒ္ဘား အတြက္ အလွတင္ရန္ ( လန္းတယ္ )

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

အဆင့္   (၁)   

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  Dashboard  ကိုသြားလိုက္ပါ။
►3-  Template    ကိုကလစ္ပါ..။
►4-  Edit  Html   ကို၀င္ပါ..
►5- Ctrl+F  (သို႕မဟုတ္) F3  အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

</head>   သည္ကုဒ္ေလးကို ထည့္ရွာလုိက္ပါ... ေတြ႕႔ျပီဆိုတာနဲ႕ ေအာက္ကဇယားနဲကေပးထားတဲ့
                ကုဒ္ေတြကို  သူ႕ရဲ႕အေပၚကေန ကပ္ထည့္ေပးလိုက္ပါေနာ္....


  <style>.module h2 { background-color: #D5D5D5; border-radius: 20px 0 0 20px; color: #FFFFFF; font-family: Verdana; font-size: 14px; line-height: 32px; margin: 0; padding: 0 0 0 20px; text-shadow: 2px 1px 1px #222; } .module h2 a { border-left: 5px solid #ffffff; color: #101921; float: right; font-size: 14px; text-decoration: none; text-shadow: none; padding: 0 10px; position: relative; -moz-transition: padding 0.1s linear; -webkit-transition: padding 0.1s linear; -ms-transition: padding 0.1s linear; -o-transition: padding 0.1s linear; } .module h2 a:hover { padding: 0 32px; } .module h2 a:before, .module h2 a:after { content: ""; height: 0; position: absolute; top: 50%; width: 0; } .module h2 a:before { border-bottom: 8px solid transparent; border-right: 8px solid #ffffff; border-top: 8px solid transparent; left: -12px; margin-top: -8px; } .module h2 a:after { border-bottom: 6px solid transparent; border-top: 6px solid transparent; left: -6px; margin-top: -6px; } .module.blue h2 a {background-color: #A2D5EC;} .module.blue h2 a:hover {background-color: #C5F0FF;} .module.blue h2 a:after {border-right: 6px solid #A2D5EC;} .module.blue h2 a:hover:after {border-right-color: #C5F0FF;} .module.yellow h2 a {background-color: #FCE98D;} .module.yellow h2 a:hover {background-color: #FFD700;} .module.yellow h2 a:after {border-right: 6px solid #FCE98D;} .module.yellow h2 a:hover:after {border-right-color: #FFD700;} .module.green h2 a {background-color: #bada55;} .module.green h2 a:hover {background: #C7E176;} .module.green h2 a:after {border-right: 6px solid #bada55;} .module.green h2 a:hover:after {border-right-color: #C7E176;} .module.red h2 a {background-color: #F0A5B5;} .module.red h2 a:hover {background-color: #FFC7D2;} .module.red h2 a:after {border-right: 6px solid #F0A5B5;} .module.red h2 a:hover:after {border-right-color: #FFC7D2;} </style>

အိုေက...ကုဒ္ေတြ ထည့္ျပီးတာနဲ႕  save template ကိုရဲရဲေဆ့လုိက္ပါ... လက္ေတြ႕စမ္းသတ္ထားလို႕
အာမခံပါတယ္ေနာ္.... ကုဒ္ထည့္တာေတာ့ မွန္ဖို႕လိုပါတယ္.... အိုေခ...

အဆင့္  (၂)

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

 

 ေအာက္ကကုဒ္ေတြကို ျပင္ဆင္တဲံအခါ အေပၚက နမူနာ ပုံေလးနဲ႕ စာၾကည့္လုိက္ပါေနာ္.....

<div class="module blue">
<h2>ေခါင္းစဥ္ <a href="Link URL">ကလစ္ပါ</a></h2>
</div>

<div class="module yellow">
<h2>ေခါင္းစဥ္ <a href="Link URL">ကလစ္ပါ</a></h2>
</div>

<div class="module green">
<h2>ေခါင္းစဥ္ <a href="Link URL">ကလစ္ပါ</a></h2>
</div>

အိုေက..အေပၚကကုဒ္ေတြကို  ထည့္ျပီဆိုတာနဲ႕ လိုအပ္တဲ့ ျပင္ဆင္ခ်က္ေတြ လုပ္ပါမယ္......
 (၁) ေခါင္းစဥ္ဆိုတဲ့ ေနရာမွာ  က်ေနာ္ နမူနာျပထားတာက  ဘေလာ့အမည္ေတြေပါ့..
 (၂) link URL ကေတာ့ မိမိညႊန္ျပလိုတဲ့  ဘေလာ့(သို႕)အျခား   စသျဖင့္  လိပ္စာ ထည့္ေပးရပါမယ္
 (၃) ကလစ္ပါ   ဆိုတဲ့ေနရာမွာလဲ ႏွစ္သက္တာ ထည့္ေပးပါ  သူကေတာ့ ကိုယ္ညႊန္တဲ့ေနရာ သြားဖို႕
      ေမာက္ေထာက္ကလစ္ရမဲ့ေနရာပါ...
                 ............ကုဒ္မ်ားကို လိုသေလာက္  ပြါးနိဳင္ပါတယ္ေနာ္..... ....

မွတ္ခ်က္.... ဘေလာ့ကိုမွ မဟုတ္ပါ  တျခားေဆာ့၀ဲလ္ ေဒါင္းဖို႕  မိတ္ေတြဘေလာ့ေတြ  စသျဖင့္ လိုအပ္သလို  မိမိတို႕ အသုံးျပဳနိဳင္ပါေၾကာင္းးးးးးးးးးးးး

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

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.com

Read more »

Recent Post လွလွေလးနဲ႕ ဘေလာ့ကိုအလွဆင္မယ္ ( blogger only )

မဂၤလာပါ  ဘေလာ့မိတ္ေဆြမ်ားးး
သည္နည္းလမ္းေလးကေတာ့ အေတာ္ေလး လန္းးပါတယ္.. မိမိတို႕ဘေလာ့မွာ  Recent Post ေလးေတြကို
လွလွပပေလး ထားျပီး အလွဆင္ျခင္သေူတြအတြက္   ရွယ္ဘဲေနာ္...ေအာက္မွာ နည္းလမ္းေလး
လိုအပ္သလိုသုံးလိုက္ၾကပါ....

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

<style type="text/css">/*<![CDATA[*/ img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px} img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6} .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px} .label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none} .label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888} #mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important} #mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important} #mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px} #mdjumplink a:hover{color:#888!important;text-decoration:none} #mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800} #mdcomments:hover{background:#F4A557;text-decoration:none} /*]]>*/ </style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type="text/javascript" src="http://24work.ucoz.com/24work-blogspot/recent-posts/animated-recent-posts-24work-blogspot-com-5.js"></script><script type='text/javascript'>//<![CDATA[ var numposts = 5; var showpostthumbnails = true; var displaymore = true; var displayseparator = true; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80; //]]></script><script src='http://aungsanmks.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

    မွတ္ခ်က္   ။     ။ ကုဒ္ေတြထဲက http://aungsanmks.com ေနရာမိမိလင့္ထည့္ပါ။

var numposts = 5; (Number of Posts to be shown)
var showpostthumbnails = true; (Post Image)
var displaymore = true; (More Button)
var showcommentnum = false; (No of Comments)
var showpostdate = false; (Post Date)
var showpostsummary = false; (Post Summry)
var numchars = 80; (Characters in post summary)

သည္ေနရာေတြမွာ မိမိတို႕ႏွစ္သက္သလို ျပဳျပင္ အစားထိုးနိဳင္ပါတယ္...

အဆင္ေျပပါေစေနာ္...

မူရင္း  http://s2free.blogspot.com/  ကပါ

ျပန္လည္မွ်ေ၀သူ

ဘေလာ့ခရီးသည္

Read more »

ဘေလာ့မွာ total post - total- comment - total pages ေလးေတြထည့္နည္း

အားလုံးးမဂၤလာပါေနာ္  သည္ေန႕တင္ေပးမဲ့ နည္းပညာေလးကေတာ့ ဘေလာ့ကာသမားေတြအတြက္ေပါ့

မိမိတို႕ဘေလာ့မွာ  

total post

total  comment

total pages

ဆိုတာေလးထားတဲ့ နည္းလမ္းေလးျဖစ္ပါတယ္... လုပ္ရတာလည္းးအရမ္းးကို လြယ္ကူပါတယ္...

 လုပ္နည္းကေတာ့  သိပ္ကိုရိုးးရွင္းးလြန္းပါတယ္... ေအာက္မွာ ရွင္းးျပမယ္ေနာ္...

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

 <script style="text/javascript"> function numberOfPosts(json) { document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); } function numberOfComments(json) { document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); } function numberOfPages(json) { document.write('Total Pages: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>'); } </script> <ul><li><script src="http://www.aungaungmks.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li> <li><script src="http:///www.aungaungmks.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li> <li><script src="http:///www.aungaungmks.blogspot.com/feeds/pages/default?alt=json-in-script&callback=numberOfPages"></script></li> </ul> <span style="font-size:75%;"><a href="/www.aungaungmks.blogspot.com/" target="_blank" style="color: #FFFFFF">Widgets for Blogger</a></span>

မွတ္ခ်က္   ။      ။   aungaungmks    ဆိုတဲ့ေနရာတိုင္း မိမိတို႕ဘေလာ့အမည္ အစားထိုးေပးပါ။

ဒိုမိန္းပိုင္ရွင္မ်ားကေတာ့ blogspot  ဆိုတာပါျဖဳတ္လိုက္ေပါ့။

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္... လိုအပ္တာမ်ားရွိပါက.. C-Box မွာေျပာခဲ့ၾကနိဳင္ပါတယ္... အတတ္နိဳင္ဆုံး ၾကိဳးစား ကူညီ မွ်ေ၀သြားပါမည္... 

ဘေလာ့ခရီးသည္ 

www.ledimye.blogspot.com 

www.aungsanmks.com 

www.ninilayy.com 

တို႕မွာ လည္ပါတ္နိဳင္ပါတယ္.....ေနာ္

Read more »

ဘေလာ့ထဲက Label နဲ႔ Archive ေတြကို Scroll Box ေလးနဲ႔ထားနည္း

ဒီနည္းက တစ္ခုလုပ္တတ္တာနဲ႔ တျခားတစ္ခုကို လုပ္တတ္ပါတယ္ ..
ဒီပို႔စ္မွာေတာ့ ကၽြန္ေတာ္က Blog Archive ကို Scroll Box ေလးနဲ႔
ထားတဲ့နည္းကို မွ်ေ၀ေပးပါမယ္ ..

Label ကို Scroll Box နဲ႔ထားခ်င္ရင္လည္း ဒီနည္းအတိုင္းပဲ လုပ္ေပးလိုက္႐ံုပါပဲ ...

ကဲ .. စၾကစို႔ ...
အရင္ဆံုး Blogger ကို Sign In ၀င္လိုက္ပါ
ၿပီးရင္ Layout ကိုသြားပါ




Blog Archive မထည့္ရေသးဘူးဆိုရင္ Add a widget ကေန Blog Archive ကိုေရြးၿပီး Save လုပ္ပါ
တကယ္လို႔ Blog Archive ထားၿပီးသားဆိုရင္ေတာ့ အဲဒီ Blog Archive ရဲ႕ နံမည္ကို ဘယ္လိုထားထားသလဲဆိုတာကို မွတ္ခဲ့ပါ
ေအာက္ကပံုထဲမွာေတာ့ ကၽြန္ေတာ္က ရွာရလြယ္ေအာင္ Archive In This Blog လို႔ နံမည္ေပးထားပါတယ္

Blog Archive ကို Save လုပ္ၿပီးၿပီဆိုရင္ေတာ့ Template ကိုသြားပါ
Edit HTML ကိုႏွိပ္ပါ
ပြင့္လာတဲ့ Template Coding ေတြထဲက ကိုယ္ေပးထားတဲ့ Blog Archive ရဲ႕နံမည္ကို လိုက္ရွာပါ
ကၽြန္ေတာ္ကေတာ့ Archive In This Blog ဆိုတာကို ရွာလိုက္ပါမယ္

ေတြ႕ၿပီဆိုရင္ေတာ့ အဲဒီ Code ေတြကို ျဖန္႔ေပးရပါမယ္ ..
ဆိုလိုတာက ကၽြန္ေတာ္တို႔ျမင္ေနတဲ့ကုဒ္ေတြဟာ ခ်ံဳ႕ထားတာပါ ..
ဘယ္ေနရာေတြမွာခ်ံဳ႕ထားတာလဲဆိုေတာ့  > .... </widget> အဲဒီလိုမ်ိဳးပံုစံထဲက အစက္ကေလးေတြထဲမွာ ကုဒ္ေတြကို ခ်ံဳ႕ထားတာပါ ..
သူ႕ကိုျဖန္႔ခ်င္ရင္ အဲဒီ အစက္ကေလးေတြေပၚမွာ ကလစ္တစ္ခ်က္ႏွိပ္ေပးလိုက္ရင္ ကုဒ္ေတြက်လာပါမယ္
အဲဒီလိုက်လာတဲ့ကုဒ္ေတြထဲက <div class='widget-content'>  ကို ရွာပါ
ေတြ႕ၿပီဆိုရင္ အဲဒီကုဒ္ရဲ႕ေနာက္နားမွာ ကလစ္တစ္ခ်က္ေပးၿပီး Enter ႏွိပ္လိုက္ရင္ ေအာက္မွာတစ္ေၾကာင္းစာ လြတ္သြားပါမယ္
အဲဒီလြတ္သြားတဲ့တစ္ေၾကာင္းေနရာမွာ ေအာက္က ကုဒ္ကို ေကာ္ပီကူးၿပီးထည့္လိုက္ပါ

<div style='overflow:auto; width:ancho;height:300px;'>

အဲဒီလိုထည့္လိုက္တဲ့အခါမွာ ေလာေလာဆည္ ကုဒ္မွားေနတဲ့အတြက္ ေအာက္မွာရွိတဲ့ </...> ပံုစံကုဒ္ေတြဟာ အနီေရာင္ေတြ ျဖစ္ကုန္ပါမယ္ ..
စိုးရိမ္စရာမရွိပါဘူး ...
ေနာက္ထပ္ အဲဒီ ကုဒ္အုပ္စုထဲက

</div>

</div>

အဲဒီလို ႏွစ္ခုထပ္ေနတဲ့ေအာက္မွာ တစ္ေၾကာင္းစာေနရာေပးၿပီး ေနာက္ထပ္ </div> တစ္ခုထပ္ထည့္ေပးလိုက္ပါ
အဲဒီလိုဆိုရင္

</div>

</div>

</div>

<b:include name='quickedit'/>

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

အားလံုးၿပီးရင္ေတာ့ Save template ကိုႏွိပ္လိုက္ပါ ...
ဒါဆိုရင္ ဘေလာ့ထဲက Archive List ေလးေတြဟာ Scroll Box ေလးထဲမွာ သပ္သပ္ရပ္ရပ္ ရွိေနတာကို ေတြ႕ုရပါလိမ့္မယ္ ...
ကဲ .. အဆင္ေျပပါေစဗ်ာ

နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းေတြအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး

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

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။ www.herostown.blogspot.com 

www.ledimyethar.com 

www.ninilayy.com

Read more »

ဘေလာ့ မွာ Photo ေတြကို Slide Show Effect နဲ႕ Gadget တစ္ခုထည္႕နည္း

Blogger ညီကိုမ်ားအတြက္ Post မတင္ျဖစ္တာၾကာသြားလို႕ အခု Post အလန္းေလးတစ္ခုမွ်ေ၀ေပးလိုက္

ပါတယ္ဗ်ာ။ မိမိရဲ႕ Blog မွာ ပံုေတြကို Slide Show လုပ္ျပီး Effect ေလးေတြနဲ႕ တင္လို႕ရတဲ႕ Code ေလးတစ္

ခုတင္ေပးလိုက္ပါတယ္ဗ်ာ။ Gadget တစ္ခုအေနနဲ႕ ထားလို႕ရပါတယ္ဗ်ာ။ ေျပာင္းဖုိ႕လိုတဲ႕ Link ေတြ စာ
သားေတြကို ကၽြန္ေတာ္အနီေရာင္နဲ႕ေရးေပးထားပါတယ္ဗ်ာ။

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပီးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 

အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {

 //Speed of the slideshow
 var speed = 5000;
 
 //You have to specify width and height in #slider CSS properties
 //After that, the following script will set the width and height accordingly
 $('#mask-gallery, #gallery li').width($('#slider').width()); 
 $('#gallery').width($('#slider').width() * $('#gallery li').length);
 $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
 
 //Assign a timer, so it will run periodically
 var run = setInterval('newsscoller(0)', speed); 
 
 $('#gallery li:first, #excerpt li:first').addClass('selected');

 //Pause the slidershow with clearInterval
 $('#btn-pause').click(function () {
  clearInterval(run);
  return false;
 });

 //Continue the slideshow with setInterval
 $('#btn-play').click(function () {
  run = setInterval('newsscoller(0)', speed); 
  return false;
 });
 
 //Next Slide by calling the function
 $('#btn-next').click(function () {
  newsscoller(0); 
  return false;
 }); 

 //Previous slide by passing prev=1
 $('#btn-prev').click(function () {
  newsscoller(1); 
  return false;
 }); 
 
 //Mouse over, pause it, on mouse out, resume the slider show
 $('#slider').hover(
 
  function() {
   clearInterval(run);
  }, 
  function() {
   run = setInterval('newsscoller(0)', speed); });});


function newsscoller(prev) {

 //Get the current selected item (with selected class), if none was found, get the first item
 var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
 var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

 //if prev is set to 1 (previous item)
 if (prev) {
  
  //Get previous sibling
  var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
  var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
 
 //if prev is set to 0 (next item)
 } else {
  
  //Get next sibling
  var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
  var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
 }

 //clear the selected class
 $('#excerpt li, #gallery li').removeClass('selected');
 
 //reassign the selected class to current items
 next_image.addClass('selected');
 next_excerpt.addClass('selected');

 //Scroll the items
 $('#mask-gallery').scrollTo(next_image, 800);  
 $('#mask-excerpt').scrollTo(next_excerpt, 800);     }

</script>
<style>

#slider {

 /* You MUST specify the width and height */
 width:660px;
 height:275px;
 position:relative; 
 overflow:hidden;
-moz-box-shadow: 0px  0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
 overflow:hidden; 
}

#gallery {
 list-style:none;
 margin:0;
 padding:0;
 z-index:0;
 width:900px;
 overflow:hidden;
}
 #gallery li {
  float:left;
 }
#mask-excerpt {
 position:absolute; 
 top:0;
 left:0;
 z-index:500;
 width:100px;
 overflow:hidden; 
 }
 
#excerpt {
 filter:alpha(opacity=60);
 -moz-opacity:0.6;  
 -khtml-opacity: 0.6;
 opacity: 0.6;  
 
 list-style:none;
 margin:0;
 padding:0;
 
 z-index:10;
 position:absolute;
 top:0;
 left:0;
 
 width:100px;
 background-color:#000;
 overflow:hidden;
 font-family:arial;
 font-size:14px;
 color:#fff; 
}

 #excerpt li {
  padding:5px;
 }
 
.clear {
 clear:both; 
}
#btn-prev {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-prev:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-prev:active {
   border-top-color: #238acf;
   background: #238acf;
   }
#btn-next {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 4px 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 9px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
#btn-next:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#btn-next:active {
   border-top-color: #238acf;
   background: #238acf;
   }
</style>
<div id="debug"></div>
<div id="slider">

 <div id="mask-gallery">
 <ul id="gallery">
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
  <li><img src="ပံုအတြက္ Link ထည္႕ရန္" width="660" height="275" alt=""/></li>
 </ul>
 </div>

 <div id="mask-excerpt">
 <ul id="excerpt">
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li>
  <li>ပံုအတြက္ မိမိထည္႕ခ်င္ေသာစာထည္႕ရန္</li> </ul>
 </div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
 <a href="#" id="btn-prev">prev</a> 
 <a href="#" id="btn-next">next</a>
</div>

<div class="clear"></div>

                                      အားလံုးအဆင္ေျပၾကပါေစဗ်ာ။

 http://www.pyaephyo.com

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။ www.aungsanmks.blogspot.com 

www.ledimyethar.com 

www.ninilayy.com

Read more »