Cara Membuat Indikator Persen Saat Scroll Artikel di Blog

Indikator Persen saat Scroll artikel. 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 sepeser.com akan berbagi tutorial bagaimana cara membuat indikator persen ketika halaman blog di scroll ke bawah ataupun ke atas.

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%.

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

Cara membuat indikator gulir saat postingan halaman di scroll

Indikator saat scroll

Indikator Persen Saat Scroll Postingan

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.

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.

Sebelumnya juga admin sudah berbagi cara membuat halaman terhapus redirect otomatis dan juga tentang cara memasukan emoticons menarik pada kotak komentar - update. Berikut ini buat kamu yang ingin memasang indikator persen saat blog di scroll untuk menambah daya tarik tampilan blog kamu.

Cara 1: Membuat Indikator Persen di Tema Blogger

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 2: Membuat Indikator Persen di Widget Blogger

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>