Cara membuat Progress Bar dengan (warna gradasi) di Blogger

Apakah Anda Reading Progress Bar di Blogger? Ikuti langkah-langkah di bawah ini dengan seksama untuk Menambahkan Reading Progress Bar di Blogger, dan membuat blog anda terlihat luar biasa, pertama mari kita pahami Apa itu Reading Progress Bar dan Apa perlunya Reading Progress Bar?

Apa itu Reading Progress Bar?

Singkatnya, Cara membuat Progress Bar adalah representasi visual dari berapa banyak posting blog yang tersisa. Ini mencapai ini dengan melacak posisi pengunjung di halaman. Saat mereka menggulir ke bawah, bilah mulai terisi, menunjukkan seberapa banyak kemajuan yang telah mereka buat. Begitu mereka mencapai akhir pos, bilahnya penuh.

Apa perlunya Reading Progress Bar?

Pengguna hanya membayar beberapa detik di halaman web sebelum memutuskan apakah akan tinggal atau pergi. Menjaga pengguna tetap terlibat menjadi sangat sedikit lebih menantang jika Anda menerbitkan artikel jenis panjang, karena mereka membutuhkan pengguna untuk menggulir ke bawah.

Beberapa pemilik situs web menambahkan posting terhubung sebaris, yang lain menggunakan video atau galeri gambar untuk membuat pengguna tetap berada di halaman.

Progress Bar menambahkan peningkatan antarmuka pengguna sentuh yang mendorong pengguna untuk menggulir ke bawah. Ini juga memotivasi pengguna untuk menyelesaikan artikel yang mereka baca.

Banyak situs web populer menggunakan indikator Progress Bar untuk melibatkan pembaca mereka. Namun, Anda selanjutnya mungkin harus menyatakan bahwa indikator Progress Bar tidak kentara dan tidak merusak pengalaman pengguna di situs web Anda.

Demo

Karena itu, mari kita lihat bagaimana Anda dapat dengan mudah menambahkan Progress Bar di blogger.

Langkah 1:login ke akun bloger anda masing masing.

Langkah 2:klik Tema pilih tanda panah kebawah kemudian pilih Edit HTML.

Langkah 3:Copy dan paste kode css di bawah ini dan letakkan di atas kode ]]></b:skin>

/* Progres Bar */
.Atprogress-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)} 

Langkah 4 salin kode di bawah ini dal letakkan di atas kode </body> Atau &lt;!--</body>--&gt;&lt;/body&gt;

<div class="Atprogress-bar" id="Atprogressbar"></div>
<script>
//<![CDATA[
/*
* progress bar
* Copyright (c) 2021 https://www.alfatechnesia.my.id
* Use Wisely Open source Code Don't Delete Creator Credit
* Javascript Pure
*/
window.addEventListener("scroll",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("Atprogressbar").style.width=scrolled+"%"}
//]]>
</script>

Jika sudah klik simpan Tema

sekian cara Cara membuat Progress Bar dengan (warna gradasi) di Bloggersemoga bermanfaat dan sampai jumpa di artikel selanjutnya.