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.
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
- Masuk ke Blogger.com
- Lalu buka menu Tema > Edit HTML
- Lalu tambahkan kode CSS dibawah ini dan tempatkan kode di atas kode </head>
<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; Itu adalah warna default Flat Silahkan ganti warna disni bila ingin menggantinya
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><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>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.
Tags CSS
Subscribe Our Newsletter
Belajar Desain Blog : Cara Membuat Reading Progress Bar Di Blog >>>>> Download Now
BalasHapus>>>>> Download Full
Belajar Desain Blog : Cara Membuat Reading Progress Bar Di Blog >>>>> Download LINK
>>>>> Download Now
Belajar Desain Blog : Cara Membuat Reading Progress Bar Di Blog >>>>> Download Full
>>>>> Download LINK tM