Sayfa İle Hareket Eden Yukarı Aşağı Butonları

Bloggerda genelde galeri ve magazin oluşturan bloglar için vazgeçilmez olan bu eklenti ile bloglarında gelen ziyaretçilerin ve kendilerinin rahatça gezmeleri için ideal bir eklenti.Sayfa ile birlikte hareket eden bu eklentidir bu.Uzun makaleler ve uzun fotoğraf paylaşılan bloglarda bence olmazsa olmaz bir eklenti bu muhakkak bulundurmaları gerekir diye düşünüorum.Görünümü oldukça güzel ve farklı bir stilde olan bu eklenti siz isterseniz kendi tasarladığınız bir resim varsa yani aşağı yukarı butonu onun ilede değiştirebilirsiniz.Şimdi gelelim anlatıma.

1-Blogger Panel Bölümünden Şablon Diyoruz

2-Daha Sonra Karşımıza Çıkan Bölümde HTML'yi Düzenle Diyoruz

3-Son Olarak Witget Şablonlarını Genişlet Kutusunu İşaretliyoruz.

CTRL+F tuşuna basın ve ]]></b:skin> kodunu bulun aşağıdaki kodları üstüne yerleştirin.

/* Sayfa İle Hareket Eden Yukarı Aşağı Butonları jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* İki Buton Arasındaki Sınır Mesafesi */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWXu8QB0cdlhEoEAxXGk-TBCXvB4IeV1chjdetKYJE3FSjMBswxTfKAAmqGhQ2AsjJ-EVC8EBY-i0Wmuwqk2oGtALaRYjdPyldpJYajNNncTmpwm1rfNK-SoYOH11_0ooKVECWSt83dM/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button Genişliği*/
height:20px; /* Button Yüksekliği*/
bottom:280px;  /* Sayfa Alt Bölüm Mesafesi*/
right:5px; /* Butonu Sağ veya Sol Tarafa Alma (Sol İse Right Left Olarak Değiştirebilirsiniz */
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; /* İki Buton Arasındaki Sınır Mesafesi */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyg_aKqXmjXqEOtEeCUk34QZEhc6IXQ6fHuOfFOrc8p0W-XIjK70S0AYn_i9hWH-pOjJ8b_T3wo62UbivfmJWL8ZIHhDP-NV8-GsQd4yFD6P59t_YKw1qT6XlNlhh8i6q9KLAp9vyEgLE/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button Genişliği*/
height:20px; /* Button Yüksekliği*/
bottom:242px; /* Sayfa Alt Bölüm Mesafesi*/
right:5px; /* Butonu Sağ veya Sol Tarafa Alma (Sol İse Right Left Olarak Değiştirebilirsiniz */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Bu kod içersinde özelleştirebileceğiniz yerler yukardaki kod içersinde renklendirdiğim bölümlerdir.İlk renklendirdiğim yukarı çık bölümü için diğeri ise aşağıya in bölümü içindir.

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

İşlem bu kadar.