-->
MqZ6MWB9MGBcNqBdMGBaNaJ6M8IeyCoFADMlNWZ=
6074645612605633477
Cara Menambahkan Reading Progress Bar di Blogger

Cara Menambahkan Reading Progress Bar di Blogger

Cara Menambahkan Reading Progress Bar di Blogger [Dioptimalkan]
Cara Menambahkan Reading Progress Bar di Blogger

Setelah sekian lama memublikasikan tentang template blogger, hari ini saya hadir dengan fitur menarik untuk menarik perhatian pengguna di blog / website Anda, ya saya sedang berbicara tentang Reading Progress Bar (RPB). Saya telah melihat beberapa situs web yang memiliki semacam Progress Bar untuk menunjukkan posisi membaca saat ini.

ketika Anda menggulir ke bawah, akan ada progress di bagian atas halaman yang menunjukkan kemajuan membaca Anda pada posting ini. Biasanya, Indikator Posisi Membaca seperti itu digunakan pada posting blog atau artikel yang panjang dan membantu pengguna untuk memahami seberapa jauh mereka dari menyelesaikan membaca.

dalam posting ini, saya akan membagikan kode js yang super dioptimalkan untuk membaca progress bar (Reading Progress Indicator). Javascript menyebabkan blogger Anda melambat.

Membaca Progress Bar adalah fitur hebat untuk blog yang memberikan gambaran tentang panjang artikel kami dan memberikan pengalaman optimal kepada pengguna Anda.

Cara Menambahkan Reading Progress Bar di Blog

Pada postingan kali ini, kita akan belajar cara menambahkan Indikator Posisi Membaca ke blog blogger, untuk menerapkannya kita harus mengikuti langkah-langkah sederhana: Masuk Blogger Dashboard >> Template >> Edit HTML

Sebelum mengambil tindakan apa pun, kami sarankan Anda membuat cadangan template yang ada sehingga jika terjadi kesalahan, Anda masih memiliki template blog yang aman.

Setiap langkah harus diikuti dengan sangat hati-hati untuk menghindari kesalahan. Pertama, Kami akan menerapkan Javascript kemudian CSS, dan kemudian kode Html. Jadi ayo mulai.

Langkah-1 Tambahkan kode Javascript

Salin kode Javascript berikut dan tempelkan tepat di atas tag </body>

<script type='text/javascript'>
/*<![CDATA[*/
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(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;}
/*]]>*/
</script>

Langkah-2 Menambahkan kode CSS

Sekarang salin kode CSS berikut dan tempelkan tepat di atas ]]> </b:skin> atau </style>

.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}
Anda dapat mengubah height dan background

Langkah-3 Tambahkan kode html

Setelah itu salin kode HTML berikut dan tempelkan tepat di bawah tag <body> (Di beberapa template, tag ini akan digabungkan dengan markup kelas atau skema)

<div class='progress-container'>
<div class='progress-bar' id='myBar'/>
</div>

Selamat! Anda telah menyelesaikan semua langkah.

Kesimpulan

Kami harap Anda menyukai posting ini di Reading Progress Bar di Blogger. Jika Anda memiliki keraguan dan masalah, silakan beri komentar di bawah ini. Kami dengan senang hati membantu Anda! Jika Anda menyukai posting ini, silakan bagikan dengan teman-teman Anda.

1 comment

  1. Mylearningworldblog
    Hi
Tinggalkan komentar sesuai topik artikel. Komentar di luar topik tidak disarankan (terutama disertai link aktif).
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code code

© ‧ Tomy Tech ~ All rights reserved.