PpVYjUNPJxHpgz48ODtJ762UUZTduUYkOHyHjNeZ
Bookmark

Cara Menambahkan Progress ScrollBar Di Blogger | Sangat Mudah

Cara Menambahkan Progress ScrollBar Di Blogger dengan Gradasi

Dalam dunia blogging, memberikan pengalaman terbaik kepada pembaca adalah kunci untuk mempertahankan engagement. Salah satu cara untuk meningkatkan interaksi pengguna adalah dengan Menambahkan Progress ScrollBar. Fitur ini tidak hanya mempercantik tampilan blog anda, tetapi juga memberikan feedback visual yang membantu pembaca memahami seberapa jauh mereka telah menjelajahi konten anda. Artikel ini akan membahas secara lengkap bagaimana anda dapat Menambahkan Progress ScrollBar yang elegan dan fungsional di Blogger.


Apa itu Progres ScrollBar?

Progres ScrollBar adalah indikator yang bergerak seiring dengan scrolling yang dilakukan oleh pengguna. Ini memberikan gambaran visual mengenai Progres pembacaan pada halaman tersebut. Manfaat utamanya adalah untuk memberikan orientasi kepada pembaca tentang seberapa banyak konten atau artikel yang telah mereka baca dan berapa banyak lagi yang tersisa.


Mengapa perlu Menambahkan Progress ScrollBar di blog?

Menambahkan Progress ScrollBar ke dalam blog tidak hanya meningkatkan estetika, tetapi juga memberikan nilai tambah dalam hal navigasi dan orientasi konten. Dengan adanya indikator visual ini, pembaca dapat dengan mudah mengukur sejauh mana mereka telah menelusuri konten kamu. Yang pada akhirnya dapat mendorong mereka untuk tetap terlibat dan menyelesaikan membaca artikel. Dengan demikian juga, ini bisa membuat pengunjung berlama - lama dan beta diblog anda.

Fitur ini sangat berguna terutama untuk artikel panjang atau tutorial yang membutuhkan waktu lebih lama untuk dibaca. Dengan demikian, Progres ScrollBar menjadi elemen penting yang mendukung keterlibatan pembaca dan memperkaya pengalaman mereka saat berinteraksi dengan blog anda.


Persiapan

Sebelum lanjut ke tahap - tahap pembuatanya , sangat penting untuk melakukan backup template Blogger. Tujuan backup ini adalah untuk menghindari kehilangan data jika terjadi kesalahan. Oleh karna itu, silahkan cadangkan template dengan cara pergi ke halaman blogger anda. Untuk mencadangkan template anda, silahkan ikuti panduan berikut.

1.pertama masuk ke blogger anda, kemudian pilih menu "Tema".

2. Selanjutnya pilih "Sesuaikan", kemudian pilih "Cadangkan" dan terakhir klik unduh.

3. Setelah diunduh, simpan file template di tempat aman untuk memudahkan ketika memulihkan tema.


Lankah - langkah Menambahkan Progress ScrollBar di blogger

Jika ingin menerapkan fitur ini diblog anda, anda cukup mengikuti empat langkah saja. Berikut langkah - langkah memasang Progres ScrollBar di Blogger:

1. Pertama, buka tema blogger anda dan pilih menu "Tema" > "Sesuaikan" > "Edit Html". Kemudian gunakan opsi pencarian yang ada pada browsermu untuk memudahkan mencari kode.

2. Selanjutnya, Salin kode Html berikut kemudian tempelkan di bawah tag body pembuka atau <body>

<div class="ArsaProgress-Bar" id="ArsaProgress-Bar"></div>

3. Berikutnya, Salin kode css berikut dan tempelkan di atas kode ]]></b:skin>

<style>
/* Menambahkan gaya untuk progress bar yang lebih menarik */
.ArsaProgress-Bar {
  position: fixed;
  height: 5px;
  background: linear-gradient(to right, #ee0979 10%, #ff6a00 90%);
  width: 0%;
  top: 0;
  left: 0;
  z-index: 100;
  transition: width 0.5s ease-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

</style>

4. Terakhir, Salin kode JavaScript berikut dan tempelkan di atas tag body penutup </body>

<script>
// JavaScript untuk mengupdate progress bar saat pengguna scroll
window.onscroll = function() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("ArsaProgress-Bar").style.width = scrolled + "%";
};
</script>

Setelah mengikuti langkah langkah di atas, anda sudah berhasil Memasang Progress ScrollBar di blogmu, simpan saja dan lihat hasilnya.

Anda juga dapat melakukan penyesuaian lebih lanjut jika ingin menyesuaikan seperti mengubah warna Progres bar.

Perhatikan kode css sebelumnya (pada langkah ketiga). Silahkan ubah warna background dengan kode warna yang ingin anda ubah. anda bisa melihat kode warna disini. Untuk mengubah ketebalan bar, silahkan ubah height: 5px; sesuai dengan ukuran yang diinginkan.


Bagaimana cara menampilkan Progres ScrollBar di Postingan Blogger saja

Pada langkah - langkah sebelumnya, kita telah berhasil membuat Progress ScrollBar. Akan tetapi, Progress Scroll Bar ini, tampil di semua halaman blog. Contohnya tampil di halaman statis dan Homepage. Namun tidak perlu khawatir, kita masih bisa menampilkanya hanya di halaman postingan blog saja. 

Jika kamu ingin menampilkan Progres ScrollBar hanya di postingan blog saja. maka kamu bisa memamfaatkan tag kondisional blogger pada kode - kode sebelumnya. 

Untuk menggunakan tag kondisional ini caranya sangatlah mudah. Kamu hanya perlu menambahkan tag  kondisional pada kode html dan css saja. Sedangkan pada kode javascript/js tidak perlu. Berikut kode tag kondisional yang akan kita gunakan:

<b:if cond='data:view.isPost'> Masukkan kode disini </b:if>

Pertama tama, masukkan kode html di dalam kode tag kondisional tersebut. Sehingga jadinya akan seperti ini.

<b:if cond='data:view.isPost'>
  <div class="ArsaProgress-Bar" id="ArsaProgress-Bar"></div>
</b:if>

Selanjutnya, sama seperti sebelumnya, masukkan kode css di dalam kode tag kondisional. Sehingga jadinya akan  seperti ini.

<b:if cond='data:view.isPost'>
<style>
/* Menambahkan gaya untuk progress bar yang lebih menarik */
.ArsaProgress-Bar {
  position: fixed;
  height: 5px;
  background: linear-gradient(to right, #ee0979 10%, #ff6a00 90%);
  width: 0%;
  top: 0;
  left: 0;
  z-index: 100;
  transition: width 0.5s ease-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

</style>
</div></b:if>

Terakhir, setelah digabungkan kedalam kode tag kondisional, ulangi langkah 1 sampai 4 pada langkah - langkah sebelumnya dan kemudian simpan.

Itulah artikel cara membuat Progres ScrollBar di Blogger. Dengan Menambahkan Progress ScrollBar, anda tidak hanya meningkatkan estetika blog tetapi juga fungsionalitasnya. Fitur ini akan membantu pembaca anda untuk lebih terlibat dengan konten yang anda sajikan.

Jika Anda merasa artikel ini bermanfaat maka Anda dapat membagikannya kepada teman blogger Anda dan sampaikan tanggapan Anda di kolom komentar.

Posting Komentar

Posting Komentar