How To Add Go To Top/Bottom Buttons Using JQuery In Blogger

ဒီေန႔ တင္ေပးလုိက္တဲ့ ဘေလာ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့မွာ Go To Top And Go To Bottom Buttons (အေပၚ နွင့္ ေအာက္ တက္ဆင္ လုိ႔ရတဲ့ ခလုဒ္ေလး ကုိ JQuery နည္းလမ္းေလးျဖင့္ ထည့္သုံးခ်င္တဲ့ ဘေလာ့ မိတ္ေဆြမ်ား အတြက္ ထပ္ၿပီးွမွ်ေ၀ေပးလုိက္ပါတယ္။ မိမိဘေလာ့ ကုိ ViSit ၾကည့္႐ွု သူေတြအတြက္ အလြယ္တကူ အေပၚ နွင့္ ေအာက္ တက္ဆင္ လုိ႔ရတဲ့ ခလုဒ္ေလး တပ္ေပးခ်င္တဲ့ သူမ်ား အတြက္ အလြန္အဆင္ေျပလွတဲ့ နည္းလမ္းေကာင္းေလးပါ။

၁။Sign In Blogger

၂။ Template

၃။ Edit HTMl

၄။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။

]]></b:skin>

၅။ ေတြ႕ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္ကေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

/* Up and Down Buttons with jQuery By MTM

----------------------------------------------- */

.button_up{

padding:7px; /* Distance between the border and the icon */

background-color:white;

border:1px solid #CCC; /* Border Color */

position:fixed;

background: white url(http://mr-thangming.ucoz.com/Images/MTMarrow_up.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Button's width */

height:20px; /* Button's height */

bottom:280px; /* Distance from the bottom */

right:5px; /* Change right to left if you want the buttons on the left */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

.button_down{

padding:7px; /* Distance between the border and the icon */

background-color:white;

border:1px solid #CCC; /* Border Color */

position:fixed;

background: white url(http://mr-thangming.ucoz.com/Images/MTMarrow_down.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Button's width */

height:20px; /* Button's height */

bottom:242px; /* Distance from the bottom */

right:5px; /* Change right to left if you want the buttons on the left */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

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

</body>

၇။ ေတြ႕ၿပီးဆုိရင္ </body> ရဲ႕အေပၚမွာ ေအာက္ကေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>



<div class='button_up' id='button_up' style='display:none;'/>

<div class='button_down' id='button_down' style='display:none;'/>



<script>

//<![CDATA[

(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();



$(function() {

var $elem = $('body');

$('#button_up').fadeIn('slow');

$('#button_down').fadeIn('slow');

$(window).bind('scrollstart', function(){

$('#button_up,#button_down').stop().animate({'opacity':'0.2'});

});

$(window).bind('scrollstop', function(){

$('#button_up,#button_down').stop().animate({'opacity':'1'});

});

$('#button_down').click(

function (e) {

$('html, body').animate({scrollTop: $elem.height()}, 800);

} );

$('#button_up').click(

function (e) {

$('html, body').animate({scrollTop: '0px'}, 800);

} );});

//]]>

</script>

၈။ အားလုံး ထည့္ၿပီးရင္ေတာ့ Save Template Button ေလးကုိ နွိပ္ေပးလုိက္ပါ။ ၿပီးပါၿပီး>>>>အဆင္ေျပၾကပါေစ။