New Year Countdown

အားလံုးပဲ မဂဿငလာပာ။ ဟိုးအရင္တစ္ပတ္က christmas countdown လုပ္အျပီးမွာ အိမ္ေျပာင္းတာနဲ့ အလုပ္မ်ားသြားလို့ new year countdown အတြက္ တင္တာ ေနာက္က်သြားတယ္။ ဒာေပမယ့္ အခ်ိန္မီျဖစ္ေအာင္ ျကိုးစားျပီး တင္ေပးလိုက္ပာတယ္။ Christmas countdown မွာက ရက္ကိုပဲ count လုပ္တာပာျပီး newyear ကေတာ့ ရက္၊ နာရီ၊ မိနစ္၊ စကဿကန့္ေတြကိုပာ ထည့္ေပးထားပာတယ္။ ဒာမွလည္း ေသခ်ာ celebrate လုပ္လို့ရမွာ မဟုတ္လား။ ကိုယ့္ version နဲ့ ကိုယ္ေရးတာ ဘေလာ့ဂ္အတြက္က အဆင္မေျပဘူးျဖစ္ေနတယ္။ အမွန္ကေတာ့ မလုပ္တတ္တာပာ။ အခ်ိန္ကလည္း ျကာလာတယ္။ ဒာနဲ့ ဟိုရွာဒီရွာ googling လုပ္လိုက္ေတာ့ jquery သံုးထားတဲ့ countdown ေလး ထြက္လာတယ္။ သူဆီကို ျမန္မာလို countdown ေလး လုပ္ခ်င္တယ္ဆိုျပီး ေမလ္းပို့။ ေနာက္ ကိုယ့္ဘာသာကိုယ္ ေလ်ွာက္ကလိလိုက္တာ countdown ေလးတစ္ခု ရလာတယ္။ ဘေလာ့ဂ္မွာ တင္ဖို ့စလိုက္ရေအာင္။ website မွာတင္ဖို့လည္း သေဘာတရား အတူတူပာပဲ။ နမူနာကေတာ့ က်ြန္ေတာှ့ blog ရဲ့ side bar မွာပဲ ျကည့္လိုက္ပာ။ ၁၆ ရက္ ၁၁ နာရီ ၄၈ မိနစ္ ၁၄ စကဿကန့္ ဆိုျပီး ျပေနပာလိမ့္မယ္။ ဒီလိုနဲ့ ၃၁ ရက္ေန့ကို ေရာက္ရင္ေတာ့ ရက္ကို ျပမွာ မဟုတ္ေတာ့ပဲ နာရီ မိနစ္ စကဿကန့္ ၃မ်ိုးကိုပဲ ျပမွာပာ။ ကိုယ္တိုင္လုပ္လုပ္ျကည့္လို့ အဆင္ေျပေအာင္ တစ္ဆင့္ခ်င္းပဲ သြားပာမယ္။ စာရိုက္တာလည္း ေျဖးေျဖးခ်င္း ရိုက္လိုက္ပာတယ္။ :) jk.

အဆင့္ ၁

Layout > Page Elements > Add a Gadget > HTML/JavaScript ကိုသြားပာ။

ျပီးရင္ Title ထည့္ခ်င္ရင္ ျကိုက္နွစ္သက္ရာ တစ္ခုေပးလိုက္ပာ။

Content မွာ ေအာက္က ကုဒ္ေတြကို ကူးထည့္ေပးပာ။ Bold နဲ့ ျပထားတဲ့စာက countdown အခ်ိန္ျပည့္သြားရင္ (၂၀၁၀ ဇန္နဝာရီလ 00:01 am ကို ေရာက္ရင္) ေပာှမယ့္ စာသားျဖစ္ပာတယ္။ အခုေရးထားတာကို မသံုးခ်င္ရင္ ကိုယ္ျကိုက္နွစ္သာရာ စာသားနဲ့ အစားထိုးနိုင္ပာတယ္။ <br/> ဆိုတာ ေနာက္တစ္ေျကာင္းဆင္းဖို့အတြက္ျဖစ္ပာတယ္။ မလိုလ်ွင္ ျဖုတ္ပစ္လို့ ရပာတယ္။

<a href="http://talkii.myanmarbloggers.org/2009/12/new-year-countdown.html" target="_blank"><div id="defaultCountdown">
<script type="text/javascript">
var newYear = new Date(2009,11,31,23,59,59,999);
$('#defaultCountdown').countdown({until: newYear,
expiryText: '<span class="newYearStyle">Happy New Year! <br/> May you be success in the year 2010.</span>'
});
$('#defaultCountdown').countdown($.countdown.regional['mm']);
</script>
</div></a>

အဆင့္ ၂

Layout > Edit HTML ကိုသြားပာ။ စိတ္ခ်ရေအာင္ Download Full Template ဆိုတာကို နွိပ္ျပီး template ကို စိတ္ခ်ရတဲ့ေနရာမွာ back up လုပ္ထားပာ။ ျပီးရင္ေတာ့ search ကေန ]]></b:skin> ဆိုတာကို ရွာပာ။ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို ]]></b:skin> ရဲ့ အေပာှမွာ ကူးထည့္ေပးပာ။

/* jQuery Countdown styles 1.5.5. */

.countdown_show3 .countdown_section {width: 20%;}

.countdown_show4 .countdown_section {width: 20%;}

.countdown_amount {font-size: 200%;}

.countdown_section { display: block; float: left; font-size: 75%; color: #CCC;}

.newYearStyle {color: red;}

အေပာှက ကုဒ္ထဲကမွ width: 20%; ဆိုတဲ့ ေနရာမွာ ကိုယ့္ဘေလာ့ဂ္ sidebar အက်ဉ္းအက်ယ္ကို မူတည္ျပီး ေျပာင္းေပးပာ။ .countdown_selection ဆိုတဲ့ စာေျကာင္းမွာ #CCC ဆိုတာ countdown အေရာင္ကို အျဖူေရာင္ထားမယ္လို့ ေျပာတာပာ။ အဲဒီေနရာမွာ အေရာင္ အမည္ျဖစ္ေစ၊ အေရာင္ကုဒ္ ျဖစ္ေစ ထည့္ေပးနိုင္ပာတယ္။ .newYearStyle ဆိုတဲ့ စာေျကာင္းက အေရာင္က အဆင့္ ၂ မွာ ေရးခဲ့တဲ့ countdown အခ်ိန္ျပည့္ရင္ ေပာှမယ့္စာရဲ့ အေရာင္ျဖစ္ပာတယ္။ အထက္ကလိုပဲ ျကိုက္နွစ္သက္ရာ အမည္(သို့)ကုဒ္ အစားထိုးနိုင္ပာတယ္။ save မလုပ္ပာနဲ့ဦး။

အဆင့္ ၃

</head> ဆိုတာကို ထပ္ရွာပာ။ (updated) ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို </head> ရဲ့ အေပာှမွာ ကူးထည့္ေပးပာ။

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='http://blogcountdown.googlecode.com/files/jquery.countdown.min.js' type='text/javascript'/>

<script src='http://blogcountdown.googlecode.com/files/jquery.countdown-mm.js' type='text/javascript'/>

အရင္ countdown မွာလိုပဲ အခုဘေလာ့ဂ္ပို့စ္ကို ျပန္ညြွန္းတဲ့ လင့္ခ္ထည့္ထားပာတယ္။ မထည့္ခ်င္ရင္ အဆင့္ ၁ မွာပာတဲ့ <a> </a> ၂ခုကို ျဖုတ္လိုက္ပာ။ save template ကိုနွိပ္ပာ။ ျပီးရင္ေတာ့ ဘေလာ့ဂ္ကို ဖြင့္ျကည့္ပာ။ အဆင့္ ၃ဆင့္စလံုးကို ေသခ်ာလုပ္ခဲ့ရင္ ေအာင္ေအာင္ျမင္ျမင္ လုပ္လို့ရမွာပာ။ (က်ြန္ေတာှ့ ကုဒ္မွားတာလည္း ျဖစ္နိုင္ပာတယ္။) အဆင္မေျပတာရွိခဲ့ရင္ ျပန္ေျပာေပးပာ။ ေက်းဇူးတင္ပာတယ္။

Want to use this countdown for other?

Sure thing! Go to step 1, edit the following code,

var newYear = new Date(2009,11,31,23,59,59,999);

I use (2009,11,31,23,59,59,999) because new year starts from the first of January 00:01 am. So I set the (December 31, 2009, 11:59 pm). Then what about for your own countdown? Yes, you are right. Just change the year, month (start from 0, so december is 11), date, hour, minute, second, millisecond);

After that save and there you go. You got your own countdown. Give it a try. Be creative. Don't forget to tell me about your countdown. Gd luck. Again, thanks for using the script. :) Oh, what's next after countdown? Count up :) Yes, I'm happy to write about javascript these days. Stay tuned.

ေတာှကီ

follow me @Talkiiblog

Special thanks to Keith Wood for his script.

မွတ္ခ်က္။ ။ မနွစ္တုန္းက new year က တစ္မိနစ္ေစာသလား ေနာက္က်သလားမသိဘူး။ ဒီနွစ္ေတာ့ အခ်ိန္ အတိအက်ပဲ ျဖစ္မယ္ထင္တယ္။ ပိုေသခ်ာခ်င္ရင္ google မွာ new year countdown + ျမို့နာမည္ ဆိုျပီး timeanddate website မွာ သြားေရာက္ တိုက္ျကည့္နိုင္ပာတယ္။