Sekarang kita akan membahas hal baru dan unik, yaitu membuat animasi loading / progress seperti youtube. Siapapun blogger, pasti ingin melihat pengunjungnya terkesan dan betah berlama-lama di blognya. Salah satujaln yang dilakukan adalah membuat blog terlihat interaktif dengan menambah animasi loading pada blog.
Banyak yang mengira bahwa cara membuat animasi loading blog adalah hal yang kompleks dan membutuhkan skill pemrograman tingkat dewa. Mungkin ada benarnya, sih. Walau begitu, sebenarnya hal tersebut bisa dipermudah dengan memanfaatkan automatic page load progress bar library jQuery. Dengan kata lain, cara membuat animasi loading blog / progress bar blog cukup dilakukan dengan menambahkan referensi script library.
Lalu, library yang mana yang bisa dipakai dan mudah diimplementasikan untuk membuat animasi loading blog / progress bar blog ?
Dari penelusuran saya, ternyata ada banyak library javascript ataupun jquery untuk hal ini. Dari semuanya itu, akhirnya saya memilih PACE.js karena mudah dan praktis.
Demo : http://github.hubspot.com/pace/docs/welcome/
Download : http://github.com/HubSpot/PACE/
Cara implementasi animasi loading blog / loading halaman website dengan PACE.js sangatlah mudah, kita hanya perlu memasukkan referensi pace.js dan salah satu tema CSS pace.js (lihat macam-macam tema) di atas kode penutup </head>.
Jika kita hanya memiliki blog/website gratisan seperti blogger; saya sarankan untuk menggunakan referensi dari CDN tanpa harus mendownload source PACE.js. Selain itu, pastikan kita juga sudah mengikutsertakan referensi jquery sebelumnya. Khusus untuk platform Blogger, anda tidak perlu menambahkan referensi jquery, karena secara default, blogger sudah menambahkannya secara otomatis dalam template kita.
CDN PACE.js : https://cdnjs.com/libraries/pace
CDN JQuery : https://cdnjs.com/libraries/jquery/
Sebenarnya, baik website personal ataupun blog gratisan, mendownload library PACE.js adalah opsional, karena sudah ada beberapa CDN yang menyediakan library tersebut di servernya.
Berikut ini merupakan contoh penggunaan CDN untuk membuat animasi loading blog / progress bar dengan PACE.js (tema Flash). Jika anda menggunakan Blogger, cukup letakkan kode tepat di atas tag </head>. Hasilnya bisa anda lihat di blog Komputoo ini :D
Yap, sekian tutorial singkat mengenai cara membuat animasi loading blog / cara membuat progress bar blog. Mudah-mudahan bisa bermanfaat.
Banyak yang mengira bahwa cara membuat animasi loading blog adalah hal yang kompleks dan membutuhkan skill pemrograman tingkat dewa. Mungkin ada benarnya, sih. Walau begitu, sebenarnya hal tersebut bisa dipermudah dengan memanfaatkan automatic page load progress bar library jQuery. Dengan kata lain, cara membuat animasi loading blog / progress bar blog cukup dilakukan dengan menambahkan referensi script library.
Lalu, library yang mana yang bisa dipakai dan mudah diimplementasikan untuk membuat animasi loading blog / progress bar blog ?
Dari penelusuran saya, ternyata ada banyak library javascript ataupun jquery untuk hal ini. Dari semuanya itu, akhirnya saya memilih PACE.js karena mudah dan praktis.
Demo : http://github.hubspot.com/pace/docs/welcome/
Download : http://github.com/HubSpot/PACE/
Cara implementasi animasi loading blog / loading halaman website dengan PACE.js sangatlah mudah, kita hanya perlu memasukkan referensi pace.js dan salah satu tema CSS pace.js (lihat macam-macam tema) di atas kode penutup </head>.
<script src="/pace/pace.js"></script> <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" /> </head>
Jika kita hanya memiliki blog/website gratisan seperti blogger; saya sarankan untuk menggunakan referensi dari CDN tanpa harus mendownload source PACE.js. Selain itu, pastikan kita juga sudah mengikutsertakan referensi jquery sebelumnya. Khusus untuk platform Blogger, anda tidak perlu menambahkan referensi jquery, karena secara default, blogger sudah menambahkannya secara otomatis dalam template kita.
CDN PACE.js : https://cdnjs.com/libraries/pace
CDN JQuery : https://cdnjs.com/libraries/jquery/
Sebenarnya, baik website personal ataupun blog gratisan, mendownload library PACE.js adalah opsional, karena sudah ada beberapa CDN yang menyediakan library tersebut di servernya.
Berikut ini merupakan contoh penggunaan CDN untuk membuat animasi loading blog / progress bar dengan PACE.js (tema Flash). Jika anda menggunakan Blogger, cukup letakkan kode tepat di atas tag </head>. Hasilnya bisa anda lihat di blog Komputoo ini :D
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js" integrity="sha256-EPrkNjGEmCWyazb3A/Epj+W7Qm2pB9vnfXw+X6LImPM=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/black/pace-theme-flash.min.css" integrity="sha256-HsWJ70tOKcd52gFzhVX319egmTCvQbMOs0DYg3bDMi8=" crossorigin="anonymous" /> </head>
Yap, sekian tutorial singkat mengenai cara membuat animasi loading blog / cara membuat progress bar blog. Mudah-mudahan bisa bermanfaat.
0 comments