Skip to content

Cara Membuat Tombol Back To Top

Aura Ilmu » Blog » Cara Membuat Tombol Back To Top
Oleh: Gunawan | Update Terakhir: 17 February 2019 | 16 Comments
back to top

Image: back to top, pixabay.com

Tombol Back To Top adalah membuat sebuah tombol kembali ke atas dengan efek geser yang halus ke atas bisa jadi merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol ini dibuat dengan tampilan dan sentuhan yang cukup elegan.

Tombol back to top memiliki peranan cukup penting bagi sebuah blog atau website dengan konten yang berat dan memiliki halaman yang panjang. Untuk website yang memiliki banyak informasi pada halamannya, akan membuat konten-konten lain terlewati, tanpa disadari menggulir jauh ke bawah halaman.

Sedangkan tombol ini memberikan fungsi baik cara untuk melompat ke atas dengan mudah dan singkat, daripada menggerakannya dengan mouse. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya.

Bisa jadi jika sebuah blog yang sulit untuk dijelajahi, maka akan membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidaklah memberatkan, serta tombol ini juga kompatibel untuk hampir kebanyakan browser/peramban.

Dengan kode tersebut dibawah anda pun dapat mengedit sebagaimana mestinya sesuai keinginan, seperti efek fade in dan fade out, serta gambar tombolnya.

Tutorial dibawah ini menunjukan cara membuat tombol back to top dengan mudah dan cukup singkat, hanya memerlukan waktu beberapa menit saja. Berikut langkah-langkahnya:

1. Login ke Blogger.
2. Klik Template kemudian Edit HTML.
3. Klik kiri 1 kali di kotak template.
4. Tekan Ctrl+F untuk pencarian cepat.
5. Cari kode </head> menggunakan kotak pencarian, kemudian enter.
6. Masukan kode di bawah ini diatas kode </head> Tapi jika anda sudah menerapkan kode ini, maka lewati langkah ini. Kode dibawah ini sangat umum digunakan di berbagai blog dengan banyak versi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

Catatan: jika telah ada maka lewati langkah diatas, tapi usahakan menggunakan versi 2.x

7. Masih di tempat yang sama – Cari kode </head>
8. Masukan script dibawah ini diatas </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

Keterangan script tombol back to top
Warna Biru adalah jarak tombol back to top muncul dan tersembunyi
Warna Hijau adalah kecepatan pada saat melompat ke atas

9. Cari kode ]]></b:skin> atau </style>
10. Masukan kode CSS dibawah ini diatas ]]></b:skin> atau </style> di bagian head.

#ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:40px; right:30px;cursor:pointer;display:none;opacity:0.7;}
#ScrollToTop:hover{opacity:1;}

Warna Hijau adalah posisi dari tombol tersebut.

11. Cari kode </body>
12. Masukan kode di bawah ini di atas </body>

<div id='ScrollToTop'><img alt='Back to top' src='//4.bp.blogspot.com/-Izmqq2QVcY8/UmMQyNKbhYI/AAAAAAAABcI/a28qtFC2uto/s1600/backtotop.png'/></div>

Warna pink adalah link dari gambar tombol back to top, sebaiknya diganti / disave dan upload menggunakan tempat upload gambar masing-masing.
13. Save Template dan lihat hasilnya.

Demikian cara membuat tombol back to top dengan tampilan yang cukup menarik, semoga dapat bermanfaat.

(average: 2.50 out of 5, 2 votes)
loadingstarsLoading...

16 Komentar: Cara Membuat Tombol Back To Top

  1. Garuda Web Development

    Tengkiw sharingnya…

    Reply
  2. yahya25.id

    Keren postingannya!

    Reply
  3. info menarik

    thank infonya gan :-bd

    Reply
  4. sahabatblogger77

    jika masangnya menggunakan gadget kode CSSnya apa gan…soalnya banyak banget yang harus dibuat kodenya

    Terimakasih

    Reply
  5. dedi prayogi

    thx mas, lngsung tk coba ey :-bd

    Reply
  6. obat kolesterol

    terimakasih atas informasinya, semoga bermanfaat.

    Reply
  7. Ahmad Sayadi

    Lik

    Reply
  8. Apk

    langsung dicoba mas bro…. thank ya

    Reply
  9. Anonim

    lollol

    @@,

    😉

    :-bd

    :p

    Reply
  10. Rickonblog

    wah…keren sob..pake js…dlunya sy cm taunya dtmbh # aja…thanks ya….

    Reply
  11. Tatang Gunawan S

    ya begitulah 🙂 saya suka mampir ko… hampir sama setiap yang komen..

    Reply
  12. Aditya-Web.com

    Bagus mas, kebetulan sudah saya terapkan di blog saya. :-bd

    Reply
  13. Indri Lidiawati

    Lumayan banyak scriptnya ya mas,,, tapi keren jadinya nanti :-bd
    btw ini rupanya adminnya suka ma'em gado2 ya mas,,, sama dunk seperti saya, hehehe 😀
    Silakan mampir ke gubuk derita saya, hmmm 🙂

    Reply
  14. Anonim

    lol =D

    Reply

Leave a Reply

Your email address will not be published.