Header

Cara Membuat Tombol Back To Top Keren Di Blog

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

Labels: ,

86 comments:

  1. AnonymousApril 5, 2013 at 12:20 AM

    thanks sob

    ReplyDelete
  2. AdminApril 9, 2013 at 2:19 PM

    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. UnknownApril 9, 2013 at 11:52 PM

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

      Delete
  3. omApril 16, 2013 at 1:47 PM

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

    ReplyDelete
  4. AndriApril 19, 2013 at 8:36 PM

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

    ReplyDelete
  5. UnknownMay 6, 2013 at 9:29 PM

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

    terima kasih

    ReplyDelete
  6. AnonymousMay 24, 2013 at 1:11 PM

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

    ReplyDelete
  7. akang samJune 1, 2013 at 9:29 PM

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

    ReplyDelete
  8. AnonymousJune 8, 2013 at 11:20 AM

    keren zob...
    izin praktek.....

    ReplyDelete
  9. AnonymousJune 8, 2013 at 11:21 AM

    keren zob..
    izin praktek....

    ReplyDelete
  10. SuparJune 8, 2013 at 5:25 PM

    makasih bro atas ilmunya...

    ReplyDelete
  11. UnknownJune 27, 2013 at 6:40 PM

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

    ReplyDelete
  12. kreaSiDianJuly 14, 2013 at 9:34 PM

    keren Q dh coba thx y

    ReplyDelete
  13. AnonymousJuly 18, 2013 at 7:50 PM

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

    ReplyDelete
  14. UnknownAugust 3, 2013 at 8:40 PM

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

    http://kangwahyudi.blogspot.com/

    ReplyDelete
  15. FicopangAugust 13, 2013 at 6:51 PM

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

    ReplyDelete
  16. JudgefathAugust 30, 2013 at 12:14 PM

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

    ReplyDelete
  17. AnonymousSeptember 2, 2013 at 7:37 PM

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

    ReplyDelete
  18. Imam ManaSeptember 5, 2013 at 6:22 PM

    Sangat membantu sekali informasinya gan

    ReplyDelete
  19. UnknownSeptember 6, 2013 at 2:26 PM

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

    ReplyDelete
  20. AnonymousSeptember 8, 2013 at 9:28 PM

    keren sob . kapan-kapan saya coba..

    ReplyDelete
  21. Iman YusufSeptember 9, 2013 at 2:30 PM

    Thanks bro :c

    ReplyDelete
  22. AnonymousSeptember 9, 2013 at 10:03 PM

    manteb gan ... keren abizz

    ReplyDelete
  23. AnonymousSeptember 13, 2013 at 7:48 AM

    Mantab om ijin coba

    ReplyDelete
  24. UnknownSeptember 19, 2013 at 2:33 PM

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

    ReplyDelete
  25. MeutrapOctober 2, 2013 at 9:44 AM

    Mantap gan izin praktek ya!

    ReplyDelete
  26. hazenNovember 18, 2013 at 1:49 PM

    cara icon nya gimana ya?

    ReplyDelete
  27. UnknownNovember 21, 2013 at 3:26 AM

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

    ReplyDelete
  28. Nicky Yolanda PutriNovember 23, 2013 at 8:11 AM

    thank's gan...

    ReplyDelete
  29. Nasrullah HalimDecember 15, 2013 at 4:53 PM

    Wah mantap sob, berhasil ...

    ReplyDelete
  30. UnknownDecember 16, 2013 at 12:01 PM

    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
  31. UnknownDecember 22, 2013 at 7:51 PM

    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
  32. ionlinerzDecember 28, 2013 at 3:59 PM

    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
  33. AnonymousDecember 29, 2013 at 11:12 AM

    ada koleksi yg lainnya gak gan?

    ReplyDelete
  34. UnknownJanuary 2, 2014 at 10:59 AM

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

    ReplyDelete
  35. Khansa NabilahJanuary 7, 2014 at 11:27 AM

    Thanks, membantu banget :)

    ReplyDelete
  36. UnknownJanuary 13, 2014 at 9:10 PM

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

    ReplyDelete
  37. AnonymousJanuary 15, 2014 at 2:18 PM

    keren gan.....

    ReplyDelete
  38. GusJanuary 16, 2014 at 6:37 PM

    asek back to topnya keren keren gan :D

    ReplyDelete
  39. wisata pisakFebruary 13, 2014 at 2:05 PM

    mantap Numpang sedot....

    ReplyDelete
  40. UnknownMarch 17, 2014 at 7:35 PM

    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
  41. UnknownMarch 20, 2014 at 6:46 PM

    :|

    ReplyDelete
  42. alfianApril 1, 2014 at 10:38 PM

    mantap gan ijin coba , visit ya gan alfianCMX

    ReplyDelete
  43. BangYus.ComApril 6, 2014 at 8:10 AM

    keren sob thanks :)

    ReplyDelete
  44. AnonymousApril 6, 2014 at 11:21 AM

    tolong di buka ya alafarisisandypratama.blogspot.com

    ReplyDelete
  45. UnknownMay 9, 2014 at 3:02 PM

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

    ReplyDelete
  46. Bos InformasiJune 10, 2014 at 1:21 PM

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

    ReplyDelete
  47. Bos InformasiJune 10, 2014 at 1:23 PM

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

    ReplyDelete
  48. Diki Pradipta Tri AtmojoJune 19, 2014 at 11:31 PM

    thankyaa, kunjung balik di blog ane ya :D

    ReplyDelete
  49. UnknownJune 26, 2014 at 5:24 PM

    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
  50. kaduthokcayJuly 16, 2014 at 8:29 PM

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

    ReplyDelete
  51. Hi MarsyaJuly 25, 2014 at 10:14 PM

    thanks for sharing :D

    ReplyDelete
  52. UnknownJuly 27, 2014 at 4:43 AM

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

    ReplyDelete
  53. IP AdminAugust 8, 2014 at 3:53 PM

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

    ReplyDelete
  54. UnknownAugust 9, 2014 at 9:45 PM

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

    ReplyDelete
  55. UnknownSeptember 26, 2014 at 1:30 PM

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

    ReplyDelete
  56. Edhay76October 9, 2014 at 12:40 PM

    .makasih gan..." :a

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

    ReplyDelete
  57. UnknownNovember 5, 2014 at 6:40 PM

    makasih info-nya

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

    ReplyDelete
  58. UnknownNovember 7, 2014 at 8:47 AM

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

    ReplyDelete
  59. WhateverNovember 7, 2014 at 3:08 PM

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

    ReplyDelete
  60. Ahmad YusufNovember 7, 2014 at 10:55 PM

    gan bisa tombol nya di geser ke kiri dikit?

    ReplyDelete
  61. UnknownNovember 22, 2014 at 5:02 AM

    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
  62. UnknownDecember 1, 2014 at 12:50 AM

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

    ReplyDelete
  63. UnknownDecember 15, 2014 at 1:53 PM

    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
  64. BAIK BULIRDecember 23, 2014 at 8:04 AM

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

    ReplyDelete
  65. AnonymousDecember 26, 2014 at 1:02 AM

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

    ReplyDelete
  66. AdminDecember 28, 2014 at 10:29 AM

    Mantap!! :g

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

    ReplyDelete
  67. seomarketJanuary 10, 2015 at 1:18 AM

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

    ReplyDelete
  68. AnonymousJanuary 12, 2015 at 4:47 PM

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

    ReplyDelete
  69. yimmyummyJanuary 14, 2015 at 11:41 PM

    thankyou.. ijin ambil satu :g

    ReplyDelete
  70. UnknownJanuary 25, 2015 at 6:35 PM

    ane sedot satu gan, udah nampang di blog :d

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

    ReplyDelete
  71. UnknownFebruary 5, 2015 at 3:05 PM

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

    ReplyDelete
  72. UnknownFebruary 6, 2015 at 9:21 PM

    ijin langsung praktek gan di Informasi PJU

    ReplyDelete
  73. acemaxs31February 7, 2015 at 3:25 PM

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

    ReplyDelete
  74. UnknownFebruary 21, 2015 at 10:10 AM

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

    ReplyDelete
  75. UnknownMarch 28, 2015 at 3:51 PM

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

    ReplyDelete
  76. UnknownApril 4, 2015 at 1:27 PM

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

    ReplyDelete
  77. adminMay 27, 2015 at 2:21 AM

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

    ReplyDelete
  78. UnknownAugust 21, 2015 at 4:21 AM

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

    ReplyDelete
  79. Afdhal IlahiSeptember 24, 2015 at 3:16 AM

    nice gan ,,back ya afdhalilahi.com

    ReplyDelete
  80. UnknownOctober 19, 2015 at 7:36 PM

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

    ReplyDelete
  81. MI NW SuelaNovember 28, 2015 at 1:08 AM

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

    ReplyDelete
  82. Nisita Kirana PratiwiDecember 16, 2015 at 5:27 PM

    keren kok gan. adda gk gmbr lain ya gan?

    ReplyDelete
  83. AnonymousJanuary 19, 2016 at 4:23 PM

    koq ada tulisan sumber back to topnya di tempat widget

    ReplyDelete
  84. Thohir GaleryFebruary 27, 2016 at 1:52 PM

    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