Cara Memasang Back To Top Button dengan 6 langkah mudah

Saat membaca artikel yang panjang akan sangat lama jika menggunakan scroll mouse untuk ke halaman atas, dengan menggunakan back to top button tidak perlu lagi menggunakan scroll mouse cukup klik sekali saja langsung menuju ke halaman atas.

Back to top yang akan di share yaitu back to top akan muncul saat menscroll kebawah dan akan hilang saat menscroll keatas.

untuk memasangnya sangat mudah sekali berikut langkah memasang back to top button.
1. Seperti biasa login ke blogger terlebih dahulu
2. Dashboard pilih Template edit HTML
3. Periksa apakah kode Jquery ini sudah ada di template

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

atau kodenya seperti ini

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

jika belum ada bisa di tambahkan pada template kamu
berikut menambahkan Kode Jquery di template
              - Cari kode </head>
              - Kemudian pastekan salah satu kode diatas tepat sebelum kode </head>
4. Masuk ke Tata Letak pilih tambahkan gadget HTML/Javascript
5. Copy dan Paste Kode dibawah ini pada gadget HTML/Javascript

 <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/AVvXsEioZLQbURX-dmy_Qrx1YAenSw-Ar1FvNbgT_7Iw007iEOCjPgGzD-k2TudMqewip1EfFayCCS63NYzVF-FFq4IxTfnRGmS8C9rNajII5Fsg2B3yn1umrFtRgfbYsdAkRQ4akg-hZtPUGK0/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>

6. Simpan setelan dan lihat hasilnya
Cukup mudah bukan...

untuk kode bewarna merah image back to top bisa diganti dengan gambar di bawah ini sesuai selera kamu.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKotfX0Tmc76-RsK0YBvl7ihQbrBSJpZg-GDG_bxNlbU8iXw4GcxihFQPEdmT87qF_JaoBdbtIkio1d5yscGxlc37YPjclsLXSfHg_gyjL3TmeVz9WeTHqjFNbHh7szt0dTwmaadTxrLw/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzngbIBZNHvOF99fhD-iHhgLyxDR1ghO215XUTKP-Ol5b096Ji5kZyzxCCeqCc4_tOTqZgyG2afEI6J4rZD2W5GloEmbltw-oqN1GDvYyZ9Df3VW4v32BYmpYNNKc_j_iHmyCQT_wEpA/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDLyyMzH40J3xTahRI432KyJYCxEV_Qm0RLVGWvLd0jpQ-aYrBmhjX2d61dUGqJvY9Q3-LZhIt6Ek_I1JRtPr3pJsd364eWnXRAq39kVVvQF_Mz4vVM6LoczFbkiu79IZkWKVxV12fNU/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsdo29_ZcyZAtHUqXsJiGdUrtHcoseuyW69UEXf6TjGJu289Ccg67EtogO3M2IYZkO1_2XEWBiFSilQ7ex7TZpp7Pgw5Bmof-a4uSUmlk3ipyegCVIxrhyK7w5I8Xt370olvdzj_V6mM/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8mXsmWKuoCiVih6nUQu-Ig_oLiR8aygV7MGX_D0P8BWE2kPltMAlH9e2MnZZqJqEk6tjNHIKyS1r9Q0a6142nd0GwszBsAxrOZthWcljnwlyVgj8effIwCA6xLUXSs-DviBhT0OsMHo/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxN7jgodu7qwjYA0RFQ83Tq42AVIKqb8768E4kZ6dEdalVLqJSMFfCkMCzbgFH3G7YWmSQO5az32lArkqSGI_6QzkbGzC-jkGCF8LT_9GhVZs4NCbuaD7NhTx3SCrJX5XVjUl1NTUlQ2Y/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitR7v3o2iVzqJhHLnghiebcsdjVwqUXJbISMgQm5_O9DLkDI9dkbas5ZjpNY9gg2OvIsOeqXJK2c2ERmt0AR8S92Awpxg6I5GZDK8dbiPCxV1x0Ry4HRDMjBewWMvdwt9TPXQDQDHQTN8/s1600/back+to+top+button.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6wJOaztC2j-lPddwANCGwrDU-jcES_lZGwBjlCaLSDIw5IMyzaPUtkg4XfgegU6KI8Er8Q5faQCCqJEJPyOD2CfivDAf1mujp-bhj4Ph9abxmJZDEvfQEnxb0zY7jmcea5Q4U0qqVUo/s1600/back+to+top+button.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPNInEZP9hacRlxZOn56lt7B7k7hvEIuirwo7bpIG_AcJ53SvzvpjJBtBFP47NAfvdm-W0RAGpAaAjtD7dIy3ilBoVgHMaAZCFKR3PDlfNWa3DCE9zh1SS7MqyF-E-1GjuuHGWUSbAusM/s1600/back+to+top+button.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZLQbURX-dmy_Qrx1YAenSw-Ar1FvNbgT_7Iw007iEOCjPgGzD-k2TudMqewip1EfFayCCS63NYzVF-FFq4IxTfnRGmS8C9rNajII5Fsg2B3yn1umrFtRgfbYsdAkRQ4akg-hZtPUGK0/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfu7WsWh83ybiMXOutkH4Wq6WNdOjWGtuub65ORgHOyY1Am2aWN8963u1yJhQs4hvXWQR9A0VmFd_jSypwPHEBT6ZocslTn0xcMHo3JQ2evqfCXQk8RWgT1qeeZUHImtX9Q0d0mW8N3LE/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWZsd8RQyH16Ior5zOoiYR-APxATbcXH9UApUy8AAkASa2ekXFT-N_K8eHbeD3RFRsknglP-cVNxQ-wRYrLHi5KMX2m0lxu9krj4R1RnrII-U9_q-EfR7yIT5gCDk5ZLohg-uqiBRD2w8/s1600/back-to-top-button.png

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMtixgQsQZMGcuhRWAF_xCCLhzWbhg1pkbnY4oyo_Uf2XQy7vqVEfsK-R_6zkeBgeZJ73SGfxvGUzZZzdHgkTcXXAe5WdzylbZVVc9ucWMvuWNSF7kyCTqSkjEWqqnu7Jx9QOdlLZk9vw/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPQ_zP1V_y4yRZrvjULXRbg6fa0wDnkLhU7EstMSURYlbS2lseqgOenRW3LvBtoLG1DKVihdBu2DaY03r-r2rIuFb1f5zhqhyOMqLwr2JLVlvEUnho-dLwr1Px0zrB5vHLsVfH9clKA0/s1600/back_to_top_button.png

Jika langkah diatas tidak bisa maka bisa menggunakan langkah berikut :
1. Copy dan Paste kode dibawah ini di HTML/Javascript

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

2. Ganti URL Gambar Back To Top dengan image URL diatas
3. Simpan setelan dan lihat hasilnya.

Artikel Terkait

Cara Memasang Back To Top Button dengan 6 langkah mudah

4/ 5

Oleh anggita wisnu

anggita wisnu 09.16.00 Komentar