Cara Memasang Tombol Back To Top

Cara Memasang Tombol Back To Top-Selamat pagi sobat YHS Area.. Bagaimana kabarnya?? Dikesempatan kali ini saya akan membahas tentang Cara Memasang Tombol Back To Top. Tombol ini tidak hanya back to top. Tetapi juga ada back to down-nya. Enak kan? Dengan memasang tombol kita dapat mempermudah pengunjung blog kita untuk kembali ke atas atau ke bawah halaman. Kalau begitu ikuti saja caranya dibawah ini.

1. Masuk ke akun blogger anda.
2. Klik "Template".
3. Klik "Edit HTML".
4. Lalu cari kode ]]></b:skin>
5. Copy kode dibawah ini lalu letakkan tepat di atas 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/AVvXsEgzAzDKPSoIPO2_Rp1ccj_Q_RoiLeVWXWHsXZNPWNYUUOLTgvmU-6fAj3AUFDk1ABqq7pEnGCyn1HRPsutQdUDMQR_Qth7wqA-bUHqkzcZa0FWDGN95EZ4GqLNJmJsjxIJeNSUbQVf3deM/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/AVvXsEgMtAHKasMHgM5r9QaJntSnVM_7aKL4s41XfYAjZ6zuZThUW4KMVLikJdmYF-iIRsP62ywLTRXDo3RWISSLUVBs9hwdnByRIBMZ_AK_eiAmsBrlyJTmvhXUPcrC66JK1KLAmS8ftpHgO2s/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);}

6. Lalu carilah kode  </body>
7. Lalu copy kode dibawah ini dan letakkan 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>

8. Lalu klik simpan.

Mudah bukan?? Selamat mencoba sobat..