Cara Memasang Tombol Back To Top di Blog

Cara Memasang Tombol Back To Top di Blog - Salam sejahtera semua, pada kesempatan kali ini gue ingin share Tutorial Blog yaitu Cara Memasang Tombol Back To Top di Blog, sudah tau kan dengan tombol back to top. Tombol Back To Top akan memudahkan para pengunjung blog yang kembali ke bagian teratas blog/header blog, biasanya tombol back to top sangat bermanfaat untuk blog yang memiliki comment yang banyak, sehingga blog pasti akan cukup berat dan akan menyusahkan pengunjung untuk men-scrool kembal ke atas, maka dari itu gue share Tutorial Blog Cara Memasang Tombol Back To Top di Blog. Ok gan silahkan ikuti tutorial Cara Memasang Tombol Back To Top di Blog.

Tutorial:

• Login Ke Blogger.
• Masuk ke dashboard, lalu klik Tata Letak, dan pilih tambah gadget.
• Pilih HTML/Javascript, lalu copy code dibawah ini.


<!--Back to top script-->
<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={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhReAgM0wBfnKa9ULalKVylIrGUz0SDGQZueFAwgEElMPuVAP7Wbm9aGO-uhJ2ri-w3NkvLFRodRkj_enjwT7VLH363P57TV5F-UW4WZ3x7_2uI1Q-Ix2pj_uscq-GGt6v87-D3WbOQh431/s1600/back+to+top13.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 //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()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()

<!--Back to top script end--></script>
* Kode yang berwarna hijau, bisa agan ubah sesuka hati:

- Starline: Ukuran tinggi dalam pixel setelah halaman digulir kebawah dimana Tombol Back To Top akan muncul.
- Scrollto: Posisi tujuan tombol back to top, dihitung dari paling atas. 0 artinya 0 pixel dari atas halaman.
- Scrollduration: Kecepatan atau durasi scroll, semakin ditambah nilainya maka semakin lambat.
- Fadeduration: Kecepatan atau durasi fade, fade adalah gerakan muncul. Yang pertama nilai fade in, dan yang kedua nilai fade out.
- Offsetx: Posisi tombol back to top, semakin ditambah maka akan semakin merapat ke dalam.
- Scroll Back To Top: title pada tombol
• Untuk kode yang berwana merah, bisa agan rubah sesuka hati.
• Kalau sudah klik Simpan, dan lihat hasilnya.

Sumber: http://regibrader-free.blogspot.com/2013/07/cara-membuat-tombol-back-to-top-di-blog.html

Demikian post hari ini dengan judul - Cara Memasang Tombol Back To Top di Blog - semoga bermanfaat.

#Cara Memasang Tombol Back To Top di Blog

Description: Cara Memasang Tombol Back To Top di Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Cara Memasang Tombol Back To Top di Blog
Suka Dengan Artikel Ini ?

Agan baru saja membaca artikel yang berkategori Tutorial Blog dengan judul "Cara Memasang Tombol Back To Top di Blog".Dan jangan lupa ya!!, Agan bisa bookmark halaman ini dengan URL https://kirizaki13.blogspot.com/2013/08/cara-memasang-tombol-back-to-top-di-blog.html.

Terima Kasih sudah Berkunjung!