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/AVvXsEi0KlxYNxGRg0PRStc4ce277QstBJ_QjvNF21C8cWUD8wNV1IQUrQPPDsT6A9l5S5O_HmCbJKSPmzVEzemiW9DVubZmWGsWfoWskHQk4ayw6ngyTIR9AhOe9-hzRBOnKrcxO_vwcrDZxhPV/s1600/bttp-5.png



Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBotq8w3eEk4wq8_5-5XeNAphG8TK7H7M8XtQMoP_eoyIxvwqZSHX-Zz8DAUnxvedTn4HGRSdw1V3jOu_I1zOy6mgS7U1kto3ad8t820pDOMqoyqN_e793u-9eALCd9LMY9igBWpoPVq9I/s1600/bttp-4.png


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


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaxsvEfVPQiJLiKbk-CR7ppQARcSxlgeztgRahOkzPi4YUqYYCGzk606jx2__XQu1uswTBpnyleItzFsFOImF4kO7msRqopp87AVQ4Ae4BfrXiUj5Ty6ubf-UOtXEhYYP0e_5hHHANDNR/s400/bttp-10.png


Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcbX67oPl_-hpNoo2MWuGqvwTEGI6Vrx56Ks_k-tF6DRNoPfz-8KbJlK50Gp6XAr3W_L2aB_STS3kzpJpZKjjwnQd-pbdINnRRvr08bBN-s9wMYPiHWQD7zxtfY7JEmqW4cxi1qJi08B32/s400/bttp-8.png



Link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRRuMrnzzKSDAgP2dJAvFAaOnxc5cLEOk9nSsf1BRyXF5CSdau3lnkhOtg3M3kABHAGCfSqqoOZVWMoTF3WnhZB2ZoGrnK0zHWy-KiybDCOkXjaU4DFHI38VVrmZ-gxv3NCEu0moeCnk9T/

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