Cara Simple Menambahkan Tombol Back To Top Pada Blog

lewis-kull- | Cara Simple Menambahkan Tombol Back To Top Pada Blog - Pada artikel kali ini, mimin akan memberikan tutorial mengenai pembuatan Tombol Back to Top yang akan sangat berguna bagi kita para blogger dan juga bagi para pengunjung. Tombol Back to Top ini akan memudahkan pengunjung agar dapat kembali ke bagian atas dari blog kita dalam satu klik, tanpa harus menscroll ataupun mengusap layar smartphone lagi. Apalagi jika kita para blogger memiliki sebuah tulisan artikel yang sangat panjang. Tanpa basa-basi lagi, berikut langkah-langkahnya.

1. Pastikan terlebih dahulu pada template blog agan sudah terdapat kode jquery. Dengan cara, masuk ke blog lalu klik Tema / Theme kemudian klik Edit HTML. Letakkan kursor di salah satu tempat di mana saja pada kolom kode HTML yang ada lalu tekan Ctrl + F pada keyboard. Selanjutnya, ketik jquery pada kolom pencarian lalu tekan Enter. Contoh kodenya sebagai berikut.

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

Jika kode tersebut tidak ditemukan, silahkan copy kode tersebut kemudian paste di atas kode </head>. Cara menemukan kode </head> sama dengan langkah pada nomor satu mulai dari letakkan kursor dan seterusnya. Jangan lupa untuk menyimpan perubahan.

2. Selanjutnya, klik menu Tata Letak / Layout kemudian tambahkan gadget HTML/Javascript. Copy kode di bawah lalu paste pada kolom gadget HTML tadi.

<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://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=5&amp;bgt=gradient&amp;bgc=00f0ff&amp;ebgc=5f5fed" />
<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:

Pada kode yang berwarna merah merupakan model atau desain dari tombol Back to Up nya nanti. Kalian dapat menggantinya sesuai dengan keinginan masing-masing atau kalian dapat membuatnya langsung dengan mengunjungi link berikut. Klik Di Sini.

Kode Alternatif Jika Kode Sebelumnya Tidak Berhasil 

<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=" https://dabuttonfactory.com/button.png?t=+%E2%86%91+&amp;f=Calibri-Bold&amp;ts=33&amp;tc=fff&amp;hp=6&amp;vp=8&amp;c=5&amp;bgt=gradient&amp;bgc=ccc&amp;ebgc=000" />', //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>

Penutup :

Sekian untuk tutorial pada artikel Cara Simple Menambahkan Tombol Back To Top Pada Blog kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog LEWIS-KULL atau langsung Subscribe untuk berlangganan artikel terbaru dan bermanfaat lainnya secara gratis. Untuk perhatiannya mimin ucapkan terima kasih dan mohon maaf untuk segala keterbatasan serta kesalahan dalam penulisan ataupun kata-kata yang kurang berkenan.

Baca juga :