Membuat Reading Progress Bar Otomatis di Postingan Blogger

Daftar Isi

Hallo sobat, saya akan membagikan tentang membuat progress scrollbar otomatis di postingan blogger. Atribut ini hanya muncul di postingan saat kita scrolling atau menggulirkan dan sekaligus membacanya. Cukup menarik bukan?

Reading Progress Bar, yang berfungsi sebagai petunjuk akurat panjang artikel. Jadi, pembaca dapat mengetahui rentang panjang konten artikel tersebut.

Atribut ini hanya muncul di badan postingan (post body) dan akan menghilang saat melewati akhir artikel. Pada dasarnya, progress digunakan untuk memfasilitasi pengguna dalam melihat seluruh konten dalam sebuah postingan yang panjang. Pada postingan panjang ditampilkan di halaman Blogger, sebuah progressbar ini akan muncul di atas.

Selain itu, reading progress bar juga dapat memberikan petunjuk visual tentang panjangnya postingan dan posisi saat ini. Pembaca dapat melihat seberapa jauh mereka telah membaca atau menggulir dalam postingan dengan melihat perbandingan posisi scrollbar terhadap total panjang postingan. Berikut ini adalah contoh blog demo yang saya buat.

Cara Membuat Reading Progress Bar di Postingan Blogger

Pertama masuk dulu Blogger dan selanjutnya ke tema > edit html > pastekan kode diatas </style>. Sebelum itu cadangkan atau backup tema-mu terlebih dahulu.

/* Reading Progress Bar Otomatis di Postingan */
progress{vertical-align:baseline}
.post-progress{position:fixed;z-index:90;top:0;right:0;left:0;width:100%;height:8px;transition:opacity 0.15s ease-out 0.3s;border:0;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.post-progress:not([value]){display:none}
.post-progress,.post-progress[value]::-webkit-progress-bar{background-color:transparent}
.post-progress[value]::-webkit-progress-value{background-color:#f7cb4d}
.post-progress[value]::-moz-progress-bar{background-color:#f7cb4d}
.post-progress[value="1"]{opacity:0}

Selanjutnya cari kode atribut yang mengarah ke (post body) seperti : <b:include data='post' name='postBody'/> pastekan kode dibawah ini atasnya. Setiap template berbeda-beda name='post-body' nya, jadi silahkan cari yang merujuk ke post-body.

<b:if cond='data:view.isPost'><progress class='post-progress'/></b:if>

Silahkan tambahkan atribut javascript ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'>
<script>
/*<![CDATA[*/ 
const readingProgress = (e, t) =>
{
  const o = document.querySelector(e),
    n = document.querySelector(t),
    a = () =>
    {
      const e = o.getBoundingClientRect(),
        t = window.innerHeight / 2;
      Math.round(n.max - n.value);
      e.top > t && (n.value = 0), e.top < t && (n.value = n.max), e
        .top <= t && e.bottom >= t && (n.value = n.max * Math.abs(e
          .top - t) / e.height), window.addEventListener("scroll",
          a)
    };
  window.addEventListener("scroll", a)
};
/* sesuaikan atribut post-body masing-masing template */
! function()
{
  const a = document.querySelector(".post-progress");
  a && readingProgress(".postBody", ".post-progress")
}();
/*]]>*/</script> 
  </b:if>
  

Pada bagian tag postBody harus sama dengan kode tag = post-body di templatemu.

Nah itulah cara membuat reading progress bar otomatis di postingan blogger. Apabila tidak work atau tidak bekerja, kemungkinan kamu salah menempatkan atribut kode html bagian post body. Demikian sobat tutorial ini agar blog mu lebih cantik dan enak dipandang.