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/AVvXsEg8k5dyEkrWsdk9EtiPzdFmKEIU6c9aXKDs-HJMCCn-3SiU7bbmzzWZOIGXhQRic9-zYg6ClixGdZIwmAio1PgvpVPOgiYm_8bLgDuN3M6TExdpU2jw-jJOo4KRSK1JsqPc0kxpuLN1DwIx/s1600/bttp-5.png



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


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdUA-khCZJ1HAeKzkMdCGjtcTIwrZvY_di1p0Q2jFryn1HBQWi9PIYtHojlwizZvQ89bkePUw0zPgj6F9MBmzQg1s320Al5uFdDGhQVFYRt24EJk5XNZxEI5t7_Jn-Jb0OT4VgLB7nWsVw/s400/bttp-9.png


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNg22CzqyehlPCt23QLLknfcHIOlZsUqZ83t9n5cNMZ21rByqTTeaQbhjYeZTpJvUDinlopIR7JbYXR9TYake_3M6G4oHEpzDb8JYL-VPAiZQp9Oc1Ynp-h8fAc-tarGYB1aYiej4u6dS7/s400/bttp-10.png


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



Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIwtT5CACt2fiy1WP-UpeRv9338PD4RpeyBIMnnsgIkNTjHim9VH-Gif0tpqxkNUNEBg5yuBpo-IQ4Kftz9_GMCAsjtGbmH3kIO3Lap8OMWrRR3TuKO53A72-bCozSOnyjMNirBPm6TzbP/

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