Cara Membuat Reading Progress Bar di Blog

Cara Membuat Reading Progress Bar di Blog

Reading progress bar adalah sebuah indikator seperti garis berwarna untuk mengetahui sejauh mana pengunjung situs Anda membaca sebuah artikel di blog atau website Anda.

Widget reading progress bar ini memilik berbagai macam jenis, ada yang berada di bagian atas blog yang berfungsi horizontal ketika Anda melakukan scroll pada sebuah halaman maka progress bar akan mengarah dari kiri ke kanan.

Ada juga dengan fungsi vertikal seperti yang sudah pernah saya bahas di artikel sebelumnya cara membuat presentase scrollbar di blog.

Nah, untuk progress bar yang akan saya buat kali ini yaitu yang memiliki fungsi horizontal dibagian atas blog.

Ada dua jenis pilihan yang saya tawarkan kepada Anda, yaitu progress bar dengan warna flat atau datar dan juga progress bar dengan warna gradient atau gradasi. Anda bisa memilihnya sesuai dengan selera masing-masing.

Baik, langsung saja bagia Anda yang tertarik untuk memasang reading progress bar di blog silahkan ikuti langkah-langkahnya di bawah ini :

Cara Memasang Reading Progress Bar di Blog


1. Masuk ke Blogger.
2. Lalu buka menu Tema > Edit HTML.
3. Kemudian tambahkan kode CSS ini di atas kode </head>

Versi Flat
<style type='text/css'>
/* Reading Progress Bar (Flat) */
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:#6d1bef;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#6d1bef;z-index:10}
progress::-moz-progress-bar{background-color:#6d1bef;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-color:#6d1bef;width:0%;display:block;height:inherit;z-index:10}
</style>

Catatan :
height:3px; untuk mengatur tinggi garis horizontal.
#6d1bef; adalah warna utama (flat), silahkan ganti dengan kode warna lain.

Versi Gradient
<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>

Catatan :
height:3px; untuk mengatur tinggi garis horizontal.
#5E64EE dan #5EEE66 adalah warna gradasi, silahkan ganti dengan kode warna lain.

4. Kemudian tambahkan kode HTML ini di bawah kode <body>
<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>   
   </div>
</progress>

5. Lalu tambahkan kode JavaScript ini di atas kode </body>
<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>

6. Terakhir silahkan klik Simpan tema.

Catatan:
Apabila reading progress bar atau garis horizontal tidak muncul silahkan tambahkan kode jQuery ini di atas kode </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Kesimpulan

Jadi, widget reading progress bar ini merupakan garis yang bergerak secara horizontal apabila pembaca atau pengunjung blog menggulir atau scroll halaman ke bawah.

Selain untuk mempercantik tampilan blog Anda, tentu reading progress bar ini juga sangat berguna untuk pengunjung situs Anda mengetahui seberapa panjang atau dalam sebuah halaman di situs Anda.
Ficri Pebriyana Blogger yang jarang nulis artikel :D

Belum ada Komentar untuk "Cara Membuat Reading Progress Bar di Blog"

Posting Komentar

Jika ada yang masih kurang jelas, silahkan untuk bertanya pada kolom komentar di bawah ini atau dengan menghubungi kami di halaman kontak.

1. Centang kotak Notify me untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel