√ Cara Memberikan Efek Scroll Halus Jump Link Saat Diklik Pada Blog Atau Website
Selamat datang di Web TulisanIB. Pada artikel kali ini penulis akan membagikan tutorial agar jump link pada artikel di blog atau website saat diklik menghasilkan efek scrolling yang halus saat diklik.
Bagi yang belum tahu apa itu jump link, akan penulis jelaskan.
Jump link adalah link yang terdapat pada sebuah artikel di blog atau website yang kegunaannya ketika link ini diklik untuk berpindah menuju bagian artikel yang sudah ditandai dengan cepat.
Jump link banyak dan sering digunakan untuk membuat table of contents atau daftar isi pada sebuah artikel agar pengunjung bisa langsung mengeklik suatu poin yang penting pada artikel tersebut dengan cepat.
Jump link biasa atau default biasanya saat diklik akan langsung teleportasi dengan sekejap ke poin yang sudah ditandai pada artikel tersebut. Ini memberikan kesan seperti kurang bagus.
Dengan memberikan efek scroll halus pada jump link saat diklik, maka jump link saat diklik tidak akan berteleportasi ke poin yang sudah ditandai pada artikel, tetapi akan melakukan scroll halus menuju poin yang sudah ditandai pada artikel.
Bagaimana? Cukup menarik bukan?
Bagi kalian yang di blog atau websitenya tidak terdapat jump link tidak perlu melakukan tips ini karena akan sangat tidak berguna.
Berbeda halnya jika di blog atau website kalian terdapat jump link-nya maka tips ini bisa kalian terapkan agar blog atau website kalian semakin cantik dan nyaman digunakan untuk para pengunjung atau pembaca blog atau website kalian.
Sebelum ke tutorialnya, kalian harus memasang jQuery terlebih dulu pada blog atau website kalian agar skrip javascript efek scroll halus pada jump link-nya bisa berjalan.
Baiklah, langsung saja berikut adalah langkah-langkahnya.
- Pertama masuk ke dashboard Blogger.com dulu melalui link berikut ini:
https://www.blogger.com
Blogger.com menampilkan gambar makhluk bernyawa di dalam web-nya. Baca artikel saya yang berjudul "Cara Mematikan Gambar Pada Browser dan Browsing di Internet Tanpa Menampilkan Gambar" bagi kalian yang ingin menonaktifkan gambar tetapi belum tahu caranya menonaktifkan gambar pada browser.
- Lalu masuk ke menu "Tema".
- Klik icon tanda panah yang mengarah ke bawah yang berada di tombol berwarna orange di sebelah kanan tulisan "SESUAIKAN".
- Akan muncul menu dropdown, silahkan klik pada "Cadangkan" untuk membackup apabila nanti ada kesalahan bisa dipulihkan kembali (optional). Lalu klik "Edit HTML".
- Cari di mana kalian menaruh skrip jQuery pada template blog atau website kalian. Tekan tombol Ctrl + F pada keyboard untuk memunculkan form pencarian.
- Lalu paste kode berikut di bawah ini tepat di bawahnya kode skrip jQuery.
<script>//<![CDATA[ $(document).ready(function(){$('a[href^="#"]').on("click",function(o){o.preventDefault();var t=this.hash,n=$(t);$("html, body").stop().animate({scrollTop:n.offset().top},900,"swing",function(){window.location.hash=t})})}); //]]></script> - Lalu simpan dengan mengeklik icon bergambar disket atau kartu memori di sebelah kanan atas yang apabila icon tersebut didekatkan dengan mouse akan muncul tulisan "Simpan".
- Apabila muncul kotak persegi panjang bertuliskan "Update berhasil." itu tandanya template-nya telah berhasil kita save.
- Selesai, sekarang coba kalian tes dengan mengeklik jump link yang terdapat pada artikel blog atau website kalian, jika jump link-nya setelah diklik memberikan efek scroll halus menuju poin yang sudah ditentukan itu tandanya kalian telah berhasil.
Bagaimana? Cukup mudah bukan? Insya Allah sangat mudah sekali. Bagi yang masih bingung bisa dibaca lagi langkah-langkahnya di atas agar semakin paham.
Sekian apa yang bisa penulis sampaikan pada artikel "Cara Memberikan Efek Scroll Halus Jump Link Saat Diklik Pada Blog Atau Website" ini. Semoga artikel ini bisa bermanfaat untuk semua orang dan terutama bagi yang sedang membutuhkan artikel ini.