Tutorial Blog : Cara Membuat Progress/Loading Bar seperti Youtube - Mahfud RM Blog

Terbaru

16 September 2017

Tutorial Blog : Cara Membuat Progress/Loading Bar seperti Youtube


Ketika kita membuka Youtube, tentu mungkin kita melihat progress bar pada atas situs dengan warna merah ciri khasnya. Tentuk hal itu cukup menarik sebagai animasi pada sebuah website atau blog kita. Bagi yang bertanya-tanya bagaimana caranya supaya bisa membuat seperti itu, maka saya akan membagikan tutorial Membuat Loading Bar Seperti Youtube ini kepada anda yang selalu setia mengunjungi blog Mahfudrm.xyz.
Sebenarnya ada beberapa plugin progress bar untuk membuat hal seperti ini, namunyang akan saya bagikan kali iniadalah menggunakan nanobar. Nanobar ini merupakan Javascript untuk progress bar yang tidak memerlukan jquery, dan tentunya dengan ukuran yang sangat kecil sehingga blog anda tidak akan terlalu dibebani. (source : http://nanobar.micronube.com/)

Langsung saja ikuti langkah-langkah berikut ini :

      1.      Login ke akun blogger
      2.      Pilih Tema -> Edit HTML
      3.      Salin script dibawah ini berada di atas atau sebelum kode </body>  (untuk mencarinya cukup klik        CTRL+F)
             

 


4. Sekarang untuk modifkasi nya cukup ubah ketebalan dan warnanya.
    a. Untuk ketebalan loading bar silahkan edit ukuran pikselnya : height:"2px"
    b. Untuk warnanya, silahkan ganti kode warna nya saja : a.bg=a.bg||"#db3131"
5. Jangan lupa simpan template nya Silahkan mencoba, semoga berhasil.