Cara Mudah Membuat Indikator Persen Saat Halaman Artikel di Scroll ke Bawah

Apakah sobat pernah mendapati blog atau website ketika postingannya di scroll atau di gulir ke bawah menampilkan indikator persen? ini unik sekali. Nah, pada kesempatan ini akan berbagi tutorial bagaimana cara membuat indikator persen ketika halaman blog di scroll ke bawah ataupun ke atas.

Ketika berkunjung ke sebuah blog, scroll atau gulir ini sering dilakukan untuk melihat keseluruhan artikel yang mungkin tidak cukup hanya pada satu layar tanpa digulir. Scroll lebih mudah dilakukan jika menggunakan mouse, tinggal gulir saja tombol scroll yang biasanya ada ditengah mouse maka halaman akan bergeser sesuai keinginan. 

Tombol gulir atau scroll adalah tombol yang digunakan untuk menaikan atau menurunkan halaman, biasanya ada di sisi kanan blog. Di sini kita akan membuat indikator persen pada samping tombol tersebut yang berguna menampilkan animasi untuk mengetahui berapa persen halaman tersebut telah digulir.

Indikator saat scroll

Sebelumnya juga admin sudah berbagi redirect otomatis dan juga tentang emoticons pada komentar. Berikut ini buat kamu yang ingin memasang indikator persen saat blog di scroll untuk menambah daya tarik tampilan blog kamu. 

Ada dua opsi yang bisa kamu pilih ditutorial kali ini yaitu kamu bisa memasukan kodenya langsung ke dalam tema / template blog yang mungkin agak sulit bagi kamu yang baru dan masih belajar nge-blog dan memasukannya kedalam widget blog yang pastinya lebih mudah pengerjaannya.

Cara Pertama

1. Di blog kamu di Blogger.
2. Masuk ke Tema - Klik samping Sesuaikan - Pilih Edit HTML

Edit HTML

3. Letakkan kode dibawah ini diatas kode ]]></b:skin>

#sepesergulir {display: none;position: fixed;top: 0;right: 20px;z-index:500;padding:3px 8px;background:rgb(1, 148, 60);color: #fff;border-radius:3px;}#sepesergulir:after{content: " ";position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: rgb(1, 148, 60);}

4. Letakkan kode di bawah ini di atas kode </body>

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

<script type='text/javascript'>

//<![CDATA[

var scrollTimer = null;

$(window).scroll(function() {

var viewportHeight = $(this).height(),

scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,

progress = $(this).scrollTop() / ($(document).height() - viewportHeight),

distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#sepesergulir').height() / 2;

$('#sepesergulir')

.css('top', distance)

.text(' (' + Math.round(progress * 100) + '%)')

.fadeIn(100);

if (scrollTimer !== null) {

clearTimeout(scrollTimer);

}

scrollTimer = setTimeout(function() {

$('#sepesergulir').fadeOut();

}, 1500);

});

//]]>

</script>

5. Letakan kode di bawah ini diatas kode <body>

<div id='sepesergulir'></div>

6. Save Tema.

Selesai. Oh yah, jika kamu kesulitan dengan tutorial di atas maka admin bagikan cara pemasangan yang lebih mudah, berikut adalah caranya.

Cara ke 2

1. Di Blog kamu di Blogger 😄
2. Pilih menu Tata Letak ➜ Tambahkan Gadget 👉 HTML/JavaScript

HTML / JavaScript

3. Masukan kode dibawah ini:

<style>

#sepesergulir {display: none;position: fixed;top: 0;right: 20px;z-index:500;padding:3px 8px;background:rgb(1, 148, 60);color: #fff;border-radius:3px;}

#sepesergulir:after{content: " ";position: absolute;top: 50%;right: -8px;height: 0;width: 0;margin-top: -4px;border: 4px solid transparent;border-left-color: rgb(1, 148, 60);}

</style>

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

<script type='text/javascript'>

//<![CDATA[

var scrollTimer = null;

$(window).scroll(function() {

var viewportHeight = $(this).height(),

scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,

progress = $(this).scrollTop() / ($(document).height() - viewportHeight),

distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#sepesergulir').height() / 2;

$('#sepesergulir')

.css('top', distance)

.text(' (' + Math.round(progress * 100) + '%)')

.fadeIn(100);

if (scrollTimer !== null) {

clearTimeout(scrollTimer);

}

scrollTimer = setTimeout(function() {

$('#sepesergulir').fadeOut();

}, 1500);

});

//]]>

</script>

<div id='sepesergulir'></div>

4. Save atau simpan.

Nah sekarang kamu tinggal mengujinya dengan cara mengscroll halaman blog kamu.

Jika kamu masih kebingungan bagaimana cara pemasangannya di Blogger, maka kamu bisa menonton video tuorialnya yang sederhana di bawah ini:

Video Tutorial

Bagaimana tampilannya, keren kan? Nah, semoga dengan memasang ini blog kamu bisa tampil lebih keren, unik dan menarik. 

👉 LIVE DEMO 👈

Persen seringkali dinyatakan sebagai angka bagian dari keseluruhan, dimana bagian keseluruhan itu adalah 100%. Persen bisa menunjukan nilai atau tingkat suatu bilangan. Persen seringkali juga dikaitkan dengan pekerjaan. Berapa persenkah pekerjaanmu selesai hari ini? jika pekerjaan telah selesai sampai akhir maka seringkali dinyatakan 100%. 

 

Sekian postingan dikesempatan ini, Semoga bermanfaat.