Membuat Reading Progress Bar di Blogger

بسم الله الرحمن الرحيم

Saat membaca artikel di beberapa situs / blog, terkadang ktia menemukan ada bar di bagian atas yang bergerak horizontal mengikuti seberapa jauh kita membaca artikel tersebut. Sebagai contoh, saat kamu membaca artikel di blog ini, kamu akan melihat ada horizontal bar berwarna merah yang bergerak ke kanan atau kiri bergantung seberapa jauh kamu membaca tulisan tersebut (lihat gambar di bawah)

Reading Progress Bar di bagian atas saat membaca artikel (berwarna merah)

Fitur ini cukup berguna bagi pembaca untuk mengetahui sebanyak apa lagi tulisan tersebut selesai dibaca. Di Wordpress, fitur ini sudah ada plugin nya, nah bagaimana kalau di Blogger? 

Blogger tidak menyediakan fitur tersebut, tapi kita bisa membuatnya sendiri. Caranya cukup mudah, dengan menambahkan kode-kode di bagian edit template blogger kita. Saya menemukan kode-kodenya dari Blog Andy Jiang, namun di sana hanya dicantumkan kodenya, nah saya bagi cara pengaplikasiannya untuk di Blogger. Caranya ikuti langkah-langkah di bawah yaa

1. Login ke Blogger, lalu pilih tab Themes. Pilih Edit HTML

2. Cari kode berikut [code type="HTML"]]]></b:skin>[/code] lalu copy paste kode berikut di atasnya:

#Reading-progress { position: fixed; top: 0px; width: 100%; height: 2px; margin: 0px; left: 0px; z-index: 99; } .bar { height: 2px; background: #5CCC5C; position: fixed; top: 0px; z-index: 99; } 


3.  Cari kode [code type="HTML"]</body>[/code] berikut lalu copy paste kode berikut di atasnya:
<script type="text/javascript"> window.addEventListener('scroll', function(e) { var s = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop; var body = document.body; var html = document.documentElement; var d = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); var c = window.innerHeight; var position = (s / (d - c)) * 100; document.getElementById('Progress-bar').setAttribute('style', 'width: ' + position + '%'); }); </script>

4. Cari kode [code type="HTML"]<b:if cond='data:post.title'>[/code] atau sejenisnya, lalu copy paste kode berikut:

[code type="HTML"] <div id="Reading-progress"> <span class="bar" id="Progress-bar"></span> </div> [/code]

5. Setelah semua kode ditambahkan, klik Save Theme lalu lihat tulisan / artikel blog kamu.

Voila! Reading Progress Bar sudah muncul!
Untuk mengubah warna bar nya, cukup ganti kode warna setelah kode background: di poin kedua, untuk memperbesar ukuran bar, ubah angka setelah kode height: di poin kedua.

Sekian, cara untuk membuat Reading Progress Bar di Blogger.
Semoga Bermanfaat!