ကြ်န္ေတာ့္ ဘေလာ့ဂ္ကို တိုက္ရိုက္မ၀င္ဘဲ htootayzar.com ကေန ၀င္တဲ့အခါ front page တစ္ခုကို အားလံုးၿမင္ဘူးၾကမယ္ ထင္ပါတယ္။ အမွန္ေတာ့ အဲဒီ page က ဒိုမိန္း၀ယ္ကတည္းက ဘာလုပ္ရမွန္းမသိလို႔ ထည့္ထားတာပါ။ ကြ်န္ေတာ္က ဆိုဒ္ကို ၀င္လိုက္တာနဲ႔ ဘေလာ့ဂ္တက္လာတာမ်ိဳးထက္ အၿခား ဆိုဒ္တစ္ခုလိုၿဖစ္ခ်င္တာေနာက္ လုပ္ခဲ့ဘူးတဲ့ အလုပ္ေတြလဲ ထည့္ခ်င္ေသးတာ ေနာက္ page rank အတြက္လဲ စဥ္းစားၿပီး ဘာမွမလုပ္ပဲ index ကိုခ်န္ထားခဲ့တာပါ။ ၿပင္မယ္ ၿပင္မယ္နဲ႔ မအားတာရယ္ လုပ္ရင္လဲ အၿပည့္အစံုၿဖစ္မွ တင္ခ်င္တာနဲ႔ အခု ႏွစ္ခ်ီၾကာေနၿပီ မၿပင္ၿဖစ္ေသးတာပါ။ ဒီေန႔ကေတာ့ အဲဒီ front page ကို ဘယ္လိုလုပ္ထားလဲဆိုတာ trick တခ်ိဳ႕ ေရးမလို႔ပါ။

အဲဒီ front page ကို photoshop ထဲမွာပဲ လုပ္ထားပါတယ္။ အၿခားထည့္စရာ ေဒတာ မရွိေသးလို႔ full page (cross resolutions) ၿဖစ္ေအာင္ လုပ္ထားပါတယ္။ အခု ကြ်န္ေတာ္ေၿပာမွာက photoshop မွာ ဘယ္လိုလုပ္လဲ ေၿပာမွာ မဟုတ္ပါဘူး။ CSS trick လုပ္ထားတာေလးေၿပာမလို႔ပါ။

အဲဒီ page လုပ္ဖို႔ စဥ္းစားေတာ့ ပထမဆံုး စဥ္းစားရတာက loading time ပါ ႏိုင္ငံၿခားမွာ အဲဒီေလာက္က ဘာမွ ထည့္စဥ္းစားဖို႔ မလိုေပမယ့္ ၿပည္တြင္းက ၾကည့္ဖုိ႔ ၾကေတာ့ ကြ်န္ေတာ့္ရဲ႕ widescreen wallpaper size background ၾကီးက ကြန္နက္ရွင္က်ေနတဲ့ အခါ ေတာ္ေတာ္ထိုင္ေစာင့္ရလိ့မ္မယ္။ အဲဒါကို ထည့္တြက္ရင္းနဲ႔ CSS နဲ႔ trick တစ္ခု လုပ္လို႔ရတယ္ဆိုတာ စဥ္းစားမိတာနဲ႔ trick ထည့္လိုက္ပါတယ္။

သံုးထားတာက background ပံု ေနာက္ခံပံုရယ္ ေနာက္ loading တက္ေနသလိုၿပေပးတဲ့ animated gif ဖိုင္တစ္ခုပါ။ loading တက္ေနတဲ့ animation gif ဖိုင္ကို လိုခ်င္တဲ့ဒီဇိုင္းနဲ႔ ajaxload.info မွာ ယူႏိုင္ပါတယ္။ ကြ်န္ေတာ္ အဲဒီ ဆိုဒ္က ပံုတစ္ခုကို ယူၿပီး body background မွာ ၿမဳပ္ထားလိုက္တယ္။

body {
background: #000 url(greybox/indicator.gif) no-repeat center;
font-family: Georgia, “Times New Roman”, Times, serif;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}

.background {
background: transparent url(homenew.jpg) no-repeat top center;
position: abosolute;
height: 100%;

}

ေနာက္ အဲဒီ page မွာ ကြ်န္ေတာ္သံုးထားတဲ့ စာလံုးအေရာင္က ေတြ႔ခဲ့တဲ့ အတိုင္းပါပဲ။ အနက္ေရာင္သံုးထားတယ္ အဲဒါေၾကာင့္ body background အေရာင္ကို အနက္ေရာင္သံုးထားလိုက္ပါတယ္။ ဘာလို႔လဲဆိုေတာ့ ပထမဆံုး ေနာက္ခံ image wallpaper မတက္ေသးတဲ့ အခ်ိန္မွာ စာလံုးေတြက ေနာက္ခံ အနက္ေရာင္နဲ႔ ေရာၿပီး ေပ်ာက္ေနေအာင္လို႔ပါ။ အဲဒီ အခ်ိန္မွာပဲ file size အရမ္းေသးတဲ့ loading.gif ကေတာ့ center no-repeat နဲ႔ တက္ေနပါလိမ့္မယ္။ ဆိုေတာ့ ဆိုဒ္က ajax လိုလို flash လိုလို loading တက္ေနတယ္ေပါ့ =D ခဏေစာင့္ပါဆိုတဲ့ သေဘာမ်ိဳး visitor ကို ၿပေပးထားမယ့္သေဘာေပါ့။

အဲဒီခ်ိန္မွာ cursor ကို ေလွ်ာက္ေရႊ႕ၾကည့္ရင္ေတာ့ အဲဒီ link ေတြ hover လုပ္တဲ့ အခါေတာ့ ၿမင္ေနရလိမ့္မယ္။ ေနာက္ခံပံု အၾကီးတက္လာတဲ့ အခါက်ေတာ့မွ ယူဇာကို ဆိုဒ္ကလံုး၀ တက္သြားၿပီ ဆိုတဲ့ သေဘာမ်ိဳးၿဖစ္သြားတာေပါ့။ ဒီအတိုင္း အဲဒီ trick မထည့္ပဲထားလိုက္ရင္ ယူဇာ စက္မွာ ကြန္နက္ရွင္ေႏွးေနတဲ့ အခ်ိန္ဆို ဆိုဒ္က ဘာမွမတက္ဘူး အနက္ေရာင္ၾကီးပဲ တက္တယ္ဆိုၿပီး ၿပန္မထြက္သြားေအာင္ စြဲေဆာင္ထားတဲ့ သေဘာပါ။ ဒီသေဘာတရား အတိုင္းလုိက္ၿပီး double background (.png files) ေတြနဲ႔ တြဲၿပီး ဒီဇိုင္းထည့္လို႔ရပါမယ္။ ေနာက္ javascript framework တစ္ခုခုသံုးၿပီး animated background မ်ိဳးေတြ လုပ္ယူလို႔ ရႏိုင္တာေပါ့။ CSS ထည့္ထားတာ အေသးစိတ္ကိုေတာ့ home page view source မွာ ၾကည့္ၾကည့္ပါ ကြ်န္ေတာ္ ၿပင္ရမွာ ပ်င္းလို႔ ဖိုင္ေတာင္ ခြဲထည့္မထားပါဘူး

စကားမစပ္ ေၿပာတာပါေနာက္ဆို ကြ်န္ေတာ္ ဆိုဒ္တစ္ခုလံုး ဒီ blog page တင္မကပဲ ေၿပာင္းဖုိ႔ အစီအစဥ္ရွိပါတယ္။ အရင္ကထဲက ေၿပာင္းမယ္ ေၿပာင္းမယ္နဲ႔ လုပ္ထားတာ theme ေတြ ၄ ခုေလာက္ရွိေနၿပီ တစ္ခုလုပ္လုိက္ ေနာက္ထပ္ ဒီဇိုင္းတစ္ခုၾကိဳက္ၿပန္တာနဲ႔ မေၿပာင္းၿဖစ္တာပါ။ အခုထိကေတာ့ banner ခဏတိုင္းလဲ ရတာပဲ ၾကိဳက္တုန္းပါပဲ =D အဆင္ေၿပပါေစ…