Cara Mudah Memasang Tombol Back to Top Smooth di Blog

Cara Mudah Memasang TombolBack to Top Smooth di Blog – Pernahkah Anda melihat sebuah anak panah kecil, yang letaknya di sebelah kanan bawah, dekat scrollbar saat mengakses sebuah blog? Yup, widget itulah yang dinamakan tombol back to top. Fungsinya adalah untuk membawa pengunjung kembali ke atas, tanpa perlu repot – repot melakukan scroll. Tentunya widget ini akan sangat membantu, khususnya jika Anda memiliki posting blog yang panjang, dengan komentar yang panjang pula.

Ada 2 jenis tombol back to top. Yang pertama menggunakan perintah # (hastag) (saya pernah membahas tombol back to top dengan hastag sebelumnya), dan yang kedua menggunakan JavaScipt. Perbedaan diantara keduanya adalah efek yang dihasilkan. Pada tombol back to top pertama, efek yang dihasilkan cenderung kaku. Sedangkan, pada model yang kedua, saat tombol di-klik akan terlihat efek scroll yang lembut. Jika Anda ingin melihat efek tersebut, klik link berikut :

DEMO –  Tombol Back to Top Smooth di Blog

Berikut ini langkah – langkah memasangnya :

1.     Login ke Blogger.com, lalu masuk ke Tata Letak.

2.     Pilih Tambahkan Gadget, lalu pilih HTML/Javascipt.

3.     Copy dan pastekan kode berikut (pada window yang muncul)

<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="Ganti dengan url gambar back to top" />', //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:'Balik Ke Atas'})
                .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>

4.     Kosongkan isian Judul, dan, klik Simpan.

5.     Buka blog Anda untuk melihat hasilnya.

Catatan :

1.     Anda dapat mengganti gambar tombol back to top, dengan cara mengganti url yang berwarna merah. Pilih salah satu gambar dibawah ini, dan salin url-nya untuk menggantikan url yang berwarna merah. Atau, Anda dapat mencarinya di Iconfinder dan Google.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4kr_i8fTj5PjR9IjvVBlTEFqQ0du9BDJiguu6wQDDvMzTFIofb2ZqvXwAos827u2zlEtNtYBZ6AM9Dnk9IZkWSMRmQE7ZDVZuqdhkMI6clLkUUs0kzCqyDq0rEVOOAShhtETc3p4kXcr4/s1600/back.to.top.2.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieK6-BcHt-UDpqX84xBCxPuHIUadttssSkT1qjkXKcnDybwNKLrfW38DgHTIuZyulZbrIi2GUqWZUvkN7TJiaP6Vkgg0p5vBGL8yTq4DJPhJZJrJHHnXWlj2HoYXhKkOfAHFrNfb7KnWpc/s1600/back.to.top.1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDFiHmSNOrRE_knj2t2ppqEizYQxMGEanzK4WkMuMMi_zje_izjVfwsxesOCf11IDQkNmlHMRexSEj6oxOFp7pTxoOVnx1-uqTtVfXVc3degiJXmlJxQYNoARqKZMnuOFdUtQg0I4XIcY/s1600/back+to+top+green.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jNSU_UM8gXnzvIvlZY6I5U7PhWoxuIjIhQK5ql8TJSy-MVEhrMVJLtbtmx1doAzHuyp6R_CXhC1hIibaAhVp_XOItXDk85-NLl8c2eEMqBcf2BXBiScJ_btz7K1OiLA0OdlP61D3HlqI/s1600/back.to.top.4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2g_tGzyHNp2ccIFAXhiyCK4Win45SPkgjRWv17eOrEuukoPzw5GQdTXF0ZVZwdguTqSGFORtbSGgt5Xm520ON5M1Zy37qDwOG5O384cH_WlNMVy5lRr3eG483sXTO4TCVnrpykBpjDbuF/s1600/back.to.top.5.png

2.     Hapus script yang berwarna ungu, jika blog Anda telah menggunakan JQuery. Untuk mengetahui, apakah blog Anda telah menggunakan JQuery, serta berapa versinya, silahkan klik disini. Jika Anda menggunakan JQuery dibawah versi 1.3.2, klik disini untuk mengupdatenya. Widget ini tidak akan berfungsi jika blog Anda menggunakan JQuery dibawah versi 1.3.2. Jika tombol back to top tidak muncul, coba kembalikan script yang berwarna ungu ini.
3. Ganti tulisan Balik Ke Atas menjadi tulisan yang Anda inginkan. Tulisan ini akan tampil saat pointer mouse diletakkan diatas tombol back to top.

Bagaimana? Mudah bukan? Selamat mencoba, dan salam Blogger! Tolong pula tambahkan saya ke lingkaran Anda di Google +, dan share artikel ini. Terima kasih!