Bagi yang belum memasang kode jquery, langsung saja ikuti langkah dibawah ini :
1. Login ke akun blogger Anda DISINI
2. Klik -> Template
3. Klik -> Edit HTML
4. Copy kode berikut dan letakkan tepat diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
5. Klik -> Save
Kode jquery telah terpasang pada template blog Anda.
Sekarang saatnya memasang widget tombol back to top di blog. Ikuti langkah berikut ini :
1. Klik -> Layout
2. Klik -> Add Gadget
3. Klik -> Add javascript/HTML
4. Copy kode dibawah dan paste-kan
<script type="text/javascript" >
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img width="64px" hight="64px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbZQk92U47ixRQHGXGl1mJ3fUXGrl7VOi8Kn7DTwZZ2OeuS0OHRSXblmb1l-yszXKd0kQMkeSp1dnrYRaippYwMhoKHOTXEkFMmRViMqhN8-394-BhTp9FnrULAG-bPnHjWYdHhnguvlYR/s1600/back+to+top.png" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
5. Klik -> Save
<script type="text/javascript" >
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img width="64px" hight="64px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbZQk92U47ixRQHGXGl1mJ3fUXGrl7VOi8Kn7DTwZZ2OeuS0OHRSXblmb1l-yszXKd0kQMkeSp1dnrYRaippYwMhoKHOTXEkFMmRViMqhN8-394-BhTp9FnrULAG-bPnHjWYdHhnguvlYR/s1600/back+to+top.png" />',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='')
mainobj.$control.css({width:mainobj.$control.width()})
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
5. Klik -> Save
6. Klik -> Save Settings
7. Selesai
Anda dapat merubah beberapa efek pada Tombol Back to Top tersebut. Untuk memodifikasi efeknya, perhatikan poin - poin dibawah ini :
1. Startline : Integer nilai pixel ke bawah dimana tombol back to top akan
dimunculkan. Menambah nilainya berarti tombol akan ditampilkan lebih ke bawah
setelah user scroll down. Nilai default di atas adalah 100.
2. Scroll Duration
: kecepatan scroll (dalam milidetik), semakin tinggi nilainya, maka
gerakan scroll semakin lambat. Defaultnya adalah 1000 (1 detik).
3. Fade Duration
: kecepatan atau durasi fading (dalam milidetik), nilai pertama adalah
nilai fade in dan yang kedua adalah fade out. Nilai defaultnya antara
500 dan 200.
4. Scroll To
: tujuan scroll setelah tombol di klik. Nilai 0 (dalam piksel) seperti
default diatas berarti scroll akan kembali ke bagian paling ujung atas
(titik 0). Menambahkan nilai berarti akan menurunkan titik tujuan
scroll.
5. Off Set X
: merupakan nilai posisi X tombol Back To Top (dalam piksel), semakin
ditambah maka semakin menjorok ke dalam. Defaultnya adalah 5.
6. Off Set Y
: merupakan nilai posisi Y tombol Back To Top (dalam piksel), semakin
ditambah maka semakin menjorok ke atas. Defaultnya adalah 5.
7. Anda dapat memodifikasi gambar (Tombol Back To Top) dengan mengganti URL gambar yang berwarna merah dengan URL tombol gambar yang Anda inginkan.
Demikian artikel saya mengenai bagaimana cara membuat tombol naik atau Back To Top di blog. Selamat mencoba.
