6/4/17

Cara Pasang Tombol Back To Top Di Blog

Cara Pasang Tombol Back To Top Di Blog

Cara Pasang Tombol Back To Top Di Blog, Tombol ini sangat cocok blogger yang blognya lebih 200 kata. Serta sangat berguna bagi pengunjung untuk kembali ke atas tanpa repot scroll mouse.

Sering juga kita dapati tombol ini pada situs - situs modern seperti situs berita hampir semua negara di dunia.

Saya akan bagikan cara pasang dengan cara mudah serta ringan agar tidak mengganggu tingkat responsive pada blog anda.
   Baca Juga:



Berikut ini Cara Pasang Tombol Back To Top Di Blog seperti halnya seperti situs saya kali ini. Cara pasangnya sangatlah mudah:

1. Pada menu Dashboard Blogger pilih Template > Edit HTML
2. Copy Paste kode dibawah ini tepat diatas kode letakkan tulisan disini </body>.

<script type="text/javascript" >//<![CDATA[
var scrolltotop={ 
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://lh3.googleusercontent.com/-djDGtUlZYVg/VWZgc3OhARI/AAAAAAAAJik/9up-tcLb3icthtbooNPApn4oMTx07eBDQCCo/s50/back%2Bto%2Btop%2Bbutton.gif" alt="back to top"/>',
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) 
            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($){ 

3. Simpan. Dan lihatlah.

Kode berwarna Merah ialah link gambar panah yang kita gunakan, apabila anda ingin merubahnya silahkan cari gambar di google terus copy paste pada link warna merah diatas.

Pastikan dalam template anda sudah terpasang kode jQuery seperti ini:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 


Demikianlah artikel Cara Pasang Tombol Back To Top Di Blog ini, semoga bermanfaat dan berguna. Kalau bingung cara pasang silahkan komentar dibawah.
Load disqus comments

0 komentar