အားလံုးပဲ sweet December ပာ။ ဒီေန့ေတာ့ site ေတြ လိုက္ျကည့္ရင္းနဲ့ chirstmas promotion ေလးေတြ့ေတာ့ အျကံရလာတယ္။ ဒာနဲ့ countdown ေလးလုပ္ျကည့္လိုက္တယ္။ ေနာက္ photoshop နဲ့ ျဖတ္ညွပ္ကပ္လုပ္ျကည့္လိုက္ေတာ့ (ကိုယ့္ဘာသာကိုယ္) ျကည့္ေကာင္းသလိုျဖစ္သြားတယ္။ တျခားသူေတြလည္း တင္လို့ရေအာင္ လက္တို့လိုက္ပာတယ္။ တစ္ဆင့္ျခင္းလုပ္လိုက္ျကည့္ရင္ အဆင္ေျပမွာပာ။ က်ြန္ေတာှ sidebar ကေသးေတာ့ ပံုအေသးသံုးထားတယ္။ ပံုအျကီးသံုးခ်င္ရင္အဆင္ေျပေအာင္ တစ္ခာတည္း လုပ္ေပးထားလိုက္တယ္။ အဆင္ေျပမယ္ ထင္တာပဲ။ ကဲ နမူနာေလးေတြ ျကည့္ရေအာင္။ မွတ္ခ်က္။ ။ဘေလာ့ဂ္စာမ်က္နွာမွလြဲျပီး feed reader, email ေတြကေနဆိုရင္ နမူနာကို ျမင္ရမွာ မဟုတ္ပာဘူး။
ကိုယ္ျကိုက္တဲ့အေရာင္ကို သံုးလို့ရေအာင္ အေရာင္ ၅ (update: one in sidebar) မ်ိုးလုပ္ေပးထားတယ္။
ဘေလာ့ဂ္မွာ တင္ခ်င္တယ္ ဘယ္ကေနစမလဲ။
ပထမအဆင့္
Layout > HTML ကိုသြားပာ။ စိတ္ခ်ရေအာင္ Download Full Template ဆိုတာကို နွိပ္ျပီး template ကို စိတ္ခ်ရတဲ့ေနရာမွာ back up လုပ္ထားပာ။ ျပီးရင္ေတာ့ search ကေန <body> ဆိုတာကို ရွာပာ။အဲဒာရဲ့ အေပာှနားမွာ </style> ဆိုတာ ေတြ့ပာလိမ့္မယ္။ (update: ရွာလို့မေတြ့ရင္ တစ္ခ်ို့ဘေလာ့ဂ္ေတြမွာ ]]></b:skin> ရဲ့ အေပာှမွာ ရွိတတ္ပာတယ္။) အဲဒီရဲ့ အေပာှကမွ အဲဒီနားမွာမွ (update: ]]></b:skin> ရဲ့ အေပာှမွာ ေအာက္က ေပးထားတဲ့ ကုဒ္ကို ကူးထည့္ပာ)
ကိုယ္ျကိုက္တဲ့အေရာင္ကို သံုးလို့ရေအာင္ အေရာင္ ၅ (update: one in sidebar) မ်ိုးလုပ္ေပးထားတယ္။
ဘေလာ့ဂ္မွာ တင္ခ်င္တယ္ ဘယ္ကေနစမလဲ။
ပထမအဆင့္
Layout > HTML ကိုသြားပာ။ စိတ္ခ်ရေအာင္ Download Full Template ဆိုတာကို နွိပ္ျပီး template ကို စိတ္ခ်ရတဲ့ေနရာမွာ back up လုပ္ထားပာ။ ျပီးရင္ေတာ့ search ကေန <body> ဆိုတာကို ရွာပာ။
/* Christmas Countdown Style */
.christmasCountdown{
font-family: "Lucida Console", Monaco, monospace;
font-size:14px;
font-weight:bold;
padding:20px 35px;
border:thin;
border-color:#333;
width:230px;
height:43px;
}
ဆိုတာကို ကူးထည့္ေပးပာ။ မွတ္ခ်က္။ ။padding မွာ 20px ဆိုတာ အေပာှက ေဘာင္နဲ့ စာ အကြာအေဝးျဖစ္ပာတယ္။ 35px ဆိုတာ ဘယ္ဘက္ ေဘာင္နဲ့ စာနဲ့ အကြာအေဝးျဖစ္ပာတယ္။ template ေပာှမူတည္ျပီး အတိုးေလ်ာ့ လုပ္ေပးပာ။ အဲဒီကုဒ္ရဲ့ေအာက္မွာမွ က်ြန္ေတာှ ဥပမာျပထားတဲ့ countdown ေတြထဲက ကိုယ္သံုးခ်င္တဲ့ countdown ရဲ့ ေအာက္က ကုဒ္ေတြကို ထည့္ေပးပာ။
ဥပမာ။ ။ အနက္ေရာင္ countdown ကို သံုးခ်င္တယ္ဆိုရင္ #bgBlack {} နဲ့ #bgBlack a {} နွစ္ခုပဲ ကူးပာ။ က်န္တာေတြ ကူးစရာ မလိုပာဘူး။
ဥပမာ။ ။ အနက္ေရာင္ countdown ကို သံုးခ်င္တယ္ဆိုရင္ #bgBlack {} နဲ့ #bgBlack a {} နွစ္ခုပဲ ကူးပာ။ က်န္တာေတြ ကူးစရာ မလိုပာဘူး။
#bgBlack{color: #333;
background: url('http://i217.photobucket.com/albums/cc318/talkii/bg_black_small.png') no-repeat;}
#bgBlack a{color: #333;}
#bgBlue{color: Blue;
background: url('http://i217.photobucket.com/albums/cc318/talkii/bg_blue_small.png') no-repeat;}
#bgBlue a{color: Blue;}
#bgPurple{color: Purple;
background: url('http://i217.photobucket.com/albums/cc318/talkii/bg_purple_small.png') no-repeat;}
#bgPurple a{color: Purple;}
#bgRed{color: #F00;
background: url('http://i217.photobucket.com/albums/cc318/talkii/bg_red_small.png') no-repeat;}
#bgRed a{color: #F00;}
#bgOrange{color:#F60;
background: url('http://i217.photobucket.com/albums/cc318/talkii/bg_orange_small.png') no-repeat;}
#bgOrange a{color:#F60;}
သက္ဆိုင္ရာ အေရာင္အလိုက္ #bgColourName နဲ့ #bgColourName a ဆိုတဲ့ ၂ခုကိုပဲ ကူးေပးရမွာ ျဖစ္ပာတယ္။ ျပီးရင္ save template ကို နွိပ္လို့ရပာျပီ။ (ေရးထားတာ မရွင္းခဲ့ရင္ ျပန္ေျပာေပးပာ။ က်ြန္ေတာှ ေျပာတာ ညံ့လို့ ျဖစ္ပာတယ္။)
ဒုတိယအဆင့္
Layout > Add a Gadget HTML/JavaScript ကိုသြားပာ။
ျပီးရင္ Title ထည့္ခ်င္ရင္ ျကိုက္နွစ္သက္ရာ တစ္ခုေပးလိုက္ပာ။
ေနာက္
ဒုတိယအဆင့္
Layout > Add a Gadget HTML/JavaScript ကိုသြားပာ။
ျပီးရင္ Title ထည့္ခ်င္ရင္ ျကိုက္နွစ္သက္ရာ တစ္ခုေပးလိုက္ပာ။
ေနာက္
<script type="text/javascript">
/* ------------- Please don't edit this section -----------
Name: christmas countdown by Talkii
Link: http://talkii.myanmarbloggers.org
Date: 4/12/2009
Thank you for using my script.
Picture from
http://www.pcauthority.com.au/Topic/160445,101-christmas-gift-ideas.aspx
*/
function christmasCountdown()
{
var newDate = new Date ();
var remainingDay = newDate.getDate();
var msg = '';
var dayLeft = 25 - remainingDay;
if (dayLeft == 0 )
msg = "Merry Christmas!!!";
if (dayLeft == 1 )
msg = "Tomorrow is Christmas Day!!!";
if (dayLeft > 1 )
msg =dayLeft + " Days until Christmas.";
if (dayLeft < 0)
msg = "Get new year countdown.";
document.write(msg);
return false; }
</script>
<a href="http://talkii.myanmarbloggers.org/2009/12/christmas-countdown.html" target="_blank">
<div class="christmasCountdown" id="bgBlack">
<script type="text/javascript">
christmasCountdown();
//updated on 8th of December.
</script>
</div>
</a>
ဆိုတာ ကူးထည့္ေပးပာ။ save ဆိုတာေတြ့မယ္ထင္တယ္။ မနွိပ္ရေသးပာဘူး။ ေအာက္ကေန စေရရင္ ၆ 7 ေျကာင္းေျမာက္မွာ id="bgBlack" ဆိုတာကို ေတြ့တယ္ဟုတ္။ bgBlack ဆိုတဲ့ေနရာမွာ ေစာေစာက html ကုဒ္ ထဲမွာ သံုးခ်င္တဲ့ အေရာင္နာမည္ ထည့္ေပးပာ။ ဥပမာ။ ။ အျပာေရာင္ သံုးခဲ့တယ္ဆိုရင္ bgBlack အစား bgBlue, bgRed, bgOrange, bgPurple စသျဖင့္ ဆိုင္ရာအမည္အစားထိုးေပးပာ။
ျပီးရင္ေတာ့ save ကို နွိပ္လို့ရပာျပီ။
ျပီးရင္ View Blog ကိုနွိပ္ျပီး result ကို ျကည့္လို့ရပာျပီ။ အဆင္ေျပမယ္ထင္ပာတယ္။
ဒာကေတာ့ ပံုအျကီး လင့္ခ္ပာ။
Bg Red
Bg Purple
Bg Black
Bg Blue
Bg Orange
က်ြန္ေတာ္ ေျပာခ်င္တာတစ္ခုရွိပာတယ္။ countdown မွာ အခုဘေလာ့ဂ္ပို့စ္ကို ျပန္ညြွန္းတဲ့ လင့္ခ္ထည့္ထားပာတယ္။ အဲဒီလင့္ခ္ကို ေက်းဇူးျပုျပီး အတတ္နိုင္ဆံုး မျဖုတ္ပာနဲ့လို့ ေတာင္းဆိုခ်င္ပာတယ္။ မရဘူးကြာ ငာကေတာ့ ျဖုတ္ခ်င္တယ္။ ျဖုတ္ပာခင္ဗ်ာ။ အဆင္ေျပသလို အသံုးျပုပာ။ အဆင္မေျပရင္ ျပန္လာေျပာပာ။ က်ြန္ေတာှ အတတ္နိုင္ဆံုး လိုက္ျကည့္ေပးပာ့မယ္။ အေပာှဆံုး အပိုဒ္မွာ ေျပာထားသလိုပဲ က်ြန္ေတာှဘေလာ့ဂ္ရဲ့ sidebar က ေသးတဲ့အတြက္ေျကာင့္ ပံုအေသးေလး သံုးထားပာတယ္။ ပံုအျကီးစမ္းျကည့္ခ်င္တယ္ဆိုရင္ ေအာက္မွာ လင့္ခ္ေတြ ေပးထားပာတယ္။ ဒာမွမဟုတ္ ဘယ္ပံုကိုမွ မသံုးဘူး။ text သက္သက္ပဲ သံုးခ်င္တယ္ဆိုလည္း ရပာတယ္။ ပထမအဆင့္ကို ေက်ာှျပီးလုပ္လိုက္ရင္ စာခ်ည္းသက္သက္ ျမင္ရပာလိမ့္မယ္။ အဆင္ေျပပာေစ။
ျပီးရင္ေတာ့ save ကို နွိပ္လို့ရပာျပီ။
ျပီးရင္ View Blog ကိုနွိပ္ျပီး result ကို ျကည့္လို့ရပာျပီ။ အဆင္ေျပမယ္ထင္ပာတယ္။
ဒာကေတာ့ ပံုအျကီး လင့္ခ္ပာ။
Bg Red
Bg Purple
Bg Black
Bg Blue
Bg Orange
က်ြန္ေတာ္ ေျပာခ်င္တာတစ္ခုရွိပာတယ္။ countdown မွာ အခုဘေလာ့ဂ္ပို့စ္ကို ျပန္ညြွန္းတဲ့ လင့္ခ္ထည့္ထားပာတယ္။ အဲဒီလင့္ခ္ကို ေက်းဇူးျပုျပီး အတတ္နိုင္ဆံုး မျဖုတ္ပာနဲ့လို့ ေတာင္းဆိုခ်င္ပာတယ္။ မရဘူးကြာ ငာကေတာ့ ျဖုတ္ခ်င္တယ္။ ျဖုတ္ပာခင္ဗ်ာ။ အဆင္ေျပသလို အသံုးျပုပာ။ အဆင္မေျပရင္ ျပန္လာေျပာပာ။ က်ြန္ေတာှ အတတ္နိုင္ဆံုး လိုက္ျကည့္ေပးပာ့မယ္။ အေပာှဆံုး အပိုဒ္မွာ ေျပာထားသလိုပဲ က်ြန္ေတာှဘေလာ့ဂ္ရဲ့ sidebar က ေသးတဲ့အတြက္ေျကာင့္ ပံုအေသးေလး သံုးထားပာတယ္။ ပံုအျကီးစမ္းျကည့္ခ်င္တယ္ဆိုရင္ ေအာက္မွာ လင့္ခ္ေတြ ေပးထားပာတယ္။ ဒာမွမဟုတ္ ဘယ္ပံုကိုမွ မသံုးဘူး။ text သက္သက္ပဲ သံုးခ်င္တယ္ဆိုလည္း ရပာတယ္။ ပထမအဆင့္ကို ေက်ာှျပီးလုပ္လိုက္ရင္ စာခ်ည္းသက္သက္ ျမင္ရပာလိမ့္မယ္။ အဆင္ေျပပာေစ။
ေတာှကီ
follow me @Talkiiblog
|
Post a Comment