Reading Progress Bar
adalah sebuah indikator seperti garis berwarna untuk mengetahui sejauh mana pengunjung situs Anda membaca sebuah artikel blog atau website Anda.
Widget reading progress bar ini memiliki berbagai macam jenis, ada yang berada di bagian atas blog yang berfungsi Horizontal ketika Anda melakuka scroll pada sebuah halaman maka progress bar akan mengarah dari kiri ke kanan.
Ada dua jenis yang akan saya buatkan, yaitu progress bar berwarna flat dan juga progress bar dengan warna gradient atau gradiasi. Anda bisa memilihnya sesuai dengan selera masing-masing.
Baik langsung saja ke tutorialnya di bawah ini.
Cara Memasang Reading Progress Bar di Blog
- Masuk ke Blogger.com
- Lalu buka menu Tema > Edit HTML
- 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>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>- 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>- 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>- Terakhir silahkan klik Simpan Tema
Catatan
Apabila ingin mengganti warna silahkan cari kode
dan kemudian ganti warna disini#6d1bef;Apabila reading progress bar tidak muncul silahkan tambahkan kode jQuery ini diatas kode </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Kesimpulan
Selain untuk mempercantik blog Anda, tentu reading progress bar ini juga sangat berguna untuk pengunjung situs Anda untuk mengetahui seberapa panjang halaman artikel yang Anda buat.
0 Comments: