Membuat Animasi Loading Blog Seperti Youtube

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>.

  <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.

Read more

Mengambil Kutipan Ringkasan Artikel Wikipedia Dengan API (Javascript)

Saya terkesan melihat Google dengan cepatnya mengerti maksud saya. Ketika saya mengetik "nama latin kunyit", muncul banyak sekali hasil dan salah satunya yang ditempatkan paling atas adalah kutipan dari Wikipedia.

Saya terheran, bagaimana bisa teknologi crawler milik Google bisa melakukan ekstraksi data seperti itu?

Namun, setelah saya mengagali banyak informasi dari internet, tertujulah saja pada fakta mencengangkan. Ternyata Wikipedia menyediakan API yang bisa diakses tanpa batasan ataupun bayaran sepeserpun.

Contoh implementasinya adalah ketika saya ingin mengekstrak data ringkasan dan gambar mengenai Ikan Nila (Oreochromis niloticus).

https://id.wikipedia.org/w/api.php?format=jsonfm&action=query&prop=extracts|pageimages&pithumbsize=300&exintro=&explaintext=&titles=Oreochromis%20niloticus&redirects

Atau, ketika saya hendak memperoleh informasi yang berkaitan dengan flora/fauna.

https://id.wikipedia.org/w/api.php?action=query&generator=search&gsrlimit=50&gsrsearch=intitle:udang+incategory:Artikel_dengan_format_mikro_%27spesies%27&prop=revisions&rvprop=content&rvsection=0&format=jsonfm

Jika kalian ingin tahu lebih banyak mengenai fitur API Wikipeda, silahkan kunjungi:

https://www.mediawiki.org/wiki/API:Main_page

Eh, tunggu dulu. Apa gunanya Anda mempelajari hal ini? Banyak, salah satunya apabila anda ingin mempresentasikan informasi kepada user ketika mengetik kata kunci di kotak pencarian blog anda. Dengan setikit ketrampilan Javascript/JQuery, data API yang tersusun sebagai JSON dapat diinterpretasikan dan diolah dengan mudah. Berikut contoh implementasinya.

<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
 $(document).ready(function() {
  $("#wiki-search").click(function(e) {
   e.preventDefault();
   var katakunci = $("#wiki-search-input").val();
   var url =  "https://id.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles="+katakunci+"&redirects&callback=?";
   $.getJSON(url ,function(data) {
    $.each(data.query.pages, function(i, item) {
     $("#wiki-title").html (item.title);
     $("#wiki-content").html (item.extract);
    });
   });
  });
 });
</script>
</head>
<body>
 <form > 
   <input type="text" id="wiki-search-input"> <button id="wiki-search"> Search!!</button>
 </form>
 <div id='wiki-title' style="font-weight:bold;"></div>
 <p id='wiki-content'></p>
 <a href="http://www.komputoo.pw">Wikipedia Search Widget</a>
</body>
</html>

Agar API dapat diakses melalui client dengan JS, URL API harus disisipkan "&callback=?", agar server wikipedia menyetujui permintaan kita. Jika implementasi ini dilakukan dari server-side, hal tersebut boleh diabaikan saja.

Saya juga sudah menyisipkan contoh implementasi kode di bawah ini untuk menunjukkan bahwa kode bekerja dengan baik. Silahkan dicoba.

### Coba ketik : kucing, macan, atau lainnya ###

### Hasilnya akan terlihat di atas ###

Kode di atas self-explained bagi yang sudah terbiasa dengan pemrograman web. Jadi apabila mungkin ada unek-unek yang perlu disampaikan, silahkan scroll ke bawah untuk berkomentar :)

Read more