Cara Pasang Tombol Back to Top (Kembali ke Atas) di Blogger

Baca Juga

Cara Pasang Tombol Back to Top (Kembali ke Atas) di Blogger

JIKA Anda scroll ke bawah halaman blog ini, maka akan muncul tanda panah di sidebar kanan layar komputer atau smartphone Anda. Itulah yang dimaksud Tombol Kembali ke Atas (Back to Top Button).

Widget Back to Top Button ini memudahkan Anda, pengunjung atau pembaca, kembali ke bagian halaman paling atas. Karenanya, keberadaan tombol kembali ke atas ini membuat blog atau website menjadi ramah pengguna (user friendly).

Anda pengguna Email Yahoo! tentu tidak asing dengan tombol bergambar panah ke atas ini. Saat kita cek daftar email bagian bawah, tanda kembali ke atas (back to top button) akan muncul. Sekali klik, maka kita akan dibawa ke bagian teratas email.

Demikian pula di situs-situs modern, termasuk situs berita, Tombol Back to Top umumnya sudah dipasang demi kenyamanan dan kemudaha pembaca.

Cara Pasang Tombol Back to Top (Kembali ke Atas) di Blogger

Berikut ini cara memasang Tombol Back to Top di Blogger, sebagaimana dipasang di blog ini.Kodenya dimodifikasi dari Dynamic Drive. Cara memasangnya sangat mudah:

1. Template > Edit HTML
2. Copy & Paste kode berikut ini tepat di atas kode </body> yang ada di bagian paling bawah kode template Anda.

KODE BACK TO TOP

<script type="text/javascript" >//<![CDATA[
var scrolltotop={ 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://lh3.googleusercontent.com/-djDGtUlZYVg/VWZgc3OhARI/AAAAAAAAJik/9up-tcLb3icthtbooNPApn4oMTx07eBDQCCo/s50/back%2Bto%2Btop%2Bbutton.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>

3. Save Template!

Kode warna merah adalah link gambar panah yang bisa diganti atau dibiarkan. Pastikan dalam template Anda sudah terpasang link ke kode jQuery di atas kode </head> atau di bawah kode <head> seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

CARA LAIN
Anda juga bisa memasang kode Back to Top di atas di elemen widget blog. Caranya:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Copas kode di atas di bagian Content!
3. Save!

Jika tidak muncul, hapus kode //<![CDATA[ yang ada di awal dan kode //]]> di akhir.


Jika dilakukan dengan benar, kini Tombol Back to Top (Kembali ke Atas) di sudah muncul di halaman blog Anda. Wasalam. (http://www.komunikasipraktis.com).*