Reading progress bar yaitu sebuah indikator ibarat garis berwarna untuk mengetahui sejauh mana pengunjung situs Anda membaca sebuah artikel di blog atau website Anda.
Widget reading progress kafe ini memilik aneka macam macam jenis, ada yang berada di bab atas blog yang berfungsi horizontal dikala Anda melaksanakan scroll pada sebuah halaman maka progress kafe akan mengarah dari kiri ke kanan.
Ada juga dengan fungsi vertikal ibarat yang sudah pernah aku bahas di artikel sebelumnya cara menciptakan presentase scrollbar di blog.
Nah, untuk progress kafe yang akan aku buat kali ini yaitu yang mempunyai fungsi horizontal dibagian atas blog.
Ada dua jenis pilihan yang aku tawarkan kepada Anda, yaitu progress kafe dengan warna flat atau datar dan juga progress kafe dengan warna gradient atau gradasi. Anda dapat memilihnya sesuai dengan selera masing-masing.
Baik, eksklusif 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
Versi Flat atau Versi Gradient
1. Masuk ke Blogger.
2. Lalu buka sajian Tema > Edit HTML.
3. Kemudian tambahkan instruksi CSS ini di atas instruksi
</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; yaitu 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 yaitu warna gradasi, silahkan ganti dengan kode warna lain.4. Kemudian tambahkan instruksi HTML ini di bawah instruksi
<body><progress value='0' max='1'> <div class='progress-container'> <span class='progress-bar'></span> </div> </progress>5. Lalu tambahkan instruksi JavaScript ini di atas instruksi
</body><script type='text/j4vascript'> //<![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 kafe atau garis horizontal tidak muncul silahkan tambahkan instruksi jQuery ini di atas instruksi
</body><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Kesimpulan
Jadi, widget reading progress kafe 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 berkhasiat untuk pengunjung situs Anda mengetahui seberapa panjang atau dalam sebuah halaman di situs Anda.
Sumber http://www.caramanual.com
