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

Cara Membuat Tombol Back To Top Dengan Efek Fading & SmoothCara 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="http://3.bp.blogspot.com/-fXlNL0_-POM/T83L0TwUL-I/AAAAAAAAAJY/Dzy7gVhSKZE/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 : Rosby Pranajaya M. Nandjan ~ Mari Berbagi

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


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

Delivered by FeedBurner




17 komentar:

  1. SayaPoker.com | Agen Judi Poker dan Domino Online Terpercaya Indonesia

    Kami Agen Judi Poker Online Indonesia - SayaPoker.com mengadakan Kontes SEO yang akan
    di mulai pada tanggal 15 Maret 2014 sampai dengan 31 Mei 2014 ,
    dengan Total Hadiah Rp 30.000.000,-

    Ikuti dan Daftarkan diri Anda untuk memenangkan dan ikut menguji kemampuan SEO Anda. Siapkan website terbaik Anda untuk mengikuti kontes SEO ini.
    Buktikan bahwa Anda adalah Ahli SEO disini. Saat yang tepat untuk mencoba kemampuan SEO Anda dengan tidak sia-sia, hadiah kontes ini adalah Rp 30.000.000,- Tunggu apa lagi?


    Kontes SEO SayaPoker.com ini akan menggunakan kata kunci (Keyword):

    "SayaPoker.com Agen Judi Poker dan Domino Online Terpercaya Indonesia"

    Jika Anda cukup percaya akan kemampuan SEO Anda, daftarkan web
    terbaik Anda SEKARANG JUGA! Dan menangkan hadiah pertama
    Rp 10.000.000. Pemenang Akan ditentu-kan dengan aturan kontes SEO
    yang dapat dilihat di halaman berikut :

    http://itulink.com/iframer4.php?page=KontesSeoSayaPoker


    Tunggu apa lagi? Ikuti kontes ini sekarang juga.

    BalasHapus
  2. thank you gan, akhirnya berhasil juga saya pasang di blog saya hehe :D

    BalasHapus
  3. wah,,berhasil gan..
    thanks.. :D

    BalasHapus
  4. maaf gan, kalo punya saya cmn tampil di halaman homepage saja, pas masuk ke artikel jadi ga muncul, itu kenapa yaa ??

    BalasHapus
  5. Keren banget..langsung ane pake ni di blog ane.. :p
    http://v42d.blogspot.com/

    Terima kasih gan..

    BalasHapus
  6. nice artikelnya :)
    http://jellygamatgoldg31.com

    BalasHapus
  7. Terimakasih banyak mas, sangat membantu sekali artiklnya... keep posting mas..

    BalasHapus
  8. makasih gan artikelnya, sangat membantu..

    singgah di blog saya http://liusluaha.blogspot.com

    BalasHapus

Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan.

Yang tidak diperbolehkan dalam berkomentar :
1. Komentar yang mengandung unsur SARA.
2. Komentar yang berbau PORNO.
3. Komentar Saling CACI MAKI.
4. Komentar yang Memasukan LINK IKLAN dan LINK AKTIF.

Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.