Pada artikel kali ini, saya akan Sharing kepada Anda mengenai bagaimana cara menambahkan Reading Progress Bar di sebuah blogger.
Sebelumnya Mungkin jika kita melihat di beberapa blog atau situs web sering menemukan adanya suatu indikator yang memiliki Progress Bar untuk menunjukkan posisi kita, ketika kita sedang membaca suatu artikel.
Ketika Anda mecoba untuk menggulir mouse ke bawah, maka akan ada sebuah progress bar di bagian atas halaman yang akan menunjukkan seberapa jauh Anda membaca pada posting tersebut.
Biasanya, indikator posisi seperti itu digunakan pada suatu artikel yang panjang sehingga antinya dapat membantu pembaca untuk megethui seberapa jauh mereka telah membaca sebuah artikel.
Daftar Isi
Sekilas Mengenai Reading Progress Bar
Reading progress bar merupakan sebuah indikator berupa sebuah garis berwarna yang memiiki tujuan untuk mengetahui seberapa jauh pengunjung membaca suatu artikel pada blog atau website Anda.
Reading Progress Bar juga dapat menunjukan seberapa panjang artikel konten pada postingan blog yang telah anda buat, semakin panjang konten yang anda buat maka ketika menggulir mouse akan sedikit lama, itu artinya jika konten yang Anda buat panjang dan sangat menarik maka rasio pentalan atau bounce rate Anda juga berkurang.
Selain itu juga dengan menambahkan fitur ini akan dapat membantu pembaca Anda untuk lebih memahami konten, seperti pembaca dapat mengira-ngira apabila ingin membaca artikel untuk waktu yang lama sehingga nantinya pembaca dapat mengatur waktu mereka ketika sedang membaca artikel anda .
Cara Menambahkan Reading Progress Bar di blogger
Supaya dapat menambah fitur Reading Progress Bar pada tema blogger, maka harus menambahkan beberapa kode HTML dan CSS pada tema blogger.
Sebelum menambahkan beberapa kode pada tema blogger, sebaiknya mencadangkan atau membackup tema terlebih dahulu, supaya nantinya apabila membuat beberapa kesalahan dalam pengkodean, Anda masih dapat memulihkan tema sebeumnya.
Apabila anda telah membackup tema anda, maka langsung saja untuk cara memasang reading progress bar pada tema blogger dapat mengikuti beberapa langkah dibawah ini.
1. Masuk Ke halaman dashboard blogger
Jadi pertama-tama Anda harus masuk kehalaman dashboard blogger Anda, Setelah itu, Anda harus mengklik tema, Setelah mengklik tema, Anda harus mengklik Edit HTML.
2. Tambahkan kode Javascript pada tema blogger
Setelah ini, Anda harus menyalin kode Script yang ada di bawah ini, lalu menempelkannya di atas kode </body>.
<script>
window.onscroll = function() {myFunction()};function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById("myBar").style.width = scrolled + "%";}
</script>
3. Tambahkan kode html pada tema blogger
Sekarang Anda harus menyalin kode yang diberikan di bawah ini dan menempelkannya di bawah kode <body>.
<div class='progress-container'> <div class='progress-bar' id='myBar'/> </div>
4. Tambahkan kode CSS pada tema blogger
Sekarang cari kode </b:skin> dan apabila sudah ketemu, maka salinlah kode Css yang diberikan di bawah ini, lalu menempelkannya di atas kode </b:skin>.
.progress-container{
width:100%;
position:fixed;
z-index:99
}
.progress-bar{
height:5px;
background:#4caf50
}
Setelah menempelkan ketiga kode diatas. Anda dapat mengganti warna dengan warna favorit Anda. Adapun untuk mengubahnya tinggal mengganti kode #4caf50 dengan kode warna yang anda inginkan.
Jika sudah maka anda tingga menyimpan pada tema Anda. Sekian dari penjeasan bangaimana Cara Menambahkan Reading Progress Bar di Blogger. jika Anda memiliki kesulitan maka dapat ditanyakan dengan memberikan komentar di bawah postingan kali ini .
