Back To Top Widget For Blog +19 Style

ဘာရယ္ေတာ့ မဟုတ္ဘူးဗ်ာ.. က်ေနာ္ Template ေျပာင္းရင္းနဲ႔ ေရးခ်င္စိတ္ျဖစ္လာလို႔ ဒါေလး တင္လိုက္တာပါ။ က်ေနာ္က Template ကို အၿမဲတမ္းလိုလို ေျပာင္းေျပာင္းေနတတ္ေတာ့ တစ္ခါေျပာင္းတိုင္း widget ေတြကို ျပန္ျပန္ထည့္ရတာေတြ ရွိတယ္။ အဲဒီအခါက်ရင္ ျပန္ျပန္ရွာရျပန္ေရာ.. ေနာက္တခါလည္း ျပန္ရွာရအံုးမွာပဲေလ။ အခု ျပန္မရွာခ်င္ေတာ့လို႔ ကိုယ့္ဘေလာ့မွာကို တင္ဖို႔ စိတ္ကူးလိုက္တာပါ။ တျခားဘေလာ့ေတြမွာလည္း ဒီ widget ေလးထည့္ပံုကို ေရးထားၾကတာေတြ ရွိပါတယ္။ အခုဟာေလးကေတာ့ တျခားဟာေတြနဲ႔ မတူဘူးဗ်။ နည္းနည္းအလုပ္ပိုတယ္။ အမ်ားအားျဖင့္ သံုးၾကတာေတြကေတာ့ page element ကိုေခၚၿပီး HTML/Java Script နဲ႔ပဲ ထည့္ၾကတာမ်ားတယ္။ အခုဟာေလးကေတာ့ အဲလိုမဟုတ္ဘူး..

က်ေနာ္တို႔ ထံုးစံအတိုင္းပဲ Blogger.com ကိုေတာ့ ၀င္ရမွာေပါ့ဗ်ာ။

အဆင့္(၁)

ၿပီးရင္ Layout ထဲက Edit HTML Tab ကိုသြားရပါမယ္။
ၿပီးရင္ ]]></b:skin> ဆိုတာကို Ctrl+F နဲ႔ ရွာလိုက္ပါ။ ေတြ႔ရင္ ေအာက္က Code ကို သူ႕အေပၚမွာ ထည့္ေပးလိုက္ပါ။

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}

အဆင့္(၂)

ၿပီးရင္ ဒီ </body> ဆိုတာေလးကို Ctrl+F နဲ႔ ရွာလိုက္ပါ။ ၿပီးရင္ ေအာက္က code ေတြကို သူ႕ရဲ႕ အေပၚမွာ ထည့္ေပးလိုက္ပါ။

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

ဒီ code ကို ထည့္တဲ့ေနရာမွာ Image-Url ဆိုတဲ့ေနရာကို ေအာက္မွာ ေပးထားတဲ့ ကိုယ္ႀကိဳက္တဲ့ ပံုေလးေတြက လင့္ေတြနဲ႔ အစားထိုးေပးရပါမယ္။ ကိုယ္တိုင္ လုပ္ၿပီးသားလင့္ရွိရင္လည္း အစားထိုးေပးလို႔ ရပါတယ္။ အခုေအာက္မွာ ပံုစံ(၁၉)ခု ေပးထားပါတယ္။

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdEPYm5r8ZRW6GEplI55WZzVcARORCHELM1w2sIvkwYXEkXhC7EUMikb1ivVVBkvRE6_NzanfTz2a4oypqZTKWtcokv_jIsR6Rhal_2BGWctZXfo1FfgaoTXTD5MEhyphenhyphenSdnmMgXgdythsnw/s1600/bttp-1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyeI0CXRELUqyPm0CZIzjnezn3Dnk3y38gBCzSQmlWC15B3jopaQXZxFJ-MQ46VtYxcfoU7buEh4esu7FtpOc6-OeOqmKZb1x7ppXvrMGRsR26XCpAJKp81jOKF1Ky41v-Wy2dnFsQW8p2/s1600/bttp-2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4g1aqetEcimEbY0YqRNGz_JRLTnWC7ccnUxqh0vN4al7nnXK76Nl-ATx3Qv6NLLoOSUNFg53HY_eRH-U1_hIsvCSCC6CnD7wEm_6A7X0LgiS9AkNWi0ZchWQtAxDZmtS6tfrW7XzPYAAk/s1600/bttp-3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_eeCsJhxI9mlA7VEBaIsIJhkCR56LXLUlP13Rrg8zD4cdjKJ2YJKsYgHXk6Y0rLPSXJRHXFgNYCWASZ6ujPE8HRz-8cjWfkXz0c1_Nu_NWqWS_Czrb54E_NP8nlzfWz7jnfD9CqGgzNhl/s1600/bttp-4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5htPsYHJGiJUaR62_xLYLgiD-pK8Rm5AZCX2CDb4ZGaQtWv2SfUrQBoa4lFJ41kFG46yo1Nf81oyxXTRR1asg5oRb6Pb_Z-WThHOUGsJ4Fkmzgkxn6BV-ZhcfYq5a1XibeJGNKz1Jwn7n/s1600/bttp-5.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMltiGx2zQO1F_tSoacxIrZhlY4cfvz-KxJdujP0SoJciwujBTdhAUvljz_cjvMyud3aFXMH6ETCxQ-orI864lE1E_lYziWawhteuekomAxJUB2yPdnSP4tJSxI8hsVBotbX0yrnRnpdjj/s400/bttp-7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8hb3XXsVwznD4A_1NLub8idR9b4_LNm_4ngdklOkAGC-cVqPwVlJOP5g0LFOZwoCwED4EbzZ3kJB5LCnkgL3atx9Jttk8jk16vDb6DXpfZ9g5Z-3AMAqBxw_tvklmdmL1baeIY16a0W-M/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-RN7UbuV5fmhFrLMWpYIEysX9bqoq5XPuN5V-KKZuU8B9ln9SW1e-LeU-8xfYIYboFFxke_dG0F8jUyPqOCawEeZD8hMV-Y6FnpGWSIPjH1VcvQ8YoVZgLv395pz3HbblNU2d7qUtywfk/s400/bttp-8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0XNkMJdYzTcI2qtpgtCjB9JbOhUIWYgD3nv6H9JC-pB_WM7Stkb0XnVjqQAaW2SHLcZPex-hHSyiF3KJDTprRKrs9CqRDlXf_KCNiumQKkSTvIIM82RYHO9rXUeJ3tJL8rRl2Ih2AtmJh/s400/bttp-9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnhLxxzHZUBme7yFEGGvlqen1EzXohKJavXvhWPemeJtfWPZgNrkpTGJPTSEhS7URymy6EYA_5JSD-KovP7Y1dK1QyRd9lV0vzF2bbksbY875vpTc06MvNYBs0PtaxPgqP3NJvexLh027n/s400/bttp-10.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGp6RHqmKQQkLDW07O3HE-PYAMlDKHshnr2gZGFZgFfhylgOLk5C4RJ6VOJLgv-p513NDSPbRXJQGZHmiofuftqHLQbH5gfcd1K-HE_tARlxzlKWkI_w6hf1qbWVqiViAttZxAUYoJcdFP/s400/bttp-11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8JfrlNuaIrgflHQUVsfFDdQwpsdJ9npk8Mlr4c2qtXl2QlHcxACjTJxLKKaI5ZDN4wt6LmXYUubl4dePp5-ecxWu1In3411e-9fWId9ohzahouK34RV_-3dzjhLmUrPgtLewLRtF14-4l/s400/bttp-12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4pHE9OL5mvgibnRfoVNKPRAan4e6h0od9hTARlhwSe_ME0LEyeKySeHeKletDtXckHI1iVI9PYsjnPwaRbnrEIUhvXFrSA1RsVX8Rh7ugkLkQpuzY1jCNg4JP87ZFcyr4j10gajOHxoZf/s400/bttp-13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHzwPWTX4wFUjDJJbD2P4dXwbPOZutP4dGTp8dn5O_xkHzqX61rSs1wk2xvjJiEXUDuWsnGZOZNGgzxTzOSjiXS8kFzS4FGZoPV9f8w5sPHp1NoLh9xD0bI665b3_vDObhKhlgv9VIgCW/s400/bttp-14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1KEhUYaXstjcLGihOOau0df5PDNnQkcnA-i5H9TBQ1qHlD9Y_8dN630oUzK275cEXgay62CxZai1zfxkCLjPdegnhxfo2y9vKYA5KuGnJCBa085GZxf5LnGGEIcH2zkOPDBLBKq3DkVVZ/s400/bttp-15.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMXi2fslNDkz3jNpcyNLdBHrK3z0yT7W0Zn0EouUNsWIsaQHwcnzzkVVvavlpO1uwtWu0cUYcUQlVE1-70BwQ7bQJnoP7gdsND6GOUUs-W2WlyuMUktu8TK0CxxJS9hUf3PpdlxXmQcOfz/s1600/bttp-16.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwI0HunU8RX1wwzYsC_zdqt6B0pZzvhECtmH6TLaawspary95msGgDYAFNGVnH21xks37P99eJzLk6uiBPgRyNK75sAT1E7Q9SY5PmGI3TzKVJLVpiUGcqdLKbJQdx1luk_vU4bcNl90sJ/s400/bttp-17.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYyphbl75Nh7AbwRehnkwWe7RWZPcLD1WJ4USB0NjPOoueLdnO2EydoNfjvNUASH7rs9f0PBXy-pnoEeknVatsHN2gq64DDJwTWRYK2VN5tWChLAxwc2VPl0LV-Hxm_ui8sdpH7DsrczD5/s400/bttp-19.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYnYK0gheFi01cMXLklSwQlgSuRhbGofKec-NiAbi7Mzn7BZItmaL7VYMcVo1b0gvyI8Oh1PTpXxaDQInBk2buvQR3_UcldwcziJ_j3FV6Dz_adZ5iKxKlNDcsRRRs-WYmjreOmGliyOy_/s400/20.png

အေပၚက ပံုေတြကို စိတ္ႀကိဳက္ထည့္ၿပီးၿပီဆိုရင္ ေအာက္ကတဆင့္ကို ထပ္ျဖည့္ေပးလိုက္ပါ။

အဆင့္(၃)

<head> ကို Ctrl+F နဲ႔ ရွာၿပီး သူ႕ရဲ႕ ေအာက္မွာ ေအာက္က 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 ေပးလိုက္ပါ။ အားလံုးအဆင္ေျပမယ္ထင္ပါတယ္။ က်ေနာ္လည္း ျပန္ၿပီးရွာရွာေနရလို႔ ကိုယ့္ဘေလာ့မွာကို ထည့္ထားတဲ့သေဘာပါ။

Ref: Allblogtool

Posted in: Blog ဆုိင္ရာနည္းပညာ,ကုဒ္မ်ား