Hallo kawan-kawan kembali lagi membahas seputar tutorial blogger, pada kesempatan kali ini saya sebagai Admin blog ini akan memberikan tutorial membuat Progres Bar atau garis berjalan di blogger.
Penjelasan Progres Baru
Progres Bar atau Bilah kemajuan adalah elemen kontrol grafis yang digunakan untuk memvisualisasikan perkembangan operasi komputer yang diperluas, seperti unduhan, transfer file, atau instalasi. Terkadang, grafik disertai dengan representasi tekstual dari kemajuan dalam format persen.
Manfaat Progres Bar
Progress bar merupakan sebuah komponen yang berguna untuk membuat gambaran kemajuan sebuah proses dari suatu kinerja. serta progres bar ini dapat mempercantik tampilan blog kalian.
Pada dasarnya tujuan dibuat progres bar ini adalah untuk mempresentasikan suatu data tapi itu berbeda dengan yang saya bagikan kali ini, silahkan ikuti langkah-langkah pemasangan di bawah ini
Demo Progres Bar : Untuk melihat hasilnya kalian hanya perlu Gulir/Scroll ke atas dan kebawah halaman ini sambil perhatikan bagian header blog ini.
Cara membuat Progres Bar
Sebelum memulai tutorial ini kalian bisa Gunakan CTRL + F pada keyboard agar lebih memudahkan kalian dalam mencari sebuah kode.
Login ke Blogger
Langkah Pertama : Silahkan login ke akun blog kalian.
Pilih menu Tema
Langkah kedua : Setelah kalian login ke akun blogger kalian masing-masing pilih menu Tema lalu Edit HTML
Tambahkan CSS
Langkah ketiga : Selanjutnya kalian salin kode dibawah ini dan tempelkan tepat 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)} Tambahkan JavaScript
Langkah terakhir : Terakhir tempelkan kode dibawah ini diatas kode </body>
<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>Selesai
Jika semuanya dirasa sudah benar jangan lupa untuk menyimpan perubahan agar progres bar dapat terlihat di blog kalian.
Penutup
Sangat mudah bukan untuk membuat progres bar ini?. ok cukup sekian saja mengenai tutorial kali ini jika kalian memiliki pertanyaan jangan sungkan untuk menyampaikan di kolom komentar dan jangan lupa juga share artikel ini.
Source Code
www.alfatechnesia.my.id
Membuat progres bar, membuat progress bar di excel, membuat progress bar upload php, membuat progress bar di php, membuat progress bar di android studio, membuat progress bar di codeigniter, membuat progress bar dengan ajax, membuat progress bar di laravel, membuat progress bar dengan bootstrap, membuat progress bar android studio, cara membuat progress bar bootstrap, cara membuat progress bar di excel, cara membuat progress bar, cara membuat progress bar di html, cara membuat progress bar di codeigniter, cara membuat progress bar di php, cara membuat progress bar di sketchware, membuat progress bar di vba excel.