Cara Menampilkan Tombol Back to Top (Kembali ke Atas) Blogger

Cara Menampilkan Tombol Back to Top (Kembali ke Atas) Blogger

Tombol Back to Top memudahkan kita dan pengunjung kembali ke bagian teratas halaman blog dalam satu klik, tak perlu Scroll mouse atau "gesek-gesek" layar SmartPhone. Cukup klik, maka halaman akan otomatis meluncur ke bagian atas.

Dengan adanya Tombol Back to Top (Kembali ke Atas) ini Blog jadi makin ramah pengguna alias User Friendly. 

Cara Memasang Tombol Back to Top

1. Layout > Add a Gadget > pilih HTML/JavaScript

2. Judul kosongkan!

3. Copas kode berikut ini:

<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/AVvXsEg-9dFMSWoEYsG7te1uio-eYixlW8mWr1tX9ePhf00r4oQFG5TR8U6z_5f0eb4lLhLWpMdG4NzQQHtqIcu9C2BtMOR9ymzgT1BfvGArZSOlDrS-D_Jz9UtY97mvzvZ8eZfJIrSzsM6PjwY/s50/back+to+top+button.gif" alt="back to top"/>', 

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

</script>

4. Save!
5. Pindahkan (gusur/tarik) widget yang baru terpasang ini ke posisi widget paling bawah. Gak juga gak apa-apa.

Save !

Demikian Cara Menampilkan Tombol Back to Top (Kembali ke Atas) Blogger.*