Cara Membuat Tombol Kembali Ke Atas ( Back to Top ) di Blogspot

THE 330K | Cara Membuat Tombol Kembali Ke Atas ( Back to Top ) di Blogspot -- Selamat datang sobat Blogger, kali ini kita akan sedikit membahas mengenai cara membuat tombol yang otomatis akan mengarahkan kita ke awal/header halaman, alias tombol back to top. Tombol ini sangat berguna sekali menurut saya, karena kita tidak perlu repot-repot lagi untuk men-scroll dari halaman dasar sampai ke atas, apalagi jika kita menggunakan hp, karena itu bisa sangat membuang waktu.

Selain itu, tombol back to top ini juga berguna untuk mempercantik tampilan blog kita. Dengan adanya tombol "kembali ke atas" ini, blog kita akan terlihat lebih profesional dan lebih menarik tentunya.

Nah daripada basa basi lagi, sekarang kita mulai saja, bagaimana cara membuat tombol back to top ini.

Cara Memasang Tombol Back to Top di Blog

Pertama, pastikan kamu sudah memasang kode ini di template blog kamu.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

atau ini:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Jika belum terpasang, silahkan lakukan seperti petunjuk berikut:

- Buka template > Edit HTML
- Tekan (CTRL+F), ketik kode </head>
- COPY salah satu kode tersebut dan PASTE di atas kode </head>.
- Lalu save.

Kemudian klik "Layout" / "Tata Letak"

Klik "Add Gadget" di Sidebar

Pilih "Javascript/HTML"

Lalu copy dan Paste kode berikut ini:

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4p9uFTgMAxCP8FxU-iidtjzbLMl7tVU2ZkDk9Y78FzLkJG-YsweVcXqyc2LI4XegHXB1v9PlHWn8joRjFz0o2k7EE5OqhTEj0pdxl_ZncgMFsSRliEOQaFR2x1LQ4E_fUukBZbERX5RI/s1600/back+to+top.png" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    });

    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Catatan: Kode yang berwarna merah adalah kode untuk gambar tombol back-to-topnya, kamu bisa menggantinya sesuai dengan keinginan kamu.

Alternatif, jika cara diatas tidak berhasil:

Klik "Layout"

Kemudian "Add Gadget"

Pilih "HLML/Javascript"

Lalu copy dan paste kode berikut ini kemudian save!

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

Itulah tips mengenai cara membuat tombol back-to-top di blogspot, semoga yang saya paparkan di atas cukup jelas dan dapat dilakukan oleh sobat blogger semua.