Cara Memasang Tombol Back To Top and Back To Down

Cara Memasang Tombol Back To Top And Down - pada postingan kali ini, saya akan share Cara Memasang Tombol Back To Top And Down, saya mendapatkan script di bawah dari mas yazid zidan, entah ia juga dapat dari mana saya tidak tahu :v,Tombol Back To Top and Back To Down adalah yang saya pakai di sidebar, bisa kalian lihat kan. apa sih tujuan Memasang Tombol Back To Top and Back To Down, tujuannya adalah untuk mempermudah pengunjung melihat ke atas halaman atau kebawah, baik di halaman homepage atau halaman posting, Berikut tutorial pemasangannya :

1. Masuk ke akun blogger masing masing

2. Klik Template -> Back-up dlu template anda -> Edit HTML

3. Lalu cari kode ]]></b:skin> untuk mempermudah pencarian kode gunakan CTRL+F/F3

4. Copy kode dibawah lalu taruh tepat diatas kode ]]></b:skin>

/* Tombol Atas dan Bawah Dengan jQuery
----------------------------------------------- */
.tombol_atas{
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/AVvXsEiHJ19AISumhUVn78-_4LhhanBEHDfe7XDaAIl2d4zAKFtU1y0l-sY8HgEerH-OMCKVr1nJZ-pPT4c2UymyNOgsV5oggICrB_abherMPf31bJEq1chfeNZIwBzLH77xGZw_1LajxBZxlTE/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);
}
.tombol_bawah{
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/AVvXsEgf4pXU0Gd1wxFD1NhfujPyNr56sTsj_Soj0mnqP4zshF8uTFxdtbETWxHDcugjDJEcSZyL8gd5hRa7CkJCIPtZQyvsHzX372Z67X-WsmdX0j0MgV_FwAnMwlwKbkHnU9aJ3erenNKd7T8/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);
}

5. Eits blum selesai, cari kode </body>6. Copy kode dibawah ini lalu taruh tepat diatas kode </body> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='tombol_atas' id='tombol_atas' style='display:none;'/>
<div class='tombol_bawah' id='tombol_bawah' 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');
$('#tombol_atas').fadeIn('slow');
$('#tombol_bawah').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#tombol_atas,#tombol_bawah').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#tombol_atas,#tombol_bawah').stop().animate({'opacity':'1'});
});
$('#tombol_bawah').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#tombol_atas').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

7. Lalu klik simpan / save

Q : Apakah script di atas memperberat blog ?
A : Tentu saja, tapi tidak terlalu berat kok :D