Home
Blogger
Tutorial

Cara Menambahkan Fitur Progress Scroll Bar Di Blogger

Menambahkan fitur progress scroll bar untuk mumpermudah pembaca blog.

Cara Termudah Menambahkan Fitur Reading Progress Bar Di Blog

Ada banyak fitur yang bisa digunakan untuk mempermudah pembaca blog kita, salah satunya dengan menggunakan Fitur Progress scroll bar atau Reading progress bar pada blog kita.

Script scroll progress bar berikut ringan untuk digunakan, artinya tidak akan mempengaruhi loading website anda, karena script nya tidak berat. 

Untuk demo nya bisa anda lihat langsung pada blog yang anda baca sekarang ini di bagian atas, yang memiliki progress setiap anda melakukan scrolling.

Cara Menambahkan Progress Scroll Bar Di Blogger

Berikut cara menambahkan nya, saya membuatkan 2 metode menambahkan nya yaitu dengan metode yang mudah dan metode manual. Anda bisa pilih salah satu nya.

Metode Mudah

  1. Pertama, salin script Progress Bar berikut ini

    <style>
.NPrinsh-progress-bar{
background:linear-gradient(90deg,#ff0005 10%,#d81fef 90%);
opacity:.95;
position:fixed;
top:0;
left:0;
height:3px;
z-index:999;
transition:all .4s cubic-bezier(.47,1.64,.41,.8);
} 
</style>
<div class="NPrinsh-progress-bar" id="scrollbar-NPrinsh"></div>
<script>
window.addEventListener("scroll",scrollPrinsh);
function scrollPrinsh(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-NPrinsh").style.width=scrolled+"%";
}
</script>
  2. Login ke akun blogger anda
  3. Klik menu Tata Letak
  4. Di bagian Tata Letak, klik Tambahkan Gadget
  5. Di bagian input judul, diisi Progress Bar
  6. Dan di bagian Input Konten, tempelkan script Progress Bar nya
  7. Klik simpan, dan lihat hasilnya

Catatan :
Jika Metode Mudah tidak berhasil, silakan coba Metode Manual berikut ini

Metode Manual

  1. Login ke akun blogger anda
  2. Klik menu Tema
  3. Di bagian Tema, klik ikon Panah Bawah, lalu pilih Edit HTML
  4. Salin dan tempelkan script CSS berikut di atas kode ]]></b:skin> 
    .NPrinsh-progress-bar{
background:linear-gradient(90deg,#ff0005 10%,#d81fef 90%);
opacity:.95;
position:fixed;
top:0;
left:0;
height:3px;
z-index:999;
transition:all .4s cubic-bezier(.47,1.64,.41,.8);
}
  5. Salin kode dibawah ini dan tempelkan di bawah <body>
    <div class="NPrinsh-progress-bar" id="scrollbar-NPrinsh"></div>
  6. Salin kode dibawah ini dan tempelkan di atas kode </body> atau &lt;/body&gt;
    <script>
window.addEventListener("scroll",scrollPrinsh);
function scrollPrinsh(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-NPrinsh").style.width=scrolled+"%";
}
</script>
  7. Simpan dan lihat hasilnya
Nathan Prinsley

Jika Ada Kata 'Nanti', 'Sebentar', 'Tapi',
Maka Anda Akan Lama Untuk Sukses.

Posting Komentar