MiTB: Back to Top button ေလးထည့္နည္း

10:03 AM | ေရးသားသူ@Admin@ Unknown | | Edit Post

ဒီတစ္ခါေရးမယ့္ အေၾကာင္ေလးကေတာ့ မိမိ ဘေလာ့မွာ စာမ်က္ႏွာ ရွည္ေနရင္ အေပၚကို ျပန္တက္တဲ့ေနရာ အသံုးျပဳဖို႔အတြက္ပါ က်ေနာ့္ ဘေလာ့ ေအာက္မွာ
အေနနဲ႔ ၾကည့္ ႏိုင္ပါတယ္ ဒီေကာင္ေလးကေတာ့ ဘေလာ့ဂါ သမားေတြ အတြက္ မရွိမျဖစ္ လိုအပ္တဲ့ Plug in ေလးတစ္ခုပါ jump to top လုပ္နည္းေလးေတြကိုေတာ့ ေတာ္ေတာ္ မ်ားမ်ား ရွိပါတယ္ ဒါေပမယ့္ က်ေနာ္ၾကိဳက္တဲ့ JQuery နည္းေလးပါ သူငယ္ခ်င္းတို႔လဲ သေဘာက်ၾကလိမ့္မယ္လို႔ေမွ်ာ္လင့္ပါတယ္ ကဲစလိုက္ၾကရေအာင္ဗ်ာ

ပထမဆံုးအေနနဲ႔ Design=>>Edit HTML ကိုသြားလိုက္ပါ။

expanded Wedget ကို အမွတ္ေလးေပးလိုက္ပါ

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

<style type='text/css'>
#amazi {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #cococo;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:30px;left:20px;cursor:pointer;color:#444;text-decoration:none;border:4px solid #9AFE2E;}
</style>
<script src='http://yourjavascript.com/22951137813/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr("href");
            if ($(window).scrollTop() != "0") {
                $(this).fadeIn("slow")
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == "0") {
                    $(scrollDiv).fadeOut("slow")
                } else {
                    $(scrollDiv).fadeIn("slow")
                }
            });
            $(this).click(function() {
                $("html, body").animate({
                    scrollTop: 0
                }, "slow")
            })
        }
    });
    $(function() {
        $("#amazi").scrollToTop();
    });
</script>
<a href='ဒီေနရာမွာ မိမိရဲ့ဘေလာ့လိပ္စာထည့္ပါ' id='amazi' style='display:none;'>^^အေပၚသို႔^^ </a>

preview နဲ႔ အရင္ၾကည့္လိုက္ပါ error မတက္ရင္ေတာ့ Teamplate ကို save လိုက္လို႔ ရပါျပီ ။လုပ္ေဆာင္ခ်က္ ျပီးဆံုးသြားပါျပီ။

ဒီ javascript ==> http://yourjavascript.com/22951137813/jquery.min.js' ေလးကိုေဒါင္းေလ့ာယူျပီး မိမိကိုယ္တိုင္ upload တင္ျပီး သံုးရင္ပိုအဆင္ေျပပါတယ္

ျပန္ျပင္ရန္ အက်ယ္ width:100px; ေနာက္ခံအေရာင္ background-color: #cococo; မိမိထားလိုတဲ့ေနရာ ;bottom:30px;left:20px; ေအာက္ေခ် ဘယ္ဖက္ ညာဘက္မွာထားခ်င္ရင္ေတာ့ right လို႔ ျပန္ျပင္လို႔ရပါတယ္ ဒါကေတာ့ ;bottom:30px ေအာက္ေခ်ကေနအေပၚသို႔ 30px အျမင့္ပါ ကိုယ့္တိန္းပလိတ္ႏွင့္ ကိုက္ညီေအာင္ ျပန္ညွိယူပါ။ ဒါကေတာ့ left:20px လက္၀ဲဘက္ကေန 20px အကြာမွာထားမယ္လို႔ သတ္မွတ္လိုက္တာပါ လက္ယာဘက္မွာထားမယ္ ဆိုရင္ေတာ့ right:20px (သို႔မဟုတ္) right:မိမိထားလိုတဲ့အကြာအေ၀းနံပါတ္px လို႔ သတ္မွတ္ျပီး မိမိ Teamplate နဲ႔ ကိုက္ညီေအာင္ညွိယူပါ အားလံုးအဆင္ေျပၾကပါေစ။