Cara Membuat Tombol Back to Top Dengan Efek Fading & Smooth Pada Blog

Cara Membuat Tombol Back to Top Dengan Efek Fading & Smoth Pada Blog - Kali ini saya akan share artikel mengenai Cara Membuat Tombol Back to Top (Kembali ke Atas) dengan menggunakan Efek Fading & Smooth Pada Blog. Tombol back to top yang saya share kali ini mungkin agak berbeda dengan tombol back to top yang lainnya, dimana tombol back to top ini menggunakan script javascript dan jquery.

Apa yang erbeda dari tombol ini?

Mungkin sebagian sobat bloger bertanya apa perbedaan tombol back to top ini dengan tombol back to top yang sudah ada. Perbedaan yang ada artikel back to top ini adalah :

1. Perampingan script agar tidak memperberat loading blog.
2. Pengurangan, perampingan dan modifikasi pada bagian script agar sesuai dengan Blogger.
3. Efek fading dan smooth sekaligus (dengan bantuan jquery).
4. Panduan modifikasi penuh pada script untuk menampilkan efek yang personal, agar sesuai dengan desain blog dan keinginan sobat.

Jika sobat blogger ingin menggunakan tombol button back to top ini, silahkan ikuti langkah-langkah yang saya berikan ini :

• Login ke akun Blogger sobat.
• Pilih Template.
• Pilih Edit HTML.
• Kemudian cek kode JQuery. Biar cepat gunakan Ctrl+F.
• Jika dicek dan ternyata ada script seperti dibawah ini, simpan kembali Template sobat. (note : Jika belum ada, copy kode dibawah ini tepat diatas </head>)

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

• Kemudai sobat pilih Tata Letak.
• Pilih Tambahkan Gedget / Add Gedget.
• Pilih Getget HTML/Javascript.
• Copy kode dibawah ini, kemudian paste si Gedget HTML/Javascript.

<script type="text/javascript" >

var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img width="64px" hight="64px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbxup4QjFmMJziKYKKEaesxyG7aH4bUtg6E34vTSiHaAnLHvzj83Jlv2X7eUDM9gqRtLmXZGg_NONv9t0FPNRPf9qV41E3-T27ldUTNNdaQGErlpY9uWPkirW_zqMPs1cGVhNEwifS-OCK/s1600/back+to+top.png" />',
    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($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest
            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()!='')
                mainobj.$control.css({width:mainobj.$control.width()})
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

• Kemudian Simpan.
• Agar tidak mengganggu widget lain, pastikan widget di posisikan di bagian paling bawah. Geser widget ke bagian footer widget (jika ada) atau di sidebar paling bawah.
• Simpan Kembali dan liat hasilnya.

Modifikasi Pada Tombol Back to Top.

Untuk melakukan modifikasi efek pada tombol back to top, perhatikan poin-poin berikut:

• startline: Integer nilai pixel ke bawah dimana tombol back to top akan dimunculkan. Menambah nilainya berarti tombol akan ditampilkan lebih ke bawah setelah user scroll down. Nilai default di atas adalah 100

• scrollto: Integer, tujuan scroll setelah tombol diklik. Nilai 0 (dalam pixel) seperti default di atas berarti scroll akan kembali ke bagian paling ujung atas (titik nol). Menambah nilainya berarti akan menurunkan titik tujuan scroll.

• scrollduration: kecepatan/durasi scroll (dalam miliseconds), semakin tinggi nilainya, semakin lambat. Default adalah 1000 (1 detik).

• fadeduration: kecepatan/durasi fading (dalam miliseconds), nilai pertama adalah nilai fade in, yang kedua adalah nilai fade out. Nilai default di atas adalah 500 dan 200.

• offsetx: nilai posisi x tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke dalam. Default 5.

• offsety: nilai posisi y tombol back to top (dalam pixel), semakin ditambah semakin menjorok ke atas. Default 5.

Jika sobat blogger ingin memodifikasi style atau bentuk tombol back to top, silahkan ganti URL gambar yang berwarna merah dengan URL tombol gambar yang sobat inginkan.

Semoga artikel ini dapat berguna dan bermanfaat bagi sobat blogger. Bila ada yang mengalami error dalam pemasangan, silahkan tanyakan pala kolom komentar dibawah. Happy Blogging.

Ditulis Oleh : Unknown ~ Mari Berbagi

Sobat sedang membaca artikel tentang Cara Membuat Tombol Back to Top Dengan Efek Fading & Smooth Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-tombol-back-to-top-dengan.html" target="_blank">Cara Membuat Tombol Back to Top Dengan Efek Fading & Smooth Pada Blog</a>

Silahkan masukan Email sobat untuk mendapatkan update artikel terbaru di blog ini :

Delivered by FeedBurner