Cara Membuat Reading Progress Bar di Blogger
September 02, 2019
Reading Progress Bar adalah sebuah petunjuk seperti garis bawah yang berwarna untuk memberikan sejauh mana para pengunjung atau sobat sendiri membac artikel di blog sobat.
Jika sobat sering membaca web berita biasanya ada reading progress bar ini, reading progress bar sendiri terdapat dua jenis yaitu horizontal yang berada di atas blog dan juga vertikal.
Jika sobat membaca semakin kebawah maka Reading Progress Barnya akan melakukan scroll dari kiri kekanan semakin jauh sobat membaca maka semakin jauh juga progress barnya berjalan dari kiri ke kanan.
Jika sobat tertarik ingin memasang Reading Progress Bar ini di blog sobat, sobat bisa memasangnya dengan mengikuti langkah-langkahnya dibawah ini.
Cara Memasang Reading Progress Bar di Blog
Untuk langkah cara membuat reading progress bar nya sobat ikuti dengan baik ya supaya tidak ada kesalahan pada saat pemasangannya nanti.
1. Pertama, sobat Login ke Blogger.com
2. Setlah login dan masuk ke Dasboard Blogger maka selanjutnya sobat pilih menu Template/Theme > Edit HTML.
3. Setelah itu sobat cari kode </head> (Gunakan CTRL+F Untuk mempermudah pencarian kode). Jika sudah ketemu maka selanjutnya sobat copy dan paste kan CSS dibawah ini tepat diatas kode </head>.
Catatan:
<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>
height:3px; sobat bisa atur tinggi garis horizontalnya, atau sesuaikan sesuai keinginan sobat. #6d1bef; sobat bisa ubah warna utamanya dengan kode warna sesuka sobat.
Jika sudah maka selanjutnya kita harus membalasny kodenya dengan memasang Kode HTML. Cari kode <body> dan pastekan kode dibawah ini tepat dibawah kode <body>.
Jika sudah maka selanjutnya adalah dengan memasang kode JavaScript tepat diatas kode </body>. cari dan pastekan kodenya dibawah ini tepat diatas kode </body>.
<progress value='0' max='1'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>
4. Terakhir Simpan Template.
<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>
Nah, itulah cara membuat reading progress bar di blogger, dengan memasang Reading Progress Bar ini maka tampilan Blog sobat akan lebih keren dan juga dapat memebrikan sebuah navigasi oleh pengunjung sejauh mana mereka membaca artikel di blog sobat.
Happy Blogging!!
0 komentar