Jika blog anda artikelnya panjang panjang. Mungkin dengan punya tombol scroll back to top. Akan sangat membantu pembaca blog anda untuk mereka kembali ke atas halaman dengan sekali tap/klik.
Di artikel ini, Blogkudewe akan beri tutorial cara membuat scroll back to top tanpa install plugin.
Tidak terlalu sulit kok. Cukup ikuti tutorial ini dengan baca pelan pelan dan saya jamin anda akan bisa membuat tombol scroll back to top sendiri.
Untuk demo-nya, bisa anda lihat di sini. Ya! Ini kode yang sama yang di pakai Blogkudewe untuk membuat Scroll Back to Top.
Cocok?
OK, kita mulai dengan membuat file untuk jQuery dulu.
Buat file jQuery di cPanel untuk tombol back to top
Pertama, anda perlu log in ke cPanel web hosting anda.
Setelah log in, di halaman beranda cPanel klik File Manager. File manager akan membuka di tab baru. Lihat screenshot dibawah untuk jelasnya.
Di halaman File Manager, pergi ke folder public_html > wp-content > themes > tema aktif anda > folder js.
Setelah berada di folder js, klik tombol + File di kiri atas halaman File Manager untuk membuat file baru. Lihat screenshot.
Sebuah jendela akan muncul. Beri nama file baru dengan top-btn.js terus klik tombol Create New File. Lihat screenshot.
Setelah selesai, kembali ke dasbor WordPress anda. Lalu pergi ke Tampilan > Theme Editor.
Di halaman Theme editor, klik panel menu di bagian kanan halaman Theme Editor, lalu klik JS. Nah di sana file top-btn.js yang anda buat di cPanel tadi sekarang ada di sana.
Copy dan paste kode jQuery di bawah. Ke kode aditornya top-btn.js
// Back to Top Script. (function($) { // Make sure JS class is added. document.documentElement.className = "js"; // Run on page scroll. $(window).scroll( function() { // Toggle header class after threshold point. if ( $(this).scrollTop() > 100 ) { $(".top-btn").addClass('sticky'); } else { $(".top-btn").removeClass('sticky'); } }); $('.top-btn').click(function() { // When arrow is clicked $('body,html').animate({ scrollTop : 0 // Scroll to top of body }, 500); }); })(jQuery);Lihat gambar tangkapan layar (screenshot) berikut untuk lebih jelasnya.
Memberitahu WordPress tentang fungsi script
Ya! anda harus memberitahu WordPress untuk meng-aktifkan fungsi script tersebut.
Caranya adalah, dengan menggunakan kode PHP. Copy dan paste kode di bawah, ke halaman Fungsi Tema (funtion.php) editor.
// Enqueue custom scripts. add_action( 'wp_enqueue_scripts', 'blogkudewe_custom__scripts' ); function blogkudewe_custom__scripts() { wp_enqueue_script( 'genesis-sample-top-btn-script', get_stylesheet_directory_uri() . '/js/top-btn.js', array( 'jquery' ), null, true ); }Penting! kali ini di halaman editor Fungsi Tema (funtion.php) loh ya! Dan kalau menyalin, jangan sampai ada satupun kode yang tertinggal.
Silahkan lihat screenshot di bawah untuk lebih jelasnya.
Klik tombol ‘Perbarui Berkas’ untuk menyimpan perubahan.
Memasang Tombol Scroll Back To Top di WordPress
Selanjutnya, memasang tombol Scroll Back To Top. Caranya juga menggunakan kode PHP. Di sini, kita menempatkannya tombolnya di bagian footer.
Copy dan paste kode PHP di bawah, ke halaman Fungsi Tema (funtion.php) sama seperti waktu enqueue script tadi.
//Back to top btn. add_action( 'wp_footer', 'blogkudewe_back_to_top_btn' ); function blogkudewe_back_to_top_btn() { echo '<div id="top-btn "><a class="top-btn" href="#top" title=”ToTop”><span class="dashicons dashicons-arrow-up-alt2"></span></a></div>'; }Agar kode terlihat rapi, beri spasi dari kode sebelumnya satu baris. Seperti dalam contoh screenshot di atas tadi.
Nah, sekarang situs anda sudah punya tombol Scroll back to Top. Masalahnya, tampilanya masih jelek. Jadi kita perlu mempercantiknya dengan kode CSS.
Mempercantik tombol Scroll back to Top menggunakan kode CSS
Untuk mempercantik tampilan Scroll Back to Top button. Tempatkan kode CSS berikut ke editor CSS bawaan WordPress. Jadi tidak perlu merubah CSS asli tema aktif anda.
Caranya, peri ke menu samping WP Admin > Tampilan > Sesuaikan > CSS tambahan.
/* Back To Top btn ------------------------------------------*/ .js .top-btn.sticky { visibility: visible; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .top-btn { overflow: hidden; visibility: hidden; display: block; float: right; bottom: 3%; right: 1%; z-index: 9999; width: 40px; height: 40px; position: fixed; background-color: rgba(0,0,0,0.4); border-radius: 50%; border-bottom: none; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .top-btn span { color: #fff; margin: 0; position: relative; left: 6px; top: 8px; font-size: 1.2rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .top-btn:hover, .top-btn:focus { outline: none; text-decoration: none; background-color: rgba(0,0,0,0.7); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }Lihat screenshot untuk lebih jelasnya;
Setelah anda menempel kode CSS, coba scroll halaman situs anda untuk test. Nah, sekarang tombol scroll back to top terlihat cantik jika anda melakukanya tahapan pemasangan dengan benar 🙂
Kesimpulan & catatan
Itulah cara membuat Scroll Back to Top Button sendiri di WordPress tanya memakai plugin.
Tidak susah susah amat kan?
OK, Selamat mencoba! kalau anda bingung jangan murung. Tanya saja, saya akan menjawab secepatnya.
Artikel yang sama Pertama kali muncul di blog yang satunya Digimanx.com. Hanya saja, di sana lebih condong khusus ke tema Genesis.
Kalau anda memakai tema Genesis dari StudioPress, bisa lihat tutorial lengkapnya melalui link berikut: .