Add jQuery Scroll to Top to Bottom for Blogger

1. Buka Blogger–>Template—>Edit HTML
2. Tekan tombol keyboard CTRL + F untuk mencari  ]]></b:skin>  dalam HTML Editor blog
3. Copy dan paste kode CSS berikut ini, dan letakkan tepat diatas  ]]></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/AVvXsEhk_bhXT4rVDVo0tDfS-c5Ws9TjsiETjWuVDq4glGCZfzY8_ja3iMoWJopXG_FapFjgnrGGSh2TTo5u98lYFYII7CtN7ShCdNauygNxUyDYSsXTcPSdi2bphk2NA3q0TNMGgIJx-GZYMTY/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/AVvXsEiL_qq_jUPjlRY7ZsI2sDh562XeNJ7ou8S5M2lPMtdxPY4SGXH4u7NLuFJskb1acD7E9lV0M-fVFTmpHxM2khp8LugueRHZ0OBpj5vAQn6nRhtbrqwRyo_OqB_4iHT1uWUqq4GPhM6PuMs/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
   Kedua tombol akan ditampilkan disisi kanan halaman web. Jika Anda ingin menampilkannya di sisi kiri, maka ganti saja teks berwarna merah right yang ada di dua tempat dengan Left.  Demikian juga Anda bisa mengganti image tombol Arrow-Up (link warna biru … /arrow_up.png) dan Arrow-Bottom (… /arrow_down.png) dengan URL image lain yang Anda miliki.
   
   

   The Javascript

   Script Javascript dibawah ini akan berfungsi menggulung (scroll) halaman blog menuju ke atas dan bisa juga ke bawah dengan menggunakan  jQuery.

4. Kemudian Tekan tombol keyboard CTRL + F untuk mencari </body>
5. Copy dan paste script code di bawah ini dan letakkan tepat diatas  </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>

   CATATAN PENTING
   Jika blog Anda sudah memiliki jQuery plugin, silahkan HAPUS baris teks berwarna merah di atas.

   
   
6. SAVE TEMPLATE
7. SELESAI!

Source : http://www.makingdifferent.com/add-jquery-back-to-top-and-go-to-bottom-buttons-to-blogger/

Related Post : jQuery Scroll to Top Control : Cara balik ke Top Page

DEMO :  Dapat Anda lihat di blog ini di sebelah kiri bagian tengah halaman web.