Cara Memasang Tombol Back To Top Keren di Blog | OI

Our Imagination | Tutorial Blog | Banyak cara untuk mempercantik blog sobat-sobat sekalian salah satunya adalah dengan memberi tombol Back To Top. Oleh karena itu kali ini saya akan berbagi sama sobat-sobat bagaimana Cara Memasang Tombol Back To Top yang Keren yang bisa membuat blog sobat-sobat jadi tambah keren. Sebelumnya sudah pada tau kan fungsi tombol back to top yaitu agar saat kita mengklik
tombolnya browser kita akan otomatis meng-scrol keatas.

Oke langsung saja ke step-step alias langkah-langkah membuatnya :

1.       Login ke akun blogger sobat.

2.       Masuk ke Tata Letak

3.       Klik Tambah Gadget ( terserah mau pilih yang mana )

4.       Cari dan pilih HTML/Javascript

5.       Setelah itu Copy kode berikut ke dalamnya :

<!--Back to top script by dynamicdrive.com and agusher1.blogspot.com-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
<!-- hapus script kode berwarna biru di atas jika template anda sudah memasang jquery-->
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Advanced modification by agusher1.blogspot.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRsfFPAfXmN58D07wpqgEomlBIZDDWeatOpjGyzU6XGVJ4TQMrXP5s8uYhgTZo-jm3MoAkf0ydl5l_rCzCYLIMUjikQfmyVhrvHcaJ8xpUXDouedl8YZ3QkFT1S_7Vqze4mBM4nOUT6fF/s280/back+to+copy111.png" />',
    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 by dynamicdrive.com and acep-computer-science.blogspot.com end-->

6.       Lalu klik Save

Jadi deh Tombol Back To Top nya. Mudah dan gampang kan.

    Catatan :  ∙ Hapus kode yang Berwarna Biru jika di template blog sobat
                           sudah ada jquery supaya tidak bentrok Javascript

           ∙ Ganti kode yang Berwarna Merah dengan Url gambar
                            yang sobat sukai untuk dijadikan tombol back to top

Cukup sekian postingan saya kali ini, apabila ada masukan atau ada yang kurang di pahami silahkan mengisi kotak komentar dibawah. Good luck n semoga bermanfaat. ^_^