Cara Memasang Reading Progress Bar di Blogger

Arsipbiru.com - Selamat datang di Arsipbiru. Pada kesempatan kali ini, saya akan membagikan tutorial terkait bagaimana cara memasang Reading Progress Bar di Blogger. Perlu diketahui bahwa Reading Progress Bar adalah salah satu fungsi yang menampilkan indikator progress ketika sedang membaca suatu artikel atau konten di suatu blog atau website. Umumnya disertai dengan prosentase. Terkadang juga hanya menampilkan progress dengan warna tertentu.

Reading Progress Bar berguna untuk menunjukkan pengguna seberapa banyak artikel yang tersisa untuk dibaca ketika menggulir ke bawah. Hal ini tentu akan mendorong pengunjung untuk terus membaca artikel Anda sampai selesai.

Selain itu, Reading Progress Bar juga dapat meningkatkan tampilan suatu blog atau website terlihat lebih profesional. Untuk melihat tampilan Reading Progress Bar, pengguna hanya perlu membaca artikel hingga selesai atau menggulirnya sampai ke bagian bawah. Melihat tampilan progress bar yang unik tersebut, tentu akan membuat pengunjung termotivasi untuk menyelesaikan artikel yang sedang mereka baca.

Beberapa situs juga telah memasang Reading Progress Bar, salah satunya Blog Yazid Tips. Tutorial kali ini juga saya dapatkan dari blog tersebut. Jika Anda tertarik untuk memasangnya, silahkan ikuti langkah-langkah berikut ini.

Cara Memasang Reading Progress Bar di Blogger

Sebelum memasang Reading Progresa Bar, alangkah baiknya Anda cadangkan terlebih dahulu template Anda. Jika terjadi kesalahan dalam pemasangan, Anda dapat mengembalikan template tersebut ke pengaturan terakhir. Jika Anda telah mencadangkan template Anda, silahkan lanjutkan tutorial memasang Reading Progress Bar di Blogger berikut ini.

1. Pertama, silahkan masuk ke akun Blogger masing-masing.

2. Selanjutnya, pilih tab menu Tema > klik ikon panah ke bawah di samping menu Sesuaikan > klik Edit HTML.

3. Tambahkan kode CSS berikut ini di atas atau sebelum kode ]]></b:skin> atau </style>.

/* Ycprogress Bar */

.ycprogress-bar{background-color:#009ee0;position:fixed;top:0;left:0;z-index:999;width:0%;height:4px;}

Untuk mengubah ukuran progress bar, silahkan ganti nilai pada height:4px dengan ukuran yang Anda inginkan.
Untuk mengubah warna progress bar, silahkan ganti kode hex #009ee0 dengan kode hex warna keinginan Anda.

<div class="ycprogress-bar" id="progressbar"></div>

</div>

<script>

//<![CDATA[

window.addEventListener("scroll",myFunction);function myFunction(){var winScroll=document.body.scrollTop||document.documentElement.scrollTop;var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;var scrolled=(winScroll/height)*100;document.getElementById("progressbar").style.width=scrolled+"%"}

//]]>

</script>