Membuat Reading Progress Bar di Blogger
Tentang Reading Progress Bar
Membuat Reading Progress Bar di Blogger ― Setelah pada tulisan sebelumnya telah dibahas tentang scroll bar percentage, maka pada tulisan kali ini akan dibahas hal yang kurang lebih sama seperti post sebelumnya, yaitu tentang reading progress bar.Bagi kamu yang belum mengetahuinya, reading progress bar (atau yang jika diterjemahkan artinya bilah kemajuan pembacaan) merupakan sebuah bar (bilah) yang mirip seperti loading bar yang muncul pada bagian atas halaman blog yang berfungsi untuk menampilkan reading progress kepada pengunjung/pembaca blog. Maksud dari reading progress adalah pembaca dapat mengetahui sudah berapa jauh sebuah halaman blog yang telah dia baca melalui scroll yang dia lakukan pada halaman tersebut.
Reading progress bar akhir-akhir ini cukup banyak digunakan pada berbagai blog maupun situs di internet dan menjadi sebuah tren baru. Pada dasarnya untuk membuat reading progress bar seperti itu caranya cukup mudah dan tidak memerlukan sebuah proses yang kompleks dan rumit. Sebagai sebuah contoh, kamu bisa melihat hasilnya seperti apa pada halaman demo berikut.
Membuat Reading Progress Bar di Blogger
Sebelum mengetahui cara memasang reading progress bar di Blogger, terlebih dahulu perlu kamu ketahui bahwa untuk membuatnya berfungsi kamu membutuhkan javascript library bernama JQuery, jadi jika blog kamu belum dipasangi JQuery, silakan pasang dulu kode berikut ini di di atas
</body>.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Untuk memasang reading progress seperti pada halaman demo di atas, kamu bisa mengikuti langkah-langkah berikut ini.
- Buka Blogger lalu pada bagian Tema buka Edit HTML.
- Temukan kode
</head>dan letakkan kode berikut ini di atasnya.
Flat Version - Kamu bisa mengganti bagian yang ditandai dengan kode warna yang kamu inginkan untuk warna bar yang akan tampil nantinya.
- Setelah itu temukan kode
<body>lalu tambahkan kode berikut di bawahnya. - Dan terakhir, temukan kode
</body>dan tambahkan kode berikut ini di atasnya. - Setelah itu simpan perubahan tersebut dan lihat hasilnya pada halaman blog kamu, akan muncul bar di bagian atas halaman blog kamu yang berubah saat halaman blog di-scroll.
<style>
/* 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:9999}
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><style>
/* 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:9999}
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><progress value='0' max='1'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress><script>
//<![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>
Posting Komentar untuk "Membuat Reading Progress Bar di Blogger"
Silakan sampaikan komentar kamu dengan mematuhi syarat dan ketentuan berikut:
Diperbolehkan menggunakan link, selama tidak mengarah pada situs yang mengandung perjudian, pornografi, dan konten ilegal lain. Tidak diperbolehkan promosi jualan, produk, jasa, dsb.
Tidak boleh menggunakan kata-kata yang kasar, tidak pantas, mengandung SARA, atau penghinaan. Diharapkan saling menghargai satu sama lain.
Setiap komentar segera diterbitkan setelah moderasi, pastikan komentar kamu sudah benar sebelum dipublikasikan dan backlink tidak akan dihilangkan oleh admin. Admin berhak menghapus komentar yang melanggar.
Blogwalking dan saling memberi salam diperbolehkan. Menerima pemasangan backlink dofollow, tautan ada di menu navigasi.
Gunakan <i rel="code">Text here</i> untuk komentar yang berisi kode singkat.
Gunakan <i rel="pre">Text here</i> untuk komentar yang berisi kode panjang.
Setiap komentar yang mengandung kode/sintaks dengan rel code/pre di atas, wajib di-parse terlebih dahulu pada menu Alat > Script Parse di menu navigasi di atas.
Kamu juga bisa memberikan komentar bergaya <b>cetak tebal</b> maupun <i>cetak miring</i>. Komentar dengan kode HTML selain cetak tebal/miring atau link tidak diperbolehkan untuk dipublikasikan.