Membuat tombol Back To Top pada Blog


Membuat tombol Back To Top sangat bermafaat bagi seorang pengunjung, tombol ini berfungsi untuk mempercepat scrolling sehingga dapat kembali kebagian atas sebuah situs hanya dengan sekali klik. Tombol ini biasanya terletak dibagian pojok kanan bawah.

Oke langsung saja ke tahap pemasangannya.
Langkah-langkah membuat tombol back to top.
  • Login ke akun Blog anda.
  • Pilih menu “Tata letak”.
  • Pilih “Tambah gadget” (pilih widget yang paling bawah, agar tidak mengganggu widget yang lain).
  • Pilih Widget “HTML/Javascript”.
  • Lalu biarkan Judul tetap kosong, dan isikan Konten dengan kode dibawah,
<!-- 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="ganti dengan URL gambar anda" />',
    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>
<!-- Back to top script -->
Keterangan:
Sumber script bukarahasiablogspot dan dynamicdrive.
Perhatikan script berwarna biru! jika anda telah menggunakan Jquery pada Blog anda sebelumnya, maka hapus script tersebut agar tidak bentrok (untuk memeriksa bahwa anda telah menggunakannya atau belum silakan pilih menu template > edit html > CTRL+F temukan kode "jquery" (letaknya diantara kode <head>....</head>).
Sekarang lihat tulisan "ganti dengan URL image anda". Jika anda memiliki gambar yang bisa digunakan silakan masukan URL-nya, tapi jika anda belum memiliki gambarnya, anda bisa menggunakan salah satu gambar yang ada dibawah,


kembali ke atas
kembali ke ataskembali ke atas
kembali ke ataskembali ke ataskembali ke atas







  • Jika sudah klik “Simpan”.

Selesai, sekarang lihat perubahan yang terjadi di Blog anda.

Semoga bermanfaat.

1 comment:

  1. Terima kasih. Artikelnya sangat membantu. Saya ijin share yaa :)

    ReplyDelete