Cara Membuat Tombol Back To Top Keren di Blog

 -  Kembali kita berjumpa sobat walau hanya lewat kata. Tutorial blogging kali ini tentang cara membuat tombol back to top di blog. Apa sih tombol back to top itu dan kegunaannya untuk sebuah blog. Tomblol back to top adalah sebuah navigasi untuk kembali kebagian atas dari sebuah blog seperti yang terdapat pada blog saya ini, jadi sangat berguna sekali apabila kita membaca sebuah artikel yang sangat panjang atau mungkin artikel yang disertai dengan coment yang sangat banyak (biasanya pada blog dofollow) dan kita ingin kembali kebagian atas blog maka kita cukup mengklik tombol back to top pada blog tersebut.

Nah jadi sangat berguna bukan membuat tombol back to top (kembali keatas) pada blog, sehingga kita tidak perlu menggunakan fasilitas scroll pada browser atau tombol scroll mouse untuk kembali bagian atas blog untuk mengakses menu-menu blog yang disediakan.  Disamping itu tombol back to top di blog juga menambah faktor estetika (keindahan) sebuah blog.

Oke tutorial membuat tombol back to top keren di blog ini sangat mudah sekali.

1. Masuk keakun blogger sobat
2. Pilih tata letak atau layout untuk yang bahasa inggris kemudian tambah widget/ gadget HTML
3. Copy code dibawah ini

<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={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="Letakan URL Gambar Disini " />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            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()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>


Untuk URL gambar silahkan coba pilihan dibawah ini :

http://1.bp.blogspot.com/gISRgZA4hnY/UPblPTIT1pI/AAAAAAAACAU/w9eLeowmJZE/s1600/back+to+top10.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht9gYTFBW6o58MiE6L7uflG0VoBWZxM6mxidc9-d71iPhvmWCQkzkGJaz0N9JktX_IoQ750TFBEwtr8sZOKkybHIGrnH9ijlZQE5evfoOYqPDcp9VKwb9qe6dNP5U3l_qvOsy2JkQYDzr4/s1600/back+to+top13.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwWNUHjMsB9LG1nNdzi2B9V2sqhIL1_vNTm684gybRCtUwmuYBH4KgDNp0T4cgCjafLE_Bgt1rMisVIACqm_5gBdQJwWrDTeVnfMzMgtUjXEZ_0ypTPXDmQLLcPGiTucfDtbdvkzRBhaoF/s1600/back+to+top14.png

Nah mudah bukan membuat tombol back to top di blog itu. Untuk mengatur kecepatan scroll sobat bisa menggati anggka pada kode scrolldurasi. Moga bermanfaat ya.