Cara Membuat Tombol Back To Top di Blog

Tombol Back To Top adalah tombol yang ditunjukkan untuk membawa seorang pembaca sebuah website atau blog untuk kembali ke bagian atas website atau blog tersebut. Tombol ini biasanya terletak di bagian kanan atau kiri bawah blog. Dan kali ini ane akan memberitahukan cara membuat tombol back to top di bagian kanan bwah halaman web.

Berikut langkah-langkah dalam Membuatnya.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya akan tetap berada di sudut kanan bawah.
4. Pilih mode HTML/Javascript.
5. Masukan kode html berikut.

<!--Back to top script-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWfsc-hqX32y2MoVmcLXE9hbCxCseqw4gwFccrg3T46cCx0Ge_MshuHam7RnC805UtXeplDk7hYQAzKaXbfJ73HfrO92ikKhT-ShvF-eutfPD2jy5KyhzVPxy4A6SeI0IQkNDq-jJbBXi/s1600/back+to+top13.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 //not IE or IE7+ browsers in standards mode
            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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
<!--Back to top script end--></script>

Catatan:

• Jika telah terdapat script berwarna biru pada Template yang sobat miliki, maka hapuslah kode tersebut agar tidak terjadi bentrok antar Javascript.
• Kode-kode berwarna hijau bisa sobat ubah:

- Starline: Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.
- Scrollto: Posisi tujuan tombol back to top, dihitung dari paling atas. 0 artinya 0 pixel dari atas halaman.
- Scrollduration: Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.
- Fadeduration: Kecepatan atau durasi fade, fade adalah gerakan muncul. Yang pertama nilai fade in, dan yang kedua nilai fade out.
- Offsetx: Posisi tombol back to top, semakin ditambah maka akan semakin merapat ke dalam.
- Scroll Back To Top: title pada tombol

• Kode berwarna merah bisa sobat ubah dengan gambar Tombol Back To Top yang sobat inginkan. Namun jika tidak diubah maka hasilnya akan seperti berikut.

 

Di bawah ini ada beberapa gambar untuk menyesuaikan selera teman2 JB semua:

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ynMvs1S01yVQYEG0cOOWugZhJYxxL1K-wDZNXB1HkJM2GDntKLGrZFf2oAywnZjFnhb7DIV8Mdg3Jxeo3hiE9VZbj_70E6bMWYkcYccFS5Wf4zfhDmst3N33xK24GhKZkmB6jZV84pB4/s1600/arrow-up-icon+%282%29.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nw7jtkdET28iirFGhOH1K7dAXzs57vdqkywcCQoXpPIczBMNN8h_Gc4edNleOmbkLlQ8fZv_mOoyv84C8g7R-8HpTQ3xdp-Si0BOI6g07Ap1aUfWPR9_CzkCc-DDskDCK8XgzLOOB3Dm/s1600/box-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmodk_e1uA15o0ZisxKESSykdNp87aaM7txXZwLbilYHzzm_VRJVi5k2iPjyHEoxHzCFXmEVY8tEjYpKIlGjeVMasqfDnlB4XWKQCnbUtBtgf31ldbGG64gpL-c90XWQqxR-AttM2oFt6y/s1600/arrow-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDxTgiPiAS9wqIwckY_7-oMvTTzP6gKjYKjZ2zYqDs7voRZrOozJcuZxg65o-09qJRA7YydZ8VR8Nw-TfVEVI3HUsIGS386uVPU-dmoSySjB4p5VI8Lfvah3hnY6bM90lZDEYEEQz3RIiI/s1600/Action-arrow-blue-double-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzwS7Q204EqL2DeusDa-3WMBaz_dJYzYEeS2mOGJtOtjCKD8nxyg8wssuzMrbtli5mMCFO9ovpgJSG__xRKgF2fUikqM1f1iY1GEqlXbMwQNu_7fXl1NvIhaFoteOKOorZ7f4LyzdXdqt/s1600/back+to+top15.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KUBoi6E2ZQ0JBhLgiJMDkkJ7nLGHy5jYZiOV46MlSrp6y9rL1tlyzDUDW6sDa2HZq9M8M2av_9oYUjgzJzrtPZ9yZCxARwXk_URg9jfZJcJD8q-5UflRldL8BLL6cXb7PPoJVoFDY8yS/s1600/back+to+top9.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg672qDsa9fbY9slZlIdVg8vfdRmNrA4cXNe2YV6VJs2TQWYFuXvLxXVLSTBP-xE7G1Qn6dtErbg2ehbHnJ6Jr1ZcUZq92TnW5phCcuICqcKmYNhDLr9Fn0uAyJd1sXyCTEKG-6Tel_87xX/s1600/back+to+top4.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jikfVdOUOzkoGggxykbrtk-zo2-J98W0NrrkPj9X9gEM2lCtnQ8v4lAA5zvZ15GUi0-bcHKjPDi0O2HUJGgPjPZEObsr8KFabczTK43_Qpdu2487lZbYHAJOxpDkl2xPyFKvwUOFC4aX/s1600/back+to+top10.gif"

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyiQrg79BQR9LWH8LVE4B3vAUYBOpztDwwhVrQnSOpC2SjSOJxUu1p8XGmOHMK2_0Nk8Yut0Kuex9VnNq_5cuDYO_Of0q22wdg24akFvLRHN6KUgoW9KxVOoPN-q2fVe6JhQh55W4vWY0/s1600/Back-to-top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_aiWZw97xQFrkI3ohgW6nvDPcr0KKuLHoYCAzZXpbgoL_F2a6LruDFrxZOeksJHCzqnTWq10SpGprxtFP0GUjiOkVhAC-abQggSv1eWAQj6EIhMzaZVrnyUA_GFEPnUePP2lfxexA-o/s1600/back-to-top.gif


6. Setelah selesai, maka klik Simpan.

Terima Kasih