Cara Membuat Reading Progress Bar di Blogger dengan Warna Gradasi

Saat sedang membaca sebuah artikel di beberapa website terkadang kita sering menemukan ada bar yang bergerak secara horizontal pada bagian atas yang mengikuti seberapa panjang artikel yang kita baca. Ketika Anda men-scroll pada sebuah halaman maka progress bar akan berjalan dari arah kiri ke kanan dan sebaliknya.

Fitur ini tentunya lumayan berguna buat pembaca untuk mengetahui seberapa panjang lagi sebuah artikel akan selesai di baca.

Untuk melihat penampakan Reading Progress Bar dengan warna Gradient silahkan Anda lihat Demo nya dan scroll ke bawah pada halaman posting.

View DEMO

Jika Anda tertarik untuk memasang widget tersebut di blog kesayangan Anda, maka silahkan ikuti panduannya berikut ini.

Cara Memasang Reading Progress Bar di Blogger.

Silahkan tambahkan kode berikut ini tepat diatas </head>

<style type='text/css'>
/* 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:1000}
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>

Note :

Warna kuning untuk mengatur ketinggian garis horizontal, dan yang berwarna merah itu adalah untuk warna gradasi, silahkan ganti dengan kode warna yang lainnya.

Selanjutnya tambahkan lagi kode berikut ini dan tempatkan di bawah kode <body>

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

Terakhir tambahkan kode js ini dan letakan di atas kode </body> dan simpan tema

 <script type='text/javascript'>
//<![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>

Apabila Reading Progress bar tidak muncul di blog Anda, silahkan tambahkan di atas kode </body> kode jQuery berikut ini.

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

Jadi Reading Progress Bar ini adalah widget untuk memberi tahu kepada pembaca seberapa panjang halaman di situs Anda, selain itu juga bisa mempercantik tampilan Blog Anda.

Semoga Bermanfaat.