Cara Mudah Memasang Tombol Back to Top Fast Loading & Responsive

Baca Juga

Cara Mudah Membuat / Memasang Tombol Back to Top Fast Loading & Responsive di Blogger.

TOMBOL Back to Top / Scroll to Top atau Kembali ke Atas adalah semacam menu navigasi yang memudahkan pengunjung untuk kembali ke bagian atas halaman blog secara cepat, tanpa perlu scroll mouse atau "usap-usap" screen.

Jika halaman discroll ke bawah, tombol Back to Top ini baru muncul. Begitu diklik, maka halaman yang sedang dibuka akan otomatis bergerak ke bagian teratas.

Contohnya ada di sebelah kanan bawah halaman blog CB ini.

Banyak sekali tips cara membuat atau memasang tombol Back to Top ini. CB juga kalo tidak salah sudah beberapa kali share tips dan kodenya.

Namun, kali ini mempertegas dan memberi pilihan terbaik kode Back to Top yang SEO Friendly, User Friendly, Fast Loading, dan Responsive. Kodenya dari Dynamic Drive.

Cara memasangnya juga gak ribet, tidak perlu edit HTML, namun hanya dengan menambahkan widget di bagian Layout (Tata Letak). Ini yang membuat tombol Back to Top menjadi ringan.

Cara Termudah Pasang Tombol Back to Top

1. Di dashboard blog Anda, klik Layout > Add a Gadget > Pilih HTML/JavaScript
2. Judul Kosongkan!
3. Copas kode berikut ini di kolom Content:

<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/AVvXsEgcCf8Avi86vOEWxafjYXW-M9UKVjaXQLNFNZW5puOcxLGj99RsYfAO0JitpvXoKHeZqDeLh_3r1QMdu5uqmI1ReJjQUU4cksgEDiLVAIG0xFr7mvCrQsKGgVmA81LdzbqPNRyptKTW6BA/s50/back+to+top+button.gif" />',
    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. Anda bisa ganti icon panah atau gambar back to top-nya di bagian URL Gambar yang warna merah. Koleksi gambar panahnya bisa dipilih di Gambar Tombol Back to Top Blogger.

5. Save!
6. Pindahkan widget di sideba blog yang baru terpasang itu ke bagian paling bawah!
7. Save Arrangement!

Silakan cek, buka blog Anda, refresh (F5). Jika tidak muncul, kemungkinan besar template blog Anda belum dipasang link ke kode jQuery. Silakan pasang jQuery. Umumnya template blog seo friendly terbaru sudah dipasang jQuery.

Demikian Cara Mudah Memasang Tombol Back to Top Fast Loading & Responsive. Good Luck & Happy Blogging! (http://www.contohblog.com).*