Cara Memasang Tombol Back To Top Keren di Blog

Duniabil.com Tutorial Blog | Tips&Trick Blog. Cara Memasang Tombol Back To Top Keren di Blog, Widget ini sangat Keren untuk dipasang di blog anda, Oleh karena itu saya share Tutorial ini untuk anda semua. Tombol Back to Top sangat bermanfaat bagi Penungjung web yang telah membaca Artikel panjang dan ingin kembali ke atas dengan cepat, Nah Untuk anda yang ingin Memasang Tombol Back To Top, Berikut Cara-caranya.

Cara Memasang Tombol Back To Top :

1. Login terlebih dahulu di Blogger.com
2. Setelah itu Pilih Menu Tata Letak di dalam menu Dropdown
3. Klik Tambahkan Gadget dan pilih HTML/Javascript
4. Masukkan Code berikut ini

<!--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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCOCXHlBL-209_OfgiZS_w_EB44-YMoi-v2Z4iRvAcnMEQ5THuoeQ8TTAGI7nv6Y_Z4k1ddWHNLLBT0RmSI75Qp53vazI7jjupwSc9RHF0pHltmtL7BxU2PTft1kgQff82KUaUtAMCUqia/s1600/back+to+top13.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()

<!--Back to top script end--></script>

5. Klik Save Template.

Anda juga Bisa mengganti Gambar Tombol Back to Top yang sudah saya sediakan

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

 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxwTtCrjb1Ez8M8SXed3klvEDjDex3ru7OH7Tod0grsPPhnANCvb0tvF7zVct5Ax7xD3n2N2W12BJ_YZDkDvybv7qI7W07bZ0SViIBUZmoAcdHrKTrITCl4laI7K6ysWs_QvUageb1kIJz/s1600/box-up-icon.png"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHiXkM8uEoFloTixcVNGPOrp0HT4yLopBzJ2PaGIV-75YneuEz2NPtxXtXcbfLCrMp2O4hmOFkzHMcDnXyzNT5b5Z0tEVvc9UezSIPdLHwMsX205F8rOCSehYKTjhQCia-LhfZvT8s9VSo/s1600/arrow-up-icon.png"

 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQB0LNqJEGsy4RyX4MB56Haj5kZN3hzsxPMpsrNKSbp0xauDriqX6L0aWlLUtM25Z23Jis3Vu44stK3wrO7uwghJGtcHlNft8OtfgeFxwcnH7eG6kXE9XHn6JACxnyLAKPSiqW0R1nTvZ5/s1600/Action-arrow-blue-double-up-icon.png"

 "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcXfBl5B6mnEAPAf2OF5xgcHGoAEe6CoSn2Ap8c0ESmop17RfJHa43BXrK9K_BLz95M39Pf6QyME3gCddgGO0kq84GxPmNVYdKbwITSlXpbG8Q59_mKHeI43LhYaw5Mbo3NGDDnMZ5kdxm/s1600/back+to+top15.png"

Dan Untuk Keterangan Gambar Di Atas

1. Code Berwarna Merah adalah Kode Gambar
2. Code Berwarna Hijau adalah Durasi Scroll, Fade, dan Pixel Gulir Cursor.

Sekian Dari Saya Ass. Wr. Wb