Header

Cara Membuat Tombol Back To Top Keren Di Blog

Posted by : Admin On 03 February 2013 89 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

89 comments:

  1. 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
  2. mantap banget sob
    salam blogger
    http://dasarbahasainggris.blogspot.com

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

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

    terima kasih

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

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

    ReplyDelete
  7. keren zob...
    izin praktek.....

    ReplyDelete
  8. keren zob..
    izin praktek....

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

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

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

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

    http://kangwahyudi.blogspot.com/

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

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

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

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

    ReplyDelete
  17. Sangat membantu sekali informasinya gan

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

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

    ReplyDelete
  20. manteb gan ... keren abizz

    ReplyDelete
  21. Mantab om ijin coba

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

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

    ReplyDelete
  24. 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

    ReplyDelete
  25. 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
  26. 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
  27. ada koleksi yg lainnya gak gan?

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

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

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

    ReplyDelete
  31. 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
  32. tolong di buka ya alafarisisandypratama.blogspot.com

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

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

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

    ReplyDelete
  36. 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
  37. thanks mas dah saya pasang script back to top nya berhasil juga, salam kenal

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

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

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

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

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

    ReplyDelete
  43. .makasih gan..." :a

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

    ReplyDelete
  44. makasih info-nya

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

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

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

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

    ReplyDelete
  48. 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
  49. thanks you gan info trik dan tipsnya.....

    ReplyDelete
  50. 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
  51. Thanks a lot gan :d
    Ditunggu kunjungan baliknya baikbulir.blogspot.com

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

    ReplyDelete
  53. Mantap!! :g

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  67. 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