Cara Membuat Tombol Back To Top di Blog

Tombol Back To Top ini akan bermanfaat bagi pengunjung ketika ia ingin kembali ke bagian paling atas pada halaman web setelah membaca artikel pada Blog sobat yang panjang. Ok, jika sobat ingin membuat Tombol Back To Top ini, silakan simak artikel kali ini tentang Cara Membuat Tombol Back To Top di Blog.
Tombol Back To Top ini akan berada di sudut kanan bawah pada halaman web.

Berikut langkah-langkah dalam Membuat Tombol Back To Top di Blog.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambahkan gadget di posisi mana saja, hasilnya akan tetap berada di sudut kanan bawah.
4. Pilih mode HTML/Javascript.
5. Masukan kode html berikut.

<!--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/AVvXsEhCjfbhQS_7Whp0mW-0kSIlCBUOG-pRC1ljKgm3AOoYWbzD_cyjq-0Txlm-EGA3xyRytybObCi0t98mSe-D-P4CeWJNP9FWLE2mZx0JxvOdLnM5nsmfcPIIjsgh0bPwjTNdQ9E4ui3E8suO/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>

Catatan:

• Jika telah terdapat script berwarna biru pada Template yang sobat miliki, maka hapuslah kode tersebut agar tidak terjadi bentrok antar Javascript.
• Kode-kode berwarna hijau bisa sobat ubah:

- 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

• Kode berwarna merah bisa sobat ubah dengan gambar Tombol Back To Top yang sobat inginkan. Namun jika tidak diubah maka hasilnya akan seperti berikut.

 

Ada beberapa pilihan gambar untuk tampilan tombol Back To Top:

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCk4fntD0184oL0HQthvbPVpqt2XZJaduuvxOcdx9zpmmoBBzBTqaDDRoldrNe9xLm3KKbSdaTh5HLL9fGyWC_7GqHBJeCTkGe635X5f1x6qzJ6cLB-dEW0uEgSo_bMHeKeRw7vcaStSrd/s1600/arrow-up-icon+%282%29.png"

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4MPhkLTlWsDTwohrIPQsGnrDV0ScW5IZasBPhiAq9nRyC-fbdIRash0ZAQszV8rtBHYkNycorU3qLLZTHcKMaQgDjijYMuj_ZmoBrk2oapnsdz6pNCRza_tg1Thgz0DzaOW7Eo91CcsZ7/s1600/box-up-icon.png"

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH_Pys_DWz8Cr_sDcUVyA1n5fQ5NM7SBLZASky7xkZmcs_dIfwKI3WYIyODhYPubNYEQtf8422XTGF7rycYwiX6liyRzvjRaQtn142llHEHcUIHH6rqIJqrxq5Ha8Rf6RQPW1Z0ToyP-9f/s1600/arrow-up-icon.png"

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxxemQwKlsPDHMnKDhqw6VP6Pp-g1EIdkKlEysz0UAaHvmo2HeVSfgpN0UlArHwP7XJx_7R6ZErG1veyVtwxf6x37TuzUCISlVgboRceSD41bAcUC78ocy4733Ep-DFvEhZuwR0OO4tUH/s1600/Action-arrow-blue-double-up-icon.png"

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho5gGwgc1o-wlWr3sGnsIn3mh5jDhAssoNgDrYYHQi2jYedplyyzDsabc3JicLkHvA7YfR6Pz7UG81GK6b_muMLdqaoOOheRS_Z51n9BvHLieHcQ3-zSFhNJW_JMJF4eJvVURizi1yn7qU/s1600/back+to+top15.png"

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHDFiS40uhKldJx0uE3T0dRvm18JMB8mIVS07c7JMNICUlUA8e3YxNKj53WbI_KKalyx51NqzbC5bOYknANTwa00yMAiaNA4w-69KJ8Fk_GmGW3_PBoNB5WM-RZR_EipZ80facxSPLkIZ5/s1600/back+to+top9.gif"

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BjSiCCZS_kYTJ5UkTv1d3KTIVaWycwEKU9qcyfuyczF-CCzG8_Si_Nogel88nYfqPgYAg-YXj9RSJ9UIy2wU6u4lbhWQXEWfRwk6crVM-zvLr-VEYZmBxoKjwp4fkSLlawYNrAOotOqU/s1600/back+to+top4.gif"

 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPZUcsmE91ZF2YvZkssyDCTtnIOl1gmPejpycW6tMYPzIWIl4fUK_Ll9edj6EP-gdjzaO_TSeLLaR6F0Mgiz9HodOXQEQBsCgf3hgLigvLs67z-fGV2p-ApSZQ12ApMLMFXgyCkRyPIuoi/s1600/back+to+top10.gif"

6. Setelah selesai, maka klik Simpan.

Cara Membuat Tombol Back To Top di Blog 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share This To :

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati

Anda baru saja membaca artikel yang berkategori Tutorial Blog dengan judul Cara Membuat Tombol Back To Top di Blog. Anda bisa bookmark halaman ini dengan URL https://mickeym4ru.blogspot.com/2013/11/cara-membuat-tombol-back-to-top-di-blog.html. Terima kasih!

Ditulis oleh: Unknown - Jumat, 08 November 2013