Cara Membuat Tombol Back To Top untuk Blog

Pernahkah Anda melihat ada blog yang mempunyai tombol yang ada di sebelah badan blog, dan jika tombol di klik maka secara otomatis scroll blog tersebut akan kembali ke yang paling atas. Nah, cara itulah yang bisa membantu pengunjung yang sudah membaca blog Anda yang panjang kemudian ingin kembali lagi ke antarmuka yang paling atas tanpa harus ribet-ribet menggeser scroll menggunakan jarinya.

Yang perlu Anda ketahui bahwa membuat tombol seperti itu tidak perlu masuk ke dalam menu edit HTML. Jadi, Anda hanya perlu masuk ke menu tata letak, di menu tata letaklah Anda bisa memasukkan kode untuk membuat tombol kembali ke atas (back to top).

Oke, jika Anda sudah mengerti apa yang Saya maksud diatas, sekarang coba anda buatlah tombol tersebut menggunakan cara berikut ini:

1. Masuklah ke menu Tata Letak.

2. Klik Tambahkan Gadget, kemudian pilihlah menu yang berjudulkan HTML/Javascript. Jika sudah, pada kolom Judul biarkan saja kosong, lalu pada kolom Konten isilah dengan kode berikut 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="http://www.mandpbuildersltd.co.uk/images/back-to-top.png" />', //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>

4. Simpan Konfigurasi tersebut, dan refreshlah blog anda, kemudian lihatlah perubahannya.

Jika anda ingin merubah gambar tombolnya, maka rubahlah pada kode yang berwarna merah diatas dengan beberapa kode berikut ini:

Silahkan pilih salah satu dari gambar diatas

Back to top 1:

https://lh5.googleusercontent.com/--7bq2sw6umw/VTsjXJz1tgI/AAAAAAAAACI/hLFIM7xezf0/s40-no/back%2Bto%2Btop%2B1.png

 Back to top 2:

https://lh5.googleusercontent.com/-Ys7wJWyh8iU/VTsja1p5lCI/AAAAAAAAACs/9_rgz5mN9tc/s40-no/back%2Bto%2Btop%2B2.png

Back to top 3:

https://lh3.googleusercontent.com/-Isy9rcOvtuE/VTsjezJqnWI/AAAAAAAAADQ/roqx9v5EYrA/s40-no/back%2Bto%2Btop%2B3.png 

Back to top 4:

https://lh5.googleusercontent.com/-KrUT4pVaZUE/VTsjh4piUBI/AAAAAAAAAD0/MmWYiQ0myz0/s40-no/back%2Bto%2Btop%2B4.png 

Back to top 5:

https://lh5.googleusercontent.com/-7B8au2TIq1o/VTsjkmp2caI/AAAAAAAAAEY/C8Qgg4Col0A/s40-no/back%2Bto%2Btop%2B5.png 

Back to top 6:

https://lh5.googleusercontent.com/-HN4xFShpbnw/VTsjnoIf7XI/AAAAAAAAAE8/xB972kMTMYs/s40-no/back%2Bto%2Btop%2B6.png 

Back to top 7:

https://lh3.googleusercontent.com/-chZGXc331Yk/VTsjq2CnKXI/AAAAAAAAAFc/-LYdpk2nS6c/s40-no/back%2Bto%2Btop%2B7.png 

Untuk memodifikasi efeknya, Anda bisa melakukan konfigurasi pada kode yang berwarna biru di atas.