back-to-topCara Membuat Tombol Back To Top

Oleh: Gunawan - Update Terbaru: 3 April 2020
Artikel ini berisi tentang Cara Membuat Tombol Back To Top
Cara Membuat Tombol Back To Top

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. Untuk Membuat Tombol Back To Top:

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) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').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.

19 Comments on “Cara Membuat Tombol Back To Top

  1. Thanks sangat membantu,
    btw cara membuat blockquote seperti diatas bagaimana ya?
    jangan lupa kunjungi blog saya https://infodigitalis.blogspot.com/

    1. Dapet dari Blog Kang Ismet, trus di modif dikit… udah lama

  2. Terimakasih sudah berbagai. Sukses selalu untuk website anda.. Salam

  3. Keren postingannya!

  4. thank infonya gan :-bd

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

    Terimakasih

  6. thx mas, lngsung tk coba ey :-bd

  7. terimakasih atas informasinya, semoga bermanfaat.

  8. langsung dicoba mas bro…. thank ya

  9. lollol

    @@,

    😉

    :-bd

    :p

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

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

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

  13. 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 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *