Cara Membuat Tombol Back To Top dan Back To Bottom

Cara Simple

Buatlah widget di tata letak > HTML/Javascript

Copy  Paste kode berikut

<a href="#"><img src="rainbow.gif" height="32px" width="32px"></a> 

Ganti rainbow.gif dengan alamat gambar, ganti 32px dengan ukuran yang anda inginkan.

Cara membuat Smooth Scroll Back To Top / Meluncur Dengan Lembut

helplogger style : sumber = http://helplogger.blogspot.com/2013/03/how-to-add-go-to-top-and-go-to-bottom.html

Buka Template > Edit HTML, klik kiri di area penulisan dan tekan CTRL+F

1.Buka area kode CSS dengan mencari kode berikut

 ]]></b:skin>

2.Diatas kode diatas, tambahkan kode CSS berikut

Kustomisasi:

Ganti teks warna biru dengan gambar arah panah

Ganti ...px disamping tulisan hijau untuk mengganti ukuran gambar

/kustomisasi

 /* 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: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FFZDKdd7v4pdYEzGtb_8Yo-rHvv3QdnLBsQv4hC_ntfgEItpWGnffoS0IWuIIOHIxZXNV4bEW9wVqe2q0vymFRSzoC1xOOkVv2pp_8taKD9Hoq36yvjMdgdBpxvm1c0lJrGCOoPJgZA/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/AVvXsEiiVUBjef6HphwAvZxBVtPqbr7-m5DxCmheRV_ciNH3_yKDuTn7Qi1seZnPyjKpzbR2FY-GEJPg0gVMQ58rKZ38wIecnlqG9YPoW2rzE3n9u6vUs2R_UtURrMGrbm0eU8aJwKoHSszQMiY/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);

}

3.Buka area akhir wilayah </body> dengan mencari kode </body>

4.Diatas </body> copy paste kode javascript berikut

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

5.Simpan Template

Komentar bila ada kesalahan