Blogger için farklı eklentiler paylaşmaya devam ediyoruz. Bildiğiniz gibi birçok web sitesinde standart bir "yukarı çık butonu" bulunur. Ancak "aşağı in" butonu nadir olarak görülmektedir. Şimdi sizlerle hem yukarı çık hem de aşağı in butonunu birlikte paylaşıyor olacağız. Böylelikle web sitenize oldukça işlevsel bir özellik kazandırmış olacaksınız. Aşağıdaki kodları hiç değiştirmeden direkt HTML/JavaScript adlı bölüme eklemeniz yeterli olacaktır. Hepsi bu kadar...

AYRICA: Blogger için Otomatik Çalışan Copyright Bilgisi

<div class='button_up' id='button_up' style='display:none;'></div>
<div class='button_down' id='button_down' style='display:none;'></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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>
<style>
.button_up {
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(http://2.bp.blogspot.com/-yU91VSRT1Eo/Uj68vS9u07I/AAAAAAAABew/bMq2kpMLYec/s1600/up+arrow.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:300px;
right:5px;
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;
background-color:white;
border:1px solid #CCC;
position:fixed;
background: white url(http://4.bp.blogspot.com/-t5Y-GtLGpCU/Uj68vE0y3uI/AAAAAAAABes/urmKppFC-8o/s1600/down+arrow.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:262px;
right:5px;
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>