Tambahkan jQuery Kembali ke Atas dan Bawah Tombol Kembali ke ke blogger

Kali ini saya akan berbagi tutorial tentang menambahkan tombol Back toTop dan Kembali kebawah. Langsung dah cek. Teidak perlu berlama-lama ngoceh. hehe..

Bagaimana cara menginstalnya?

1. Seperti biasa Login dulu ke Blogger > Template > Edit HTML.
2. Centang pada Expand Template Widget.
3. Cari (menggunakan CTRL + F) untuk ]]> </ b: skin> di blog Anda HTML.
4. Copy dan paste di bawah kode CSS tepat di atas ]]> </ b: skin> .

/* 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/AVvXsEg9vquSbp-oKmn5RBqOL2h3Lbe54LZ8uHZjO0VXroAHyTpnezYCzU4wovEXM0JfFtmoaQyLkcnY5oHTnNFzjQcoF75fD22Ghm3rQvMlCh1DGitwqHRRyid4NvI9TkHVID9ADdN42a3grgc/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/AVvXsEgd07u9bWN1BqOWkwKw3bzy9zqP8dAUJMPRI2KCDe9c8ZkbZvdrETrjlgZrrfTRzQ3eOIqthSn5bTOfLwoIOBGSGIPPwjbBmCAl1BrtEqyqEXbc-nL5zcRsIh2WFfF2o-K6Jzi2qmVvtPc/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);
}

Catatan: tombol ini akan berada disebelah kanan. jika ingin berada disebelah kiri maka ganti right menjadi left. Jika ingin disebelah kiri.

5. Selanjutnya mencari </ body>

6.Copy dan paste kode di bawah ini tepat di atas </ body>

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

 Jika blog Anda sudah mempunyai plugin jQuery. Hapus Kode diatas yang berwarna merah.
Selamat Mencoba....