Blog မွာ Back To Top ထည့္နည္း

Blog မွာ Back To Top ထည့္နည္းေလးပါ။ လြယ္ပါတယ္။ ထည့္မယ့္ေနရာေတြကေတာ့ အပိုင္း (၃)ပိုင္းကိုပဲ သတိထားရမယ္။ style sheet, , ဒီ (၃) ပိုင္းမွာ သူ႔ကုဒ္နဲ႔သူမွန္ေအာင္ထည့္ဖို႔ပါပဲ။

ထံုးစံအတိုင္း Blogger long in> Dashboard> Design> Edit HTML ကိုဖြင့္လိုက္ပါ။

(၁)
]]></b:skin> ဆိုတဲ့ code ကိုရွာပါ။ (ဒါကို style sheet လို႔ေခၚပါတယ္)။ ေတြ႕ရင္ ဒီ code အေပၚေလးမွာ ေအာက္ပါ code ေတြကို ထည့္ပါ။


#backtotop {

padding:5px;

position:fixed;

bottom:10px;right:10px;

cursor:pointer;

}

(၂)
</body> ဆိုတဲ့ code ကိုရွာပါ။ ေတြ႕ရင္ ဒီ code ရဲ႕ အေပၚေလးမွာ ေအာက္ပါ code ေတြကိုထည့္ပါ။ ၎ အနီေရာင္ျပထားတဲ့ URL IMAGE ေနရာတြင္ မိမိ IMAGE လင့္နဲ႔အစားထိုးပါ။ (တကယ္ဆို ဒီ (၂) နည္းနဲ႔ အလုပ္ ျဖစ္ပါျပီး ဒါေပမယ့္ အဆင္းအတက္ပိုလွေအာင္ အဆင့္ (၃) ထိသြားလိုက္ပါ။

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

(၃)
</head> ဆိုတဲ့ code ကိုရွာပါ။ (ဒါကေတာ့ Back to top ဆိုတဲ့ image ကို အဆင္း၊ အတက္ကေလး ပို လွေအာင္လို႔ Script ဖိုင္ေလးပါ)။ ေတြ႔ရင္ ေအာက္ပါ script code ေတြကို ဒီ အေပၚမွာထည့္လိုက္ပါ။

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>

ျပီးေတာ့ Save Template ေပါ့ဗ်ာ...

ေအာက္ပါအဆင္သင့္ျပဳလုပ္ထားတဲ့ Back To Top image တစ္ခ်ိဳ႕ရဲ႕လင့္ေတြကို ထည့္ေပးလိုက္တယ္။ ၾကိဳက္ ရင္ယူေပါ့ဗ်ာ။ မၾကိဳက္ရင္ ကိုယ့္ကိုဖန္တီးယူလို႔လဲရပါတယ္။



Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_4LoFT_XuZrk278OetaY0TRCCEAk9vK29hiy3qNEQZ7e8_t_u-Xx98b_HzBJAc-VCfF0UOZaumzKDH9n9sdY2YBKbpxuO6yDPF9nyNyYq9teIfcGRixPw-O2W31Hk2NQf1qTQQ9jLmVzo/s1600/bttp-5.png



Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcp4hyfSpsWUPqT8KDR-7D4SWunHogMv0ZY0WVTryVX6J8B47IrOXGVXJkUObGQ4oU60gwpiBuNAnb3lquc95DsjGj7n9YyWKqPk8KYUhstb0FkFCpZNlzIH2PtPR1YPls0dhURZZDicqo/s1600/bttp-4.png


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykjXJuLKx4puZ3zQqqY88I9wIgbYyFiSeTfrZTBnxbgXq3ERtiFbMSMec2nO-HsmDE65TGOFzt2hfRYRj8PQIN8ZFTI6haeCp_ON8jPpLiSa92zcCO8Xlu2uEym13JdsJHwdUzSiKARwg/s400/bttp-9.png


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh3ObnmyUSK96-KcCPGtrrip71Tkg1AF84I74HMfRouVjOXNUL0DJvagzAhui4NG-eyvJL5_1fa9T-Rbx9FIhauHyY-itsiX5xSxbcq5aIlLJXjhVD6URtzG0qt_9QsaC_pM6cEfAyNXR3/s400/bttp-10.png


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi5UwB44ygfpBNxuU7I6K2dFjbnXMBV0mJVvUSRbKA8ajCeVjo7VTLngKw6ZIYZaFBncTs4fv2qVJ69wSD7EwB5A6-ER2_nI3VjHuCyHJM5aGS4AeRKw0usQ4CdKuTqqvzR4Fs7RmlH1BB/s400/bttp-8.png



Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTX4lW31TCLx0cI0snit0sdJROxaiakHYBnkhVFsxbE7PHe4Xx0HPU_QeX1rXqh3AJKAnwYxwKwMLAX0LWNyVpvCOdCwXy_PKyipZhX-hITb0fv5y2UhxJTbzayeR250AalA1PdAdOc-M/

ref : http://www.allblogtools.com/tricks-and-hacks/add-back-to-top-button-to-your-blogger-blog-19-different-styles-and-more/

ေစာလင္းနက္စ္ထံမွတဆင့္ျပန္လည္ယူခဲ့သည္