Header

Cara Membuat Tombol Back To Top Keren Di Blog

Posted by : Admin On 03 February 2013 92 comments

Saat kita baca postingan yang panjang banget sampe ke bawah, terus pengen baca lagi dari atas tapi scroll mouse rusak. Apa pernah loe ngalamin hal tersebut gan? Kalo pernah pasti repot karena harus narikin tombol scroll di browser ya gak. Apalagi kalo pake laptop cuma pake touch pad waduh bikin sebel.

Nah kita sebagai pemilik blog harus cari cara buat mengatasi masalah itu, biar pengunjung blog betah baca postingan kita gan. Caranya ya kita pasang tombol back to top, jadi pengunjung tinggal ngeklik tombol aja kalau pengen balik ke atas gan.


Blog kalian udah ada tombol back to topnya belom? Kalo belom, pasang sekarang juga, tombol back to top ini emang bukan navigasi utama tapi bisa jadi sangat penting buat beberapa pengunjung gan. Gak susah kok membuat tombol back to top di blog gan cuma tinggal nambahin widget tanpa perlu edit HTML.

Kali ini gw bakal share cara membuat tombol back to top di blog yang gampang gan. Kalo loe berminat silahkan langsung disimak cara buatnya gan gak pake ribet. Contohnya kayak yang ada di blog ini posisi tombol ada di kanan gan.



Cara Membuat Tombol Back To Top Keren Di Blog



  • Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal loe pastein kode di bawah ini di kotak kosongnya.


<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={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            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()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>
  • Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya loe gan lalu di Save. Coba sekarang buka blog loe pasti udah ada tombol back to topnya gan.

Kalo loe gak punya gambar tombolnya ni gw sediain gan, ada yang animasi sama standar tinggal dipilih aja.


Animasi :












Standar










Beres gan, gampang kan cara membuat tombol back to top di blognya. Ow ya kalo loe mau rubah kecepatan scrollnya bisa di edit aja scrollduration, semakin besar angkanya semakin lambat gerakan ke atasnya gan.


Sekian dulu yang bisa gw share tentang cara membuat tombol back to top, semoga bermanfaat buat kalian semua. Jangan lupa ninggalin komentar ya gan.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Mau Dapet Updates Gan!

Ikuti SEO Ciyus

92 comments:

  1. thanks atas informasinya, akan saya terapkan

    ReplyDelete
    Replies
    1. keren gan sudah ane terapin di blog ane thank sudah berbagi ..saya sampai keliling2 nyari2 tutorialnya tapi tidak ada yang berhasil cuma tutorial ini yang berhasil gan .. :) thank you gan

      Delete
  2. Makasih info nya.. buat sobat yg mau tau cara benrin dvd player yg suka no disc klik url ini . http://www.biam-ingin-berbagi.blogspot.com ok

    ReplyDelete
    Replies
    1. @arni wida, Yogi Vipre & Baim : sama2 agan2 semua,. :m

      Delete
  3. mantap banget sob
    salam blogger
    http://dasarbahasainggris.blogspot.com

    ReplyDelete
  4. blogwalking!!! ,jangan lupa mampir , http://kink-exclusive.blogspot.com/

    ReplyDelete
  5. nice post gan
    tp cara removenya gimana.........?
    widget sudah sya hapus tp scrool masih ada

    terima kasih

    ReplyDelete
    Replies
    1. dihapus kodenya gan dari layout,.

      Delete
  6. kren gan udah di pasang , berhasil tlong di cek gan skalian berkunjung n komen ke blog ane hehe
    sukses trus

    ReplyDelete
  7. mantap mas brow, thanks
    http://samboedy.blogspot.com/2013/04/15-animasi-bergerak-untuk-mempercantik.html

    ReplyDelete
  8. manisss,,, banget tutorial gan..hehee..
    makasih banyak ?

    ReplyDelete
  9. Wah sukses gan, sudah saya pake, keren gan..
    http://rahman-ciblog.blogspot.com

    ReplyDelete
  10. Makasih gan gambar nya ane buat sendiri gpp ya..

    ReplyDelete
  11. gan bedge punya agan sudah saya pasang di blog ane silakan agan pasan punya saya di blog aga thanks

    http://kangwahyudi.blogspot.com/

    ReplyDelete
  12. Blogwalking!!! ,jangan lupa mampir , http://templateuntukblogspot.blogspot.com/

    ReplyDelete
  13. nice info gan,,, mampir balik ke blog ane gan http://www.fathurrizqi.com/

    ReplyDelete
  14. Ok infonya, langsung saya coba di blog saya, hehehe. perkenalkan blog saya sob http://mestiqui.blogspot.com/

    ReplyDelete
  15. mantap gan... langsung ane coba...
    visit balik y gan :) www.cupux-movie.com

    ReplyDelete
  16. Sangat membantu sekali informasinya gan

    ReplyDelete
  17. infonya mantap & bermanfaat sob..
    saya mau pakai
    salam kenal ya :)
    thx a lot

    ReplyDelete
  18. keren sob . kapan-kapan saya coba..

    ReplyDelete
  19. hahaha, thanks gan ternyata sangat mudah di praktekan
    mampir gan ke blog ane di zuhr107.blogspot.com

    ReplyDelete
  20. tks infonya ,kalo ada waktu silahkan mampir ke lovewebster.blogspot.com

    ReplyDelete
  21. thank's gan atas infonya sangat keren dan ciamik hehe :d

    ReplyDelete
  22. wah2 makasih banyak master ciyus2 ..xixii jangan lupa mampir yah di http://berbagi-ilmu-terlengkap.blogspot.com/ di tungu kritik dan koment nya okk... heee salam blogger

    ReplyDelete
  23. Keren gan, ane izin sedot yee...
    Mampir ke blog ane gan, tuker backlink juga okreehhh...

    http://www.ionlinerz.com/2013/12/bloggership-backlink-exchange.html

    ReplyDelete
  24. thanks gan,, tapi ko d ane gk work ya gan
    mohon bantuannya
    tazkians-art.blogspot.com

    ReplyDelete
  25. mantap sob.. kunjung balik y http://konichiwax.blogspot.com/

    ReplyDelete
  26. asek back to topnya keren keren gan :D

    ReplyDelete
  27. Wah mantap gan...sudah saya terapkan di blog saya yang sederhana. Silahkan dikunjungi http://balikuyangindah.blogspot.com/ blogger pemula.

    Terima kasih Gan atas artikel ini, salam kenal sekaligus.

    ReplyDelete
  28. tolong di buka ya alafarisisandypratama.blogspot.com

    ReplyDelete
  29. Thanks Bro.....
    Jangan lupa kunjungi....
    http://mynotes2you.blogspot.com :D

    ReplyDelete
  30. thanks for sharing... mari sobat main kesini http://irwansulis.blogspot.com

    ReplyDelete
  31. ke sni ya gan http://irwansulis.blogspot.com

    ReplyDelete
  32. thankyaa, kunjung balik di blog ane ya :D

    ReplyDelete
  33. Ka Admin, tolong ajarin bikin Template kaya gini juga dong. Tapi jangan di beri template yg ini ntar di kiria Copas, aku mau bikin sendiri tapi ngga tau caranya ajarin dong tutornya. Request post Tutor bikin Template kaya gini :g
    Kunjungin juga blog aku svvap.blogspot.com

    ReplyDelete
  34. thanks mas dah saya pasang script back to top nya berhasil juga, salam kenal

    ReplyDelete
  35. Terima Kasih banyak.... kunjungi ya www.enggakpunya.blogspot.com

    ReplyDelete
  36. wah, terima kasih banyak gan, tipsnya, its work!! ditambah lagi donk koleksi tombolnya.. jangan lupa kunjungi : http://islamypersona.blogspot.com/

    ReplyDelete
  37. Thanks bro :)
    visit back . www.masbimo.com

    ReplyDelete
  38. Thanks Gan..
    sangat bermanfaat..
    mampir juga => http://www.downloadfilmku.com

    ReplyDelete
  39. keren gan ty
    yang mau tau cara gratis internetan mampir ke sini http://indosharings.blogspot.com/

    ReplyDelete
  40. .makasih gan..." :a

    .d tunggu Coment.Na d http://edhay76.blogspot.com/

    ReplyDelete
  41. makasih info-nya

    http://adutburza.blogspot.com/
    www.giribig.com

    ReplyDelete
  42. Oke gan" Maksih banyak yo.
    di tunggu kedatangnnya di sini
    http://5-about.blogspot.com/

    ReplyDelete
  43. Sudah saya pakai di blog saya. Terima kasih, ya.

    ReplyDelete
  44. gan bisa tombol nya di geser ke kiri dikit?

    ReplyDelete
  45. gan makasih banyak yah keren dan berhasil nih.

    tapi mau tanya kalo dari atas kebawah gimana yah ?

    klo dari bawah keatas berhasil tuh, tapi klo dari atas kebawah lom, saya cek di google/ di blog sbalah gak ada ? gimana nih ohm ??

    ReplyDelete
  46. thanks you gan info trik dan tipsnya.....

    ReplyDelete
  47. thanks kak... Aku udah nyoba bikin gambar back to topnya sendiri,terus dimasukkin ke first blogku,abis itu di copy image URL,dipaste di URL bttopnya,eh bisa! Kalau mau liat liat my first blog, hanayrapk.blogspot.com ,kalau yang second hanasecondblog.blogspot.com .

    ReplyDelete
  48. Thanks a lot gan :d
    Ditunggu kunjungan baliknya baikbulir.blogspot.com

    ReplyDelete
  49. terimakasih :j . mampir y di http://adenanaam.blogspot.com/

    ReplyDelete
  50. Mantap!! :g

    Ditunggu kunjungan baliknya http://heroesman.blogspot.com

    ReplyDelete
  51. nah ini baru berfungsi, rata2 pada copas Om cara bikin Kembali Ke Laptop.
    Makasih Om. Salam Kenal Ia http://www.beautywater.id/

    ReplyDelete
  52. Keren mas, ni baru mantap, jadi blog gua dah ada balik ke atas, soalnya postingan blog saya panjang2, salam kenal ya mas ?

    ReplyDelete
  53. ane sedot satu gan, udah nampang di blog :d

    kalo mau mampir gan => http://www.nirvashmu.co.vu

    ReplyDelete
  54. Keren banget nih! link blogku : recipe-byneira.blogspot.com

    ReplyDelete
  55. mantap dah artikelnya
    http://acemaxs31.com/obat-herbal-gagal-jantung/

    ReplyDelete
  56. terimakasih infonya gan
    http://obattradisionalacemaxs.net/

    ReplyDelete
  57. nice artikelnya :)
    http://jellygamatgoldg31.com/obat-herbal-radang-usus/

    ReplyDelete
  58. Thanks gan infonya, salam suksess :)
    http://goo.gl/fZv6NL

    ReplyDelete
  59. Thanks gan infonya :)
    http://goo.gl/21T1Mx
    http://goo.gl/mgBCnM
    http://goo.gl/zxbefd

    ReplyDelete
  60. mantap gan, udah maching di blog ane
    http://caraokta.blogspot.it/

    ReplyDelete
  61. mantap gan dr http://learningbasedweb.blogspot.com

    ReplyDelete
  62. Wah, Blog saya jadi keren gan. Thanks gan!!
    Kunjungi blog saya di : http://nathanaelilham.blogspot.co.id/

    ReplyDelete
  63. wah..kren ijin coba gan saya sudah pasang
    kunjungi juga gan blog kami http://misnwsuela.blogspot.co.id/

    ReplyDelete
  64. keren kok gan. adda gk gmbr lain ya gan?

    ReplyDelete
  65. koq ada tulisan sumber back to topnya di tempat widget

    ReplyDelete
  66. untuk menyalin animasinya di tempelin dimananya gan...

    ReplyDelete

Yang komen spam dan komen asal ga punya otak bego

Terima Kasih

Admin SEO Ciyus

Berikutnya Sebelumnya