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

Cara membuat Progress Bar di Blogger

Cara membuat Progress Bar di Blogger
cara membuat Progress bar

Hallo semuanya pada kesempatan kali ini admin mau berbagi tutorial cara membuat progress Bar 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-color:#009ee0;position:fixed;top:0;left:0;z-index:999;width:0%;height:4px;}

height:4px; Adalah Kode Untuk Mengubah Ukuran progress bar #009ee0 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 Blogger semoga bermanfaat dan sampai jumpa di artikel selanjutnya.

Post Tags

Info menarik Widget

About the Author

Content Creator, Graphic Designer, UI / UX Designer

5 komentar

  1. kalau progress bar nya mau ditempatin dibawah header kayak blog ini gimana ya caranya bang? thanks!
    1. Letakan sebelum kode </header> , atau letakan kode progres bar tepat di atas kode </header>
  2. kok saya cuman bisa tampil sekali aja proggres bar nya, itupun cuman di bagian beranda:(...bagaimana solusinya bang?
    1. Coba dicek lagi bro, jika masih ada kendala bisa hubungi saya di telegram
  3. kok saya cuman sekali aja pas pertama kali dibuka blog, itupun di bagian pertama, untuk di halaman postingan artikel tidak ada. bagaiman ya solusinya bang?
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.