Jsfiddle.net adalah salah satu situs yang menyediakan editor kode HTML, CSS dan JS untuk pengujian atau demo yang kita buat. Dari hasil yang dibuat, kita bisa mengambil emdednya dan masukkan di postingan. Ya bagaimana cara Menampilkan Demo Jsfiddle di Blog? silahkan ikuti langkah-langkah berikut ini.
Langkah 1: Lebih baik punya akun di jsfiddle.net, maka Sign Up. Yang sudah punya akun, maka Sign In saja.
Langkah 2: Buatlah kreasi Anda di editor. Lalu klik Run dan Save.
Langkah 3: Share Embednya, klik Share, ambil embednya yang berupa iframe. Contohnya seperti dibawah ini.
<iframe width="100%" height="300" src="https://jsfiddle.net/abangichal/e6Dgb/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Langkah 4: Untuk meminimalisir error validasi HTML5 dan kurangnya skor SEO, seperti di Kompi Ajaib. Silahkan ganti iframe jadi embed, hapus/hilangkan kode allowfullscreen="allowfullscreen" frameborder="0", dan hapus % (widthnya diatur sendiri tanpa pakai satuan), tapi saya lebih suka pakai width 100%. Dan untuk penutupnya hapus kode </iframe> dan gunakan tanda slash / dibelakang >. Contohnya seperti dibawah ini.
<embed width="100%" height="300" src="https://jsfiddle.net/abangichal/e6Dgb/embedded/" />
Dan demonya akan tampak seperti dibawah ini yang secara berurutan akan menampilkan tab javascript, css, html, dan result.
Permainan URL
1. Demo menampilkan secara berurutan tab sesuai dengan keinginan Anda. Perhatikan url berikut.
<embed width="100%" height="300" src="https://jsfiddle.net/abangichal/e6Dgb/embedded/result,html,css,js"/>
Dari url diatas, maka demo menampilkan secara berurutan tab result (tab tampil pertama), html, css, dan javascript.
Dari url tersebut, Anda boleh menukar posisi dari nama tab tersebut ataupun menghilangkan nama tab jika ada kode kosong/tidak terpakai/tidak ingin ditampilkan. Untuk tab javascript, nama url nya adalah js
2. Demo tanpa menampilkan tab apapun. Perhatikan url berikut.
<embed width="100%" height="300" src="https://jsfiddle.net/abangichal/e6Dgb/show/"/>
Itu saja. Maaf untuk contoh demo-demo diatas, saya menggunakan iframe dan width="100%" (lebih senang) karena mungkin ada beberapa di komputer/laptop/gadget kalian sana tidak menggunakan plugin embed.
Langkah 5: Jika sudah, paste embednya di postingan dalam keadaan di tab HTML, bukan Compose.
Semoga bermanfaat.
