♫♪၀ါသနာတူMember ၀င္ထားၾကတဲ့ မိတ္ေဆြမ်ား♪♫

4/03/2013

How to add go to top and go to bottom buttons Using jQuery in Blogger


blogger widgets, blogger navigation

Demo

You can see a live demo on my blog, the buttons are located on the right side.

How to put Go Up and Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button


Step 2. Select the "Expand Widget Templates" box

Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above this code, paste this one:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23OUCxRMn135Ws5eYW-H50DsKEuNpPvO2E7f9ak-SEhs7W25fNgKa7ZjhLiXmJw4HZPk9ciwgNxjiGB2sNNjRH81_QXwiJbaPCBrtTobtYEtwXKqSCsReRwJcVPwm7NY38PFobD2UaKA/s16/arrow_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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCjyCIWWoJLuvHLPXWpg_D0v_8SWA7wMIEtPCZrEEd6Y7XS-mYjpCGHIGRXxw2ciK6Hc905hbpiOdavKLTDP1jMAlrPgXcpvqwPleV8vjaGPrHXbGVy6j0npRPSr0BuslyWOMZ4snMoM/s16/arrow_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);
}

Note:  - in green are some annotations that explains what styles you can modify on their left side.
           - You can change the arrows by changing the URLs in blue.
           - To change the buttons background color of buttons, change the white text with your color

Step 5. Now search (CTRL + F) for this tag:

</body>

Step 6. And just above it, paste the following code:

<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>

Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

Step 7. Finally, Save your Template. Enjoy!


by http://helplogger.blogspot.com/2013/03/how-to-add-go-to-top-and-go-to-bottom.html

0 comments:

Post a Comment

ခုလိုအားေပးတဲ့အတြက္ အထူးေက်းဇဴးတင္ပါတယ္. ♪♫#*♥winaung♥*#♫♪...၏

ဆိုဒ္ေလးမွေႏြးေထြးစြာၾကိဳဆိုပါ၏..သည္ဆိုဒ္ေလးစတင္သည္ခုႏုစ္

(03/october/2012)မွသည္ဆိုဒ္ေလးသည္နည္းပညာမ်ား

ဆာ႕၀ဲလ္းမ်ားေလ႕လာရွာေဖြရင္းစတင္စုေဆာင္ထာသည္ဆိုဒ္ေလးၿဖစ္ပါသည္..

ကၽြန္ေတာ္လိုခ်င္တဲ႕ခ်ိန္မွာရွာရတာလြယ္ကူေအာင္.သည္ေနရာေလးမွာစုထာခ်င္းၿဖစ္ပါသည္...

မိတ္ေဆြမ်ားလဲလိုခ်င္တာမ်ားခြင္႕ေတာင္းစရာမလိုယူသြားႏိုင္ပါသည္ .....ရႊင္လန္းခ်မ္းေၿမ႕ပါေစ..

မိမိဘေလာ့ကို submit မွန္မွန္ လုပ္ေပးျခင္းျဖင့္ မိမိဘေလာ့ ျမန္ဆန္မည္ရွင္းလင္းမည္ ေမာက္တင္ျပီး က်လာတဲ့ေဘာက္ထဲမွာ မိမိဘေလာ့လိပ္စာ ထည့္ကာ Submit ကလစ္လိုက္ပါ ဒါဆို ေနာက္ဇယားတစ္ခုမွ သင့္အီးေမးကို ထည့္ျပီးSubmit လုပ္လိုက္ပါ

<<<အထူးဧည့္ သည္ေတာ္မ်ား>>> Flag Counter

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites