Cara Mudah Memasang TombolBack to Top

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), 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 :

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="

Masukkan Url Sobat

Setelah itu masukkan kode dibawah ini

" />', //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, Pilih salah satu gambar dibawah ini, dan salin url-nya untuk menggantikan url yang berwarna merah. Atau, Anda dapat mencarinya di Iconfinderdan Google.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwhzIh1CtoGBdoX8lMWCHDJRTxv6gHzrCk1iQ_EoXJzDOhUENh3W38MyH8BJ-QtaT5ys28ScnQfZD3UawBU18iFcewwSZw7jVSVIoE3eIqnxJu0e42YwH5xgxcbvRwkU_F_AHlFa7-Y9k/s1600/back.to.top.1.png

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXu1FWjuLpVWjO2AN7brpXKYHbbPjDrJ11jRvVPZIaXyrtxZHbWAjojuRJpcAiPdN_jM9C1U3M4_QjvHKocv2IBgEGJ1p5OoKWHJX8w9GEVA9LWIdiz8lOErQEP8_c62Q5kEz86ke_pQc/s1600/back.to.top.4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPuCtSxzUMLQqUezY1BJnpkMCap0Zjs32nDi3cKV173Yc1PLELpFwMXxouIHJzj7TuWXZdI44AokV28KgggtZ-KQqS6klYbOYmuaj_WIoe9EJ76t-6_2BgLRbFOk0i7X6XOdfAvJ4g2w/s1600/back.to.top.5.png

3. Ganti tulisan Balik Ke Atas menjadi tulisan yang Anda inginkan. Tulisan ini akan tampil saat pointer mouse diletakkan diatas tombol back to top.

Semoga Bermanfaat :')