kp3နည္းပညာ၊၁၆၇၊ဘေလာ့မွာ"Scroll to Top" button အသစ္ေလးထားခ်င္ရင္

ဒီေန႕တင္တဲ့ Post ေလး ကေတာ့အသစ္လို႔ေျပာရင္လည္းရပါတယ္၊ ဘာလဲဆိုရင္ Scroll to Top button
ေလးပါ၊ ေအာက္မွအေပၚသို႕တက္တဲ့ Code ေလးပါ။ ဘေလာ့တိုင္းမွာေတာ့သံုးထားတာကိုေတာ့ေတြ႕
ရပါတယ္၊ ဒါေပမယ့္ အခုတင္တာေလးကေတာ့အေဟာင္းေတြနဲ႕ေတာ့မတူပါဘူး၊က်ေနာ္ေအာက္ကျပထား
တဲ့ပံုေလးအတိုင္းေပၚလာမွာပါ၊ဒါေပမယ့္ပံုကေအာက္ေရာက္မွေပၚမွာပါ၊အေပၚေရာက္ရင္ Auto ေပ်ာက္သြား
တယ္သူမ်ားနဲ႕မတူ ေအာင္ သံုးခ်င္တဲ့မိတ္ေဆြေတြအတြက္ပါ၊ၾကိဳက္ၾကမယ္လို႕ေတာ့ထင္တာဘဲ၊ေအာက္မွာ
Code နဲ႕တကြထည့္ နည္းေလး။ အခုအားလံုးနမူနာၾကည့္လို႕ရေအာင္က်ေနာ္သံုးျပထားပါတယ္၊
အဆင္မေျပရင္လည္းအေၾကာင္းၾကားေပးပါ။။။။။ေအာက္ပံု

                                                                     
၁။Dashboard

၂။Layout

၃။Edit Html

ေအာက္က Code ကိုရွာပါ၊Ctrl+F ရွာပါ

]]></b:skin>

ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ။

/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

ေအာက္က Code ကိုထပ္ရွာပါ။

</body>

ေတြ႕ျပီဆိုရင္ေအာက္မွာေအာက္က Code ကိုထည့္လိုက္ပါ။

<a href="#" id="toTop">^  အေပၚသို႕</a>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/

$(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() {
$("#toTop").scrollToTop();
});
</script>

၄။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

BLOGGER TUTORIAL

• Kp3နည္းပညာ၊၄၇၈၊ဘေလာ့CommentsFormကိုအလယ္မွာထားနည္း
• Kp3နည္းပညာ၊၄၄၄၊။ဘေလာ့ဂါ Officer ရဲ႕ဝန္ေဆာင္မူနည္းပညာသစ္Dynamic Views ၅ခု
• Kp3နည္းပညာ၊၄၄၁၊Kp3နည္းပညာသစ္မိမိရဲ႕ဘေလာ့ပိုစ္ေတြကိုCopyမရေအာင္ကာကြယ္နည္း
• Kp3နည္းပညာ၊၄၄ဝ၊Kp-3နည္းပညာသစ္မိမိရဲ႕ဘေလာ့ Tamplate ကိုေဘာင္ခတ္နည္း
• Kp3နည္းပညာ၊၄၃၇၊ဘေလာ့ Comment Form အေပၚမွာမွတ္ခ်က္ေလးထည့္ခ်င္ရင္
• Kp3နည္းပညာ၊၄၁ဝ၊ဘေလာ့ဆိုက္ဘား Title ေရွ႕မွာလြယ္ကူစြာ Logo ပံုေလးေတြထည့္နည္း
• Kp3နည္းပညာ၊၄ဝ၆၊ဘေလာ့Static Pages မွာ Read More ျဖဳတ္နည္း
• Kp3နည္းပညာ၊၄ဝ၅၊ဘေလာ့ကို Internet Explore မွာဖြင့္မရရင္ဘယ္လိုလုပ္မလဲ
• Kp3နည္းပညာ၊၄ဝ၄၊ဘေလာ့ဆိုက္ဘားေခါင္းစဥ္မွာေနာက္ခံပံုလြယ္ကူစြာထည့္နည္း
• Kp3နည္းပညာ၊၄ဝ၂၊ဘေလာ့ Blogger Template Designer ကေန Font လွလွေလးေတြရပါျပီ
• Kp3နည္းပညာ၊၄ဝဝ၊ဘေလာ့မွာCSS3သံုးျပီးပိုစ္စလံုးေတြကိုအၾကီးအေသးေျပာင္းနည္း
• Kp3နည္းပညာ၊၃၉၆၊ဘေလာ့ကိုHandဖုန္းကေနၾကည့္ရန္ဘေလာ့Officerရဲ႕အေကာင္းဆံုးနည္းပညာသစ္
• Kp3နည္းပညာ၊၃၉၁၊ဘေလာ့မွာ YouTube သီခ်င္းေတြကိုလြယ္ကူစြာပိုစ္မွာတင္နည္းအသစ္ေလး
• Kp3နည္းပညာ၊၃၈၉၊ဘေလာ့Site Feed အတြက္အေကာင္းဆံုးဘေလာ့ Officer ရဲ႕ဝန္ေဆာင္မူအသစ္
• Kp3နည္းပညာ၊၃၈၃၊ဘေလာ့ Comment မွာ Facebook Like Button ထားနည္း
• Kp3နည္းပညာ၊၃၈ဝ၊ဘေလာ့ကို Hand-Phone မွာဖတ္ရတာအဆင္ေျပေအာင္လုပ္နည္း
• Kp3နည္းပညာ၊၃၇၉၊ဘေလာ့ရက္စြဲေတြျပတဲ့ေနရာမွာUndefined ဆိုျပီးေပၚေနရင္
• Kp3နည္းပညာ၊၃၇၃၊ဘေလာ့မွာSocial Bookmarking Tool Bar အသစ္ေလးသံုးခ်င္ရင္
• Kp3နည္းပညာ၊၃၆၁၊ဘေလာ့ Comments ေတြကိုKp3ရဲ႕ Scroll List ပံုစံေျပာင္းနည္း
• နည္းပညာ၊၃၅၆၊Kp3 ရဲ႕ဘေလာ့ Labels ေတြကို Auto Scroll လုပ္နည္း
• နည္းပညာ၊၃၅၅၊ဘေလာ့Postေနရာမွာ Add A Gadget ထည့္မရခဲ့ရင္
• kp3နည္းပညာ၊၃၅၂၊ဘေလာ့မွာ Kp3 ရဲ႕Page Views / Post Views Counter ထည့္နည္း
• kp3နည္းပညာ၊၃၄၆၊ဘေလာ့ပိုစ္ Title ကို Marquee သံုးျပီးလုပ္နည္းေလးလာပါျပီ
• kp3နည္းပညာ၊၃၄၄၊အျခားလင့္ခ္ေတြကို Mouseနဲ႕ေထာက္ရင္မူးရင္းလင့္ခ္ေပၚေအာင္လုပ္နည္း
• kp3နည္းပညာ၊၃၂၉၊ဘေလာ့မွာ KP-3 TABLE CONTENT ထည့္နည္း

Posted in: BLOGGER TUTORIAL