Cara Menambahkan Progress Scroll Bar Di Blogger


Cara Menambahkan Progress Scroll Bar Di Blogger Salah satu fitur yang sangat populer di website modern atau di blogger adalah membuat dan menambahkan fitur progress scroll bar di dalamnya. Ini adalah animasi yang sangat menarik, di mana pengunjung dapat melihat batas halaman posting yang dimuat hingga akhir. Ini menciptakan efek luar biasa pada pengguna. Pengalaman membuat selancar internet mereka lebih profesional.

Banyak sekali fitur yang bisa kita terapkan, khususnya seperti di blogger dan wordpress. Seperti membuat progress scroll bar ini yang bertujuan untuk memudahkan pembaca blog kita. Jika tujuan Anda adalah membuat situs Anda terlihat lebih baik dan terlihat menarik, ini adalah postingan yang tepat untuk membantu Anda menerapkannya. Bagi Anda yang tertarik untuk menambahkan fitur ini, maka Anda bisa mengikuti tips di bawah ini.

Disini saya menambahkan progress scroll bar dengan membuat efek ini melalui bantuan javascript dan plugin eksternal. Jadi saya menggunakan javascript untuk membuat "Progress Scroll Bar Animation" ini. Jika Anda ingin menggunakan script, ikuti artikel ini sampai akhir. Untuk animasi yang lebih menarik dan perubahan tema blogger, Anda dapat mengikuti artikel kami di blogger. Berikut ini pengertian dari fitur progress scroll bar atau reading progress bar.

Apa itu Reading Progress Bar?


Fitur progress scroll bar atau reading progress bar adalah representasi visual dari berapa banyak posting blog yang tersisa. Ini dicapai dengan melacak posisi pengunjung di halaman. Saat mereka menggulir ke bawah, sebuah bilah mulai terisi, menunjukkan seberapa banyak kemajuan yang telah mereka buat. Begitu mereka mencapai akhir pos, bar sudah penuh. Untuk lebih jelasnya Anda bisa melihat hasil demo progress scroll bar dari tayangan berikut ini.


Dengan menambahkan progress scroll bar ini di blog dapat menambahkan peningkatan antarmuka pengguna sentuh yang mendorong pengguna untuk menggulir ke bawah. Itu juga memotivasi pengguna untuk menyelesaikan artikel yang mereka baca sampai akhir.

Banyak situs web populer seperti Zoneamedia, menggunakan indikator reading progress bar untuk melibatkan pembacanya. Namun, Anda juga harus memastikan bahwa indikator kemajuan membaca halus dan tidak merusak pengalaman pengguna di situs web Anda.

Karena itu, mari kita lihat bagaimana Anda dapat dengan mudah menambahkan progress scroll bar atau reading scroll bar di template blogger.


Cara Menambahkan Fitur Progress Scroll Bar Di Blogger


Skrip scroll progress bar yang akan kita gunakan ini sangat ringan untuk di load dan pastinya tidak akan mempengaruhi loading pada blog atau website anda, karena script yang saya buat ini tidak berat. Untuk melihat hasil demonya bisa anda lihat langsung di salah satu blog saya di zoneamedia.blogspot.com yang akan saya gunakan untuk praktek tutorialnya.

Disini saya akan memberikan contoh dengan 2 cara yang bisa anda gunakan untuk menambahkan fitur progress scroll bar pada blog atau website anda. Anda bisa memilih salah satunya, Anda bisa menggunakan cara mudah dan cara manual langsung di edit HTML. Berikut cara menambahkan progress scroll bar di blogger.

1. Cara Pertama


Berikut ini metode mudah menambahkan progress scroll bar di blogger:

  1. Pertama, login ke akun Blogger Anda
  2. Pada Dashboard Blogger Pilih Menu Tata Letak
  3. Dan di dalam bagian Tata Letak Tambahkan Gadget Pilih HTML/JavaScript
  4. Setelah itu pada bagian Input Judul isi dengan nama Progress Bar
  5. Kemudian pada bagian Input Konten, isi dengan script dibawah ini

<style>
.ZoneAmedia-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="ZoneAmedia-progress-bar" id="scrollbar-ZoneAmedia"></div>
<script>
window.addEventListener("scroll",scrollZoneamedia);
function scrollZoneamedia(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-ZoneAmedia").style.width=scrolled+"%";
}
</script>

6. Terakhir klik Simpan, dan lihat hasilnya

Jika Cara Pertama Dengan Metode Mudah tidak berhasil, silakan coba Cara Kedua Dengan Metode Manual. Baca selengkapnya dibawah ini.


2. Cara Kedua


Berikut ini metode manual menambahkan progress scroll bar di blogger:

  1. Pertama, login ke akun Blogger Anda
  2. Pada Dashboar Blogger Pilih Menu Tema
  3. Kemudian klik tab SESUAIKAN Pilih Edit HTML
  4. Sekarang salin dan pastekan kode CSS berikut ini di atas kode ]]></b:skin>

.ZoneAmedia-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. Setelah itu Salin kode HTML dibawah ini dan pastekan tepat di bawah tag pembuka <body>

<div class="ZoneAmedia-progress-bar" id="scrollbar-ZoneAmedia"></div>

6. Selanjutnya Salin kode script dibawah ini dan pastekan di atas kode tag penutup </body> atau &lt;/body&gt;

<script>
window.addEventListener("scroll",scrollZoneamedia);
function scrollZoneamedia(){
var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
var scrolled=(winScroll/height)*100;
document.getElementById("scrollbar-ZoneAmedia").style.width=scrolled+"%";
}
</script>

7. Terakhir klik Simpan, dan lihat hasilnya
8. Selesai...


Kesimpulan


Saya baru saja menambahkan fitur progress scroll bar yang bagus di salah satu situs web saya di zoneamedia.blogspot.com yang bertujuan untuk membantu pengguna saat membaca posting blog, di mana progress scroll bar ini akan menunjukkan seberapa jauh kemajuan pengguna dalam membaca posting, dari 0% di awal hingga saat pengguna selesai membaca pada 100%.

Demikian tentang Trik Mudah Cara Menambahkan Progress Scroll Bar Di Blogger, ini bekerja di platform Blogger dan lain sebagainya. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk bagikan artikel ini untuk membantu teman-teman yang lain. Terima kasih!
Next Post Previous Post
6 Comments
  • Asep Rohimat
    Asep Rohimat December 16, 2022 at 9:21 PM

    Terimakasih sangat bermanfaat dan juga berfungsi di blog saya

    • Samuel Pasaribu
      Samuel Pasaribu December 18, 2022 at 4:36 PM

      Yes you're welcome.. Semoga kedepannya bisa lebih cerdas lagi 🙂

  • Novrita
    Novrita December 16, 2022 at 10:05 PM

    Membaca artikel dapat memberikan wawasan yang luas bagi pembacanya, seperti halnya membaca buku, namun dalam versi yang lebih singkat. Contoh artikel populer bisa menjadi referensi Anda saat bingung mau membaca apa. Di dalamnya terdapat banyak topik terkini yang tentunya tidak akan membuat Anda ketinggalan informasi. Terima kasih atas ilmunya sangat bermanfaat ❣️ ✍️ 🙂

    • Samuel Pasaribu
      Samuel Pasaribu December 18, 2022 at 4:36 PM

      Carilah ilmu ketika kamu miskin, itu akan menjadi hartamu. Ketika kamu kaya, itu akan menjadi perhiasanmu ✍️

  • Putri Ramadhani
    Putri Ramadhani December 18, 2022 at 7:23 AM

    Fitur yang menunjukkan proses pengguliran halaman telah berlangsung. Khusus untuk blog, ini bisa menunjukkan seberapa jauh sebuah halaman artikel telah dibaca. Blog yang di demo nggak dijual mas? Keren banget SEO speednya oke Good 👍

    • Samuel Pasaribu
      Samuel Pasaribu December 18, 2022 at 4:37 PM

      Maaf gak jualan blog. Itu hanya blog untuk demo dan belajar. Coba cari yang lain saja @putri

Add Comment
comment url