Tutorial Progress Bar dengan Gradasi Warna di Blogger

Hay gengs.. Apakah mencari artikel yang memabahasa tentang panduan untuk membuat Reading Progress Bar di Blogger? Jika iya, maka kalian sudah tepat telah mampir di blog ini. 

Kalian dapat mengikuti langkah-langkah di bawah ini dengan seksama untuk dapat "Menambahkan Reading Progress Bar di Blogger" kalian, dan membuat blog menjadi terlihat luar biasa. Namun sebelum itu, sebaiknya pertama kali mari kita pahami dulu Apa itu Reading Progress Bar dan Apa perlunya Reading Progress Bar?

Apa ya Reading Progress Bar?

Secara singkat, Progress Bar adalah representasi visual dari berapa banyak posting dalam blog yang tersisa atau perlu dibaca. Cara ini dapat melacak posisi pengunjung di halaman. Saat mereka menggulir ke bawah, bilah mulai terisi progres, ini menunjukkan seberapa banyak kemajuan yang telah mereka buat. Begitu mereka mencapai akhir pos, maka bilahnya menjadi penuh.

Apakah perlu Reading Progress Bar?

Pengunjung kalian mungkin akan memutuskan beberapa detik di halaman web sebelum benar-benar memutuskan apakah akan tinggal untuk membaca atau pergi. 

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 yang mendorong pengguna untuk menggulir ke bawah. Sehingga 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.

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.

Sumber : www.alfatechnesia.com