Saturday

Cara Membuat Tombol Kembali ke Atas (Back To Top)

Selamat datang di Blog taharonqi.blogspot.com, kali ini saya akan sedikit berbagi pada sobat-sobat blogger semua tentang bagaimana cara membuat tombol kembali ke atas ( back to top ) yang keren, jika sobat pengen mengerti bagaimana hasilnya sobat bisa lihat pada blog saya, atau lihat gambar berikut :
Lihat Yang Ditunjuk Anak Panah
Bagus kan sobat? Jika tertarik langsung ikuti langkah berikut :
  • Masuk ke Akun Blogger Sobat
  • Pilih Tata Letak
  • Klik Tambahkan Gadget
  • Masukkan Kode berikut
<!--Back to top script by dynamicdrive.com & taharonqi.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 di atas jika template sudah menggunakan jquery-->
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.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="http://i1281.photobucket.com/albums/a508/johnthor/Backtotophijau_zpsa8c6185e.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()
</script>
<!--Back to top script by dynamicdrive.com & taharonqi.blogspot.com-->
Keterangan : 
Tulisan Warna Biru : Ganti gambar sesuai keinginan sobat
  • Klik Simpan dan Lihat hasilnya.
Mungkin itu saja yang dapat saya bagi buat sobat-sobat blogger semua, jika ada  pertanyaan sobat bisa berkomentar, terima kasih.

26 comments:

  1. saya gak usah repot2 udah bawaan template :)

    ReplyDelete
  2. wah ini dia yang saya cari mas, sebelumnya saya sudah pake cuma karna ganti template trus widget back to topnya jadi ilang deh...saya langsung cobain ya :)

    ReplyDelete
  3. wah bagus ini widget nya. bisa dicoba mas :)

    ReplyDelete
    Replies
    1. gak dicoba juga gak apa-apa mbak, gak maksa kok
      wkwkwkwkw :D :D

      Delete
  4. Replies
    1. Iya sama dengan Mba Ani di atas
      PEndatang baru nih. Baru baca baca dulu hiehiehiehee
      Salam kebal eh kenal ya

      Asep Haryono
      Blogger Pontianak

      Delete
    2. @Rani : Silahkan disimak mbak rani
      @Asep: Salam kenal juga pak Asep, salam juga dari saya blogger gresik

      Delete
  5. Caranya mudah ya mas,nanti saya coba deh :)

    ReplyDelete
    Replies
    1. iya mas mudah sekali dan silahkan dicoba :D

      Delete
  6. jadi pengunjung lebih cepat dan mudah ya mas kalau mau kembali ke atas header blog apabila blog ada widget back to top ini :)

    ReplyDelete
    Replies
    1. benar banget mbak, jadi gak susah-susah pakek scroll :D

      Delete
  7. Blognya asik banget nih, saya lebih suka dengan efek scroll mas?
    bisa request nggak?

    ReplyDelete
    Replies
    1. request apa sob?
      kalau bisa saya turuti kalau tidak ya maaf ya

      Delete
  8. Iya yah, tombol ini memudahkan kita, mudah pula pasangnya.. Thanks yah

    ReplyDelete
    Replies
    1. iya mbak sangat mudah sekali dan sama-sama :D

      Delete
  9. saya sudah punya nih mas onqi :D hehehe

    ReplyDelete
  10. saya belum sempet pasang nie mas widgetnya, kira-kira memberatkan loading blog gak ya? :)

    ReplyDelete
  11. Scroll keatasnya Pakai efek ya. kalau saya masih yang manual sob. Tinggal pakai tanda # langsung ke atas posting :)

    ReplyDelete
  12. ok. makasih gan, bisa di coba kayanya nih.. perbanyak lagi postingannya gan, biar saya nambah ilmu :D
    follow back jng lupa mas onqi

    ReplyDelete
    Replies
    1. oke langsung meluncur sob
      :D
      weeeeeeeeeeerrrr

      Delete