ေစာေမဓာ

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/AVvXsEjlQhOD7t1qj_F_wpyl2wLvvhxtH21AEVPoJ7FGQ5AmR2mpRJoI6V3Y1fkcq5_GgcHspc3aUFzrcc2vjXLw3SsLvVksJcd6-7Xh-H3D33vVy7d56yMU8tUJ0u63YMs6D-z_4TnptAptNgWN/s1600/bttp-5.png



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


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9nd_A1WhbWLG-FteLjd3ASMivjEhiUFnYiSYqnn71mY5s0_Juf5nbTZfbd8nz-8J9X8iYpEQZmbgKJAf1WRwWSmQNxIWc4otl9VdGqhtRX2m7zMY4ZijxKhDaVXE1lGUf2tDNBbuPHabi/s400/bttp-9.png


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmS2oIlV9KxTfWIiTKdOm5trx-xcLPGMKRnVwNcokEfSTHSjtReFEgirsQGsbISJWdYGZBpBkklP0-f-mJn2OvMnZqju0dDVdAGJjbI8DpLHvxYhdEHTJ28eb3otBZxE3WNKcZYppvp6Uw/s400/bttp-10.png


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



Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo_29JIAZndBajWKuUJDy8RldOjrxIB8KplIY14yzzpmbv_55obXeNODIYdr0GUG7TlSFuNTqCCmyp41WW2ZWvoOsQEmA6FQzdeBc_JUma-Ky2A_LXHmlp6i66IUiwYD5Kp936Li9f4ulk/

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