Cara Membuat Reading Progress Bar di Blog
Kamis, 22 Agustus 2019
3 Komentar
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
Versi Flat atau Versi Gradient
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.
bang css kan di ats bskin ya?
BalasHapusBukan juga, css biasanya terletak di dalam kode style
Hapusbang kode body di template ku gaada jadi di taruh dmna?
BalasHapus