Back To Top ရွင္းလင္းခ်က္

Back to top ဆိုတဲ့ အေၾကာင္းေလးကို ေရးဖို႕မလိုေတာ့ဘူးလို႕ ေတြးခဲ့ေပမဲ့လည္း၊ မာတီက တစ္ခ်ဳိ႕ ဆိုဒ့္ေတြမွာ Back to top icon ေလးေတြက ေနရာတစ္တက်မျဖစ္တာေတြလည္း ေတြ႕ေနရသလို၊  အဲ့ဒီ back to top ေလးက Home page မွာပဲ ေပၚေနတယ္ ပိုစ့္တိုင္းမွာ မေပၚတာကိုလည္းေတြ႕ေနရပါတယ္။

အရင္ကေတာ့ ကိုလင္းထက္က Back to top အေၾကာင္းေလးကို ဒီမွာ ေရးခဲ့ၿပီးပါၿပီ။ အဲ့ဒီ ပိုစ့္ထဲမွာက CSS ထဲမွာေရာ သြားခ်ိန္ရမဲ့ နည္းျဖစ္ေနတယ္။ အခု နည္းကေတာ့ CSS ထဲမွာ သြားထည့္စရာေတြ ခ်ိန္စရာေတြမလိုပါဘူး။

Back to Top
Back to top ဆိုတာကေတာ့ မာတီမွာ (ေတာ္ေတာ္မ်ားမ်ား) မသံုးၾကပါဘူး။ ဘေလာ့ဂ္စေပါ့ေတြမွာေတာ့ ေတာ္ေတာ္ေလးကို အသံုးျပဳၾကပါတယ္။ သံုးရတဲ့ အေၾကာင္းကေတာ့ ဒီလို....... တစ္ေယာက္ေယာက္ရဲ့ ဆိုဒ္က စာေတြ အမ်ားႀကီးေရးထားတယ္။ အမ်ားႀကီးေရးထားလို႔ အမ်ားႀကီး ဖတ္ရတယ္ေပါ့ဗ်ာ။ ဖတ္ရင္းနဲ႔ ေအာက္ကိုေရာက္သြားမယ္။ ဖတ္လို႔ ၿပီးသြားရင္ အေပၚကို ျပန္တက္ေနရမွာ Scroll Bar ကိုဆြဲရင္ဆြဲ၊ ဒါမွမဟုတ္ Mouse မွာပါတဲ့ ballon ေလးကို လွည့္ၿပီးေတာ့ ျဖစ္ျဖစ္ေပါ့။ အခု ဒီ back to top ေလးထည့္ထားတဲ့ရင္က်ေတာ့ အဲဒါေလးကို ႏွိပ္လိုက္တာနဲ႔ ထိပ္ဆံုးကို တန္းၿပီး ေရာက္သြားပါလိမ့္မယ္။ Scroll Bar ေတြလည္း ဆြဲစရာမလိုေတာ့ပါဘူး။

^{(back to top ထည့္ရျခင္းရဲ႕ အေၾကာင္းအရင္းကို ကိုလင္းထက္ေရးခဲ့တဲ့ ပိုစ့္ထဲကျပန္တင္ေပးလိုက္ပါတယ္)}

Welcome Box
Welcome Box ဆိုတာက Home page မွာပဲ အလုပ္လုပ္ပါတယ္။  blog ထဲသို႕ music တို႕ photo တို႕ထဲကို ၀င္မယ္ဆိုရင္ Welcome box က မေပၚေတာ့ပါဘူး။ ဒါေၾကာင့္ အခု Back to Top ေလးကိုလည္း Welcome box ထဲမွာ ထည့္မယ္ဆိုရင္ေတာ့ Home page မွာပဲ ေပၚပါလိမ့္မယ္ ပိုစ့္တိုင္းလိုလိုမွ ေပၚမွာမဟုတ္ပါဘူး။ အဲ့ဒီေတာ့ back to top ေလးကို Welcome box ထဲမွာ မထည့္ပဲ တစ္ျခား တစ္ေနရာမွာ ထည့္မွ ျဖစ္ပါလိမ့္မယ္။

Back to top ေလးကို ေနရာတိုင္းလိုလိုမွာ ေပၚေစဖို႕အတြက္ ထည့္စရာ ႏွစ္ေနရာပဲ ရွိပါတယ္။

• Site Title
• Sidebar {Rail} (အရင္က ေၾကာ္ျငာေနရာ)

အဲ့ဒီႏွစ္ေနရာထဲက Sidebar မွာထည့္ရင္ အေကာင္းဆံုးပါပဲ၊ ဘာလို႕လည္းဆိုေတာ့ rail က႑က ေနရာတိုင္းမွာ ေပၚေနလို႕ပါပဲ။

Back to top ယူမယ္ဆိုရင္


ဘယ္ဖက္သို႕....

CSS

<a style="position: fixed;bottom: 5px;left: 5px;" href="#" title="Back to Top"><img src="http://img140.imageshack.us/img140/5843/top1.png" border="0"></a>

ညာဖက္သို႕....

CSS

<a style="position: fixed;bottom: 5px;right: 5px;" href="#" title="Back to Top"><img src="http://img140.imageshack.us/img140/5843/top1.png" border="0"></a>

ညာဖက္သို႕....

CSS

<a style="position: fixed;bottom: 5px;right: 5px;" href="#" title="Back to Top"><img src="http://i42.tinypic.com/33blk5z.jpg" border="0"></a>

ဘယ္ဖက္သို႕....

CSS

<a style="position: fixed;bottom: 5px;left: 5px;" href="#" title="Back to Top"><img src="http://i42.tinypic.com/33blk5z.jpg" border="0"></a>

Back to Top အေနနဲ႕ ပံုကို ညာဖက္မွာ ထားႏိုင္သလို ဘယ္ဖက္မွာလည္း ထားႏိုင္ရန္အတြက္ ပံုမ်ားနဲ႕ ဘယ္ညာျပေပးထားပါတယ္။ right နဲ႕ left ကို ျပေပးထားပါတယ္။ ႀကိဳက္ႏွစ္သက္ရာကို သံုးပါ။

^{(အေပၚက ပံုကို ကြ်န္ေတာ္ဆြဲထားတာျဖစ္ၿပီး၊ ေအာက္က ပံုကိုေတာ့ ဧရာယူနီကုတ္မွ ဆြဲထားတာျဖစ္သည္)}

Code ထည့္သြင္းနည္း
Customize Site ကိုနိပ္လိုက္ရင္ ဆိုင္ရာဆုိင္ရာ က႑ မ်ားမွာ edit ဆိုတာေပၚလာပါလိမ့္မယ္ အဓိက ထည့္ရမဲ့ေနရာကေတာ့ ေအာက္က ပံုအတိုင္းျဖစ္ပါတယ္

ပံုထဲက အတိုင္း edit ကို နိပ္ေပးလုိက္ရင္ box တစ္ခု ေပၚလာပါလိမ့္မယ္။ ေပၚလာတဲ့ အထဲက အေပၚက ကုတ္ကို ယူ၍ ထည့္ႏိုင္ပါသည္....။ ထည့္ၿပီးက Save ကို နိပ္ရင္ ရပါၿပီ....

အဆင္ေျပေပ်ာ္ရႊင္ပါေစ
{ေဇာင္း} 

 

Posted in: ကုဒ္မ်ား