Cara Menambahkan Reading Progress Bar di Blogger

Minggu, 20 Februari 2022

Reading Progress Bar adalah fitur hebat untuk blog yang memberikan gambaran tentang panjang sebuah artikel dan memberikan pengalaman optimal kepada visitor Anda.

Untuk cara menambahkan Indikator Posisi Membaca ke blogger, kita harus mengikuti langkah-langkah sederhana, yaitu masuk blogger dashboard ==> template ==> edit HTML.

Sebelum mengambil tindakan apa pun, Anda di sarankan untuk membuat cadangan template yang ada sehingga jika terjadi kesalahan, Anda masih memiliki template blog yang sebelumnya.

Setiap langkah harus diikuti dengan sangat hati-hati untuk menghindari kesalahan. Karena yang akan diterapkan nantinya adalah Javascript, kemudian CSS, lalu kemudian kode HTML.

Menambahkan Kode Javascript

Salin kode Javascript berikut dan tempelkan tepat di atas tag </body>,

/*<![CDATA[*/

window.onscroll = function() {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("myBar").style.width = scrolled + "%";}

/*]]>*/

</script>

Menambahkan kode CSS

Sekarang salin kode CSS dibawah lalu tempelkan tepat di atas ]]></b:skin> atau </style>

.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}

Menambahkan Kode HTML

Setelah itu, salin kode HTML berikut dan tempelkan tepat di bawah tag <body>,

</div>

Itulah beberapa cara untuk menambahkan reading progress bar di blogger, semoga bermanfaat...

#reading progress bar elementor, #reading progress bar jquery, #reading progress bar wordpress, #reading progress bar html, #reading, #progress bar css, #reading progress bar js, #reading progress bar wordpress plugin, #reading progress bar codepen, #javascript reading progress bar, #jquery reading progress bar, #reading progress bar notion,