Cara Membuat Tombol Back To Top Di Blog

Cara Membuat Tombol Back To Top Di Blog Single Link
Alternative Link : [ Click Here... ] Direct Link

Cara Membuat Tombol Back To Top Di Blog | Hay sobat apa kabar kalian semua ? Kali ini Acep-Computer akan berbagi tutorial seputar blog. Tutorial kali ini adalah tentang Memasang Tombol Back To Top Di Blog. Tombol Back To Top ini berfungsi agar kita tinggal mengklik tombolnya, maka dengan otomatis browser yang anda pakai akan meng-scroll keatas atau kembali ke atas.

Script Tombol Back To Top yang saya bagikan kali ini mempunyai efek yang bagus. Efeknya Tombol Back To Top yaitu Fading And Smoth. Efek ini saya rasa sangat bagus dan enak dilihat oleh mata. Perlu diingat juga, bahwa script ini memakai Jquery yang fungsinya untuk memberi efek Fading And Smoth.

Oke langsung saja ke tutorialnya Cara Membuat Tombol Back To Top Di Blog Dengan Gampang :

1. Buka Blogger

2. Masuk ke Tata Letak

3. Tambahkan Gadget

4. Lalu cari dan pilih HTML/JavaScript

5. Setelah itu Copy kode dibawah ini : 

<!--Back to top script by dynamicdrive.com and acep-computer-science.blogspot.com-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
<!-- hapus script kode berwarna biru di atas jika template anda sudah memasang jquery-->
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Advanced modification by acep-computer-science.blogspot.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="URL Gambar 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($){
            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()
</script>
<!--Back to top script by dynamicdrive.com and acep-computer-science.blogspot.com end-->

6. Lalu save.

Perhatian :

• Hapus kode jquery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> yang berwarna biru, jika di template anda sudah memasang jquery tersebut agar tidak terjadi bentrok javascript...!!
• Ganti Kode yang berwarna merah atau URL Gambar Back To Top dengan gambar yang akan dijadikan back to top.

Untuk gambar back to top saya punya beberapa pilihan untuk anda gunakan. Tinggal copy url gambarnya dan ganti

DEMO Tombol Back To Top

Keterangan :
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.
• Scroll Back to Top : Bisa anda rubah sesuai kata-kata sobat inginkan, gunakan ctrl+f untuk memudahkan mencari. 

Oke Cukup Sekian postingan kali ini dari saya tentang Cara Memasang Tombol Back To Top Dengan Mudah, Bila ada kekurangan mohon dimaafkan dan apabila ada kelebihannya semoga bisa bermanfaat untuk kita semua. Oh iya tidak lupa juga bila tutorial diatas tidak work atau masih ada yang belum dimengerti, silahkan anda memberikan masukan dan pertanyaan di kolom komentar dibawah ini. Selamat mencoba dan semoga bermanfaat ^_^