Cara Membuat Fitur Back To Top Pada Blog

Sobat..

Bicara tentang blog, ada banyak hal fitur yang bisa kita gunakan tidak hanya untuk memperindah sebuah blog, namun juga berfungsi untuk memudahkan navigasi pengguna blog.

Kali ini saya akan berbagi tentang cara Membuat Fitur Back To Top.

Apa itu back to top?

Fitur back to top adalah navigasi yang terdapat di bagian bawah sebuah blog, yang memudahkan pengguna blog untuk kembali ke bagian paling atas dari sebuah blog.

Biasanya blogger membuat fitur ini menggunakan tanda panah ke atas.

Sebagai contohnya, kalian akan melihat tanda di bagian bawah blog ini.
Silahkan sobat lihat dan buktikan dengan cara menekan tombol , maka sobat akan kembali pada halaman atas blog ini.

Langsung saja kita lihat cara membuat fitur ini..

1. Buka Dashboard blog > pilih Tata Letak.

 2. Tambahkan gadget dimanapun sobat inginkan > pilih HTML/Javascript.

3. Isikan kode berikut pada konten konfigurasi HTML/Javascript yang sobat tambahkan, lalu simpan.

<!--Back to top script-->

<script type="text/javascript" >

var scrolltotop={
    setting: {startline:130, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7KZFasYf8Q5h6-dTQQfMtBOF_QNSny6GSIYajEMmONeOZPii9wkeSNfGyVm5dHVC4n1W_ew_h6Y8kStFbdMBLt5ExgVX6idiHpnsMr-yDBh3rU7eSvpugjlBlMrIUYgOla80DIe-tjs/s1600/Back-to-top2.jpg" />',
    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>

4. Pratinjau blog sobat sebelum menyimpan setelan yang baru dibuat.

Tarik kursor ke bagian bawah, maka akan terlihat fitur back to top yang sobat tambahkan.

Sebagai tambahan, sobat bisa mengganti tampilan fitur tersebut dengan menganti kode yang berwarna merah pada script di atas, dengan beberapa kode contoh gambar tampilan berikut..

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCNU0-ah1ZqgBqJmUMgts1ijIpaVBil2YzjkgLNnIkRBFVwlbr9KSODQbNR0jMo0itz2RG4TQWgM4PWS3G0PoBLQ-3UzhvmnTfAq5Yi2nTX5tfLUIAysF8TBSq2H-pVqGVclHllgV1aUTV/s1600/arrow-up-icon.png"

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

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ssDLaAw7kySK0RLzbg33WHNfuvNnLow3fEaKp0VpeS7m-vK2UEEINTtLqCKbuZvj-6iod5ZPZeW_MZlswKsEE-w6OyeGph8lA1mX6OiEgtD4sEku9Ex6NND2SW-C0AI5UgaaDniYzobK/s1600/Action-arrow-blue-double-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7KZFasYf8Q5h6-dTQQfMtBOF_QNSny6GSIYajEMmONeOZPii9wkeSNfGyVm5dHVC4n1W_ew_h6Y8kStFbdMBLt5ExgVX6idiHpnsMr-yDBh3rU7eSvpugjlBlMrIUYgOla80DIe-tjs/s1600/Back-to-top2.jpg"

Semoga artikel ini bermanfaat bagi sobat Kanaya's Corner yang baru saja belajar untuk membuat sebuah blog.

Jika ada saran, masukan atau komentar, silahkan tinggalkan komentar sobat di postingan ini.

Jika suka dengan artikel ini, jangan lupa like dan share ya sobat..

--  KANAYA'S CORNER  --