Cara Embed JSFIDDLE di Blog yang Valid HTML 5
Jsfiddle adalah nama yang tidak asing bagi seorang blogger. Situs ini berguna sebagai tempat untuk belajar bahasa pemrograman dengan mengetikkan coding dan bisa melihat hasilnya langsung pada halaman yang sama. Jika blog Anda membahas tentang pengkodean, situs web ini sangat direkomendasikan untuk membuat sampel projectnya.
Bagi seorang blogger, situs ini biasanya digunakan untuk membuat demo dari tutorial yang dibahas. Mungkin dari Anda ada yang berpikiran "Kenapa tidak diberikan sampel dalam blog sendiri atau dalam sebuah blog percobaan?"
Ya memang bisa, namun jika kita memberikan demo dalam blog sendiri saya rasa itu akan sangat merepotkan dan merugikan. Karena kita harus menambahkan kode tersebut ke blog, padahal belum tentu kita ingin menggunakannya. Selain itu, bisa saja sewaktu-waktu kita mengganti template. Sehingga sangat menyebalkan jika kita harus mengcopy ulang semua kode css, maupun js yang lama.
Kemudian yang kedua, jika kita memasang demo di blog percobaan. Masalah yang timbul adalah terkadang kode dalam template bentrok atau terpengaruh oleh kode lain. Sehingga kita harus mencari lagi letak kode yang bentrok tersebut. Memang terkadang membuat demo di blog percobaan sangat diperlukan. Namun untuk keperluan umum menggunakan demo dari jsfiddle akan lebih praktis.
Tidak hanya lebih praktis saja. Tapi orang juga melihat langsung kode yang ada, baik itu css, html, maupun js yang kita gunakan. Sehingga lebih terkesan profesional.
Bagi Anda yang masih bingung bagaimana cara embed demo dari jsfiddle di blog silahkan ikuti langkah-langkahnya berikut ini.
Cara Pertama: Embed langsung halaman jsfiddle ke blog
Untuk cara pertama ini Anda tidak butuh banyak kode. Cukup klik menu embed pada editor jsfiddle, kemudian pada bagian tabs pilih tab apa saja yang ingin Anda tampilkan. Misal seperti gambar di bawah saya mematikan tab JavaScript karena tidak ada kode js yang digunakan.
Kemudian setelah itu klik "Prefer iframe?", maka akan tampil kode berikut:
<iframe width="100%" height="300" src="//jsfiddle.net/kerani/gaqte65o/5/embedded/html,css,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
Jika Anda langsung memasang kode tersebut maka akan terjadi render blocking javascript di pagespeed dan tidak valid html 5. Untuk mengatasi hal tersebut maka tambahkan css berikut ke template Anda:
.Responsive embed{width:100%;height:100%}
Kemudian gunakan kode HTML berikut untuk embed jsfiddlenya:
<div class="Responsive"><embed async src="https://jsfiddle.net/kerani/gaqte65o/5/embedded/html,css,result/" /></div>
Silahkan ganti url yang warna merah dengan url embed jsfiddle project Anda. Terakhir letakkan kode tersebut pada postingan mode HTML. Hasilnya akan tampak seperti berikut ini:
Cara Kedua: Embed dengan mengubahnya menjadi bentuk link Demo
Lebih tepatnya adalah kita membuat tombol demo dengan link mengarah ke url file di jsfiddle. Jika Anda adalah orang yang sangat sensitif terhadap kecepatan, maka cara ini bisa menjadi alternatif.
Supaya lebih mudah, silahkan Anda manfaatkan css tombol demo pada template yang Anda gunakan. Namun jika belum ada, gunakan css berikut untuk membuat tombol demonya.
.button{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.btn-demo{background-color:#3498DB;padding:12px 50px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
Kemudian gunakan kode html berikut untuk menampilkan tombol demonya.
<div style="text-align: center;">
<a class="button btn-demo" href="LINK-ANDA" rel="nofollow noopener" target="_blank">demo</a>
</div>
Terakhir silahkan ganti tulisan "LINK-ANDA dengan url demo jsfiddlenya. Maka hasilnya nanti kurang lebih akan seperti tombol demo berikut ini.
Sekian semoga bermanfaat. Jika ada masalah jangan sungkan untuk meninggalkan komentar.