What tutorial do you want for the next article! Request Here!

Cara membuat Progress Bar Dengan ( Warna Gradasi ) Di blogger

Cara membuat Progress Bar Dengan ( Warna Gradasi ) Di blogger

Hallo semuanya pada kesempatan kali ini admin mau berbagi tutorial cara membuat progress Bar Dengan ( Warna Gradasi )yang bisa kalian pasang di Header Blog Kalian.

Apa itu Reading Progress Bar?

Reading progress bar ini berguna untuk menunjukkan pengguna berapa banyak artikel yang tersisa untuk dibaca dan menggulir kebawah, ini akan mendorong pengunjung untuk terus membaca artikel Anda sampai selesai.

Apa perlunya Reading Progress Bar?

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

nah selanjutnya jika kalian ingin memasang Progress bar kalian bisa lihat demo nya terlebih dahulu klik tombol demo di bawah ini

Demo

Cara Memasang progress Bar di Blog

silakan masuk ke blogger > tema > Edit Html salin Kode Css Ini Dan Letakan Di Atas ]]></b:skin>

/* Ycprogress Bar */
.ycprogress-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)}

height:3px; Adalah Kode Untuk Mengubah Ukuran progress bar (90deg,#ff0005 10%,#d81fef 90%) Adalah Kode Untuk Merubah Warna progress Bar

selanjutnya salin semua kode dibawah ini dan letakan di atas kode </body> Atau &lt;!--</body>--&gt;&lt;/body&gt;

<div class="ycprogress-bar" id="progressbar"></div>
</div>
<script>
//<![CDATA[
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("progressbar").style.width=scrolled+"%"}
//]]>
</script>

jika sudah klik simpan Tema

sekian cara Cara membuat Progress Bar di Bloggersemoga bermanfaat dan sampai jumpa di artikel selanjutnya.

Referensi:
https://www.alfatechnesia.my.id/2021/08/Cara-membuat-Progress-Bar-dengan-warna-gradasi-di-Blogger.html

Post Tags

Info menarik Widget

About the Author

Content Creator, Graphic Designer, UI / UX Designer

2 komentar

  1. Refresi
  2. Itu ukurannya salah saya buat 3px di cssnya
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.