Membuat Reading Progress Bar di Blogger

Oleh Ai (아이) 09 Jun, 2020 Posting Komentar

Tentang Reading Progress Bar

Membuat Reading Progress Bar di Blogger ― Setelah pada tulisan sebelumnya telah dibahas tentang scroll bar percentage, maka pada tulisan kali ini akan dibahas hal yang kurang lebih sama seperti post sebelumnya, yaitu tentang reading progress bar.

Bagi kamu yang belum mengetahuinya, reading progress bar (atau yang jika diterjemahkan artinya bilah kemajuan pembacaan) merupakan sebuah bar (bilah) yang mirip seperti loading bar yang muncul pada bagian atas halaman blog yang berfungsi untuk menampilkan reading progress kepada pengunjung/pembaca blog. Maksud dari reading progress adalah pembaca dapat mengetahui sudah berapa jauh sebuah halaman blog yang telah dia baca melalui scroll yang dia lakukan pada halaman tersebut.

Reading progress bar akhir-akhir ini cukup banyak digunakan pada berbagai blog maupun situs di internet dan menjadi sebuah tren baru. Pada dasarnya untuk membuat reading progress bar seperti itu caranya cukup mudah dan tidak memerlukan sebuah proses yang kompleks dan rumit. Sebagai sebuah contoh, kamu bisa melihat hasilnya seperti apa pada halaman demo berikut.

Flat Version Gradient Version

Membuat Reading Progress Bar di Blogger

Sebelum mengetahui cara memasang reading progress bar di Blogger, terlebih dahulu perlu kamu ketahui bahwa untuk membuatnya berfungsi kamu membutuhkan javascript library bernama JQuery, jadi jika blog kamu belum dipasangi JQuery, silakan pasang dulu kode berikut ini di di atas </body>.

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

Untuk memasang reading progress seperti pada halaman demo di atas, kamu bisa mengikuti langkah-langkah berikut ini.

Buka Blogger lalu pada bagian Tema buka Edit HTML.

Membuat Persentase Scrollbar dan Reading Progress di Blogger

Temukan kode </head> dan letakkan kode berikut ini di atasnya.

Flat Version

<style>
/* Reading Progress Bar (Flat) */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#6d1bef;z-index:9999}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#6d1bef;z-index:10}
progress::-moz-progress-bar{background-color:#6d1bef;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#6d1bef;width:0%;display:block;height:inherit;z-index:10}
</style>

Gradient Version

<style>
/* Reading Progress Bar (Gradient) */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:9999}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:10}
progress::-moz-progress-bar{background:linear-gradient(45deg, #5E64EE, #5EEE66);z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background:linear-gradient(45deg, #5E64EE, #5EEE66);width:0%;display:block;height:inherit;z-index:10}
</style>

Kamu bisa mengganti bagian yang ditandai dengan kode warna yang kamu inginkan untuk warna bar yang akan tampil nantinya.
Setelah itu temukan kode <body> lalu tambahkan kode berikut di bawahnya.

<progress value='0' max='1'>
  <div class='progress-container'>
    <span class='progress-bar'></span>  
  </div>
</progress>

Dan terakhir, temukan kode </body> dan tambahkan kode berikut ini di atasnya.

<script>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>

Setelah itu simpan perubahan tersebut dan lihat hasilnya pada halaman blog kamu, akan muncul bar di bagian atas halaman blog kamu yang berubah saat halaman blog di-scroll.

Penutup

Itulah beberapa langkah yang bisa kamu lakukan untuk memasang reading progress bar di Blogger, kamu bisa memilih untuk memasang versi warna polos atau warna gradiasi. Jika kamu tidak ingin menggunakan Jquery di blog kamu, kamu bisa baca cara memasang reading progress bar tanpa jquery. Semoga pembahasan dalam tulisan ini bisa bermanfaat untuk kamu. Apabila ada hal-hal yang kurang jelas, silakan tanyakan pada kolom komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Posting Komentar untuk "Membuat Reading Progress Bar di Blogger"

Silakan sampaikan komentar kamu dengan mematuhi syarat dan ketentuan berikut:
Diperbolehkan menggunakan link, selama tidak mengarah pada situs yang mengandung perjudian, pornografi, dan konten ilegal lain. Tidak diperbolehkan promosi jualan, produk, jasa, dsb.
Tidak boleh menggunakan kata-kata yang kasar, tidak pantas, mengandung SARA, atau penghinaan. Diharapkan saling menghargai satu sama lain.
Setiap komentar segera diterbitkan setelah moderasi, pastikan komentar kamu sudah benar sebelum dipublikasikan dan backlink tidak akan dihilangkan oleh admin. Admin berhak menghapus komentar yang melanggar.
Blogwalking dan saling memberi salam diperbolehkan. Menerima pemasangan backlink dofollow, tautan ada di menu navigasi.
Gunakan Text here untuk komentar yang berisi kode singkat.
Gunakan Text here untuk komentar yang berisi kode panjang.
Setiap komentar yang mengandung kode/sintaks dengan rel code/pre di atas, wajib di-parse terlebih dahulu pada menu Alat > Script Parse di menu navigasi di atas.
Kamu juga bisa memberikan komentar bergaya cetak tebal maupun cetak miring. Komentar dengan kode HTML selain cetak tebal/miring atau link tidak diperbolehkan untuk dipublikasikan.