Cara Embed JSFiddle di Blog

Cara Embed JSFiddle di Blog - Bagi Anda yang merupakan blogger dengan niche tutorial mungkin sudah tidak asing lagi dengan kode editor online yang bernama JSFiddle. Dengan JSFiddle tersebut, Anda bisa membuat struktur kode atau skrip dengan fungsi live preview (tampilan langsung) pada halaman yang sama.

Bisa dibilang, kode editor online tersebut sudah menjadi kewajiban bagi blogger tutorial untuk memberikan tampilan demo dari project yang sedang dibahas. Dengan adanya tampilan demo, maka pembaca juga akan lebih yakin dan tidak ragu untuk menggunakan skrip yang kita bagikan.

Mungkin ada yang bertanya, mengapa tidak internal demo saja?

Membuat demo internal untuk sebuah blog memang bisa dilakukan, namun hal tersebut bukan menjadi solusi yang paling efektif. Bayangkan Anda membuat artikel tutorial setiap hari, otomatis HTML template Anda juga akan semakin banyak. Dengan hal tersebut, tentu kecepatan loading halaman juga akan menjadi lebih lambat.

Baca Juga: Cara Menghilangkan Iklan Disqus di Blog

Hal tersebutlah yang mendasari dibuatnya kode editor online seperti JSFiddle dan CodePen.

Seperti yang telah saya katakan di artikel sebelum-sebelumnya, kenyamanan dan kemudahan pembaca sudah menjadi hal yang patut untuk diperhatikan oleh semua blogger.

Jadi mulailah untuk berpikir tentang cara memudahkan semua pembaca Anda dalam menerima informasi yang Anda berikan. Apabila hal tersebut telah dilakukan, jangan heran apabila blog yang Anda jalankan memiliki banyak pembaca setia.

Kembali ke topik, untuk melakukan embed tersebut, ikuti tutorial berikut:

Cara Embed JSFiddle di Blog

Sebelum lanjut ke tutorialnya, pastikan Anda telah memiliki halaman di JSFiddle yang akan dijadikan sebagai demo di postingan blog. Apabila sudah ada, silahkan dilanjut...

Cara 1

• Masuk ke situs JSFIDDLE
• Buka halaman yang akan dijadikan demo
• Pilih EMBED

• Pilih jenis pemrograman yang ingin Anda tampilkan

• Pilih PREFER IFRAME?

• Tempel kode EMBED SNIPPET di atas </body>:


Hapus bagian kode allowpaymentrequest untuk menghindari adanya error.

• Tempel di atas ]]></b:skin>:

.responsive embed {width:100%;height:100%}

• Pilih SIMPAN.

Untuk pemasangan kode embed ke dalam HTML template telah selesai. Sekarang lanjut untuk melakukan pemasangan kode embed di halaman postingan:

• Masuk ke BLOGGER
• Pilih postingan yang akan dipasangi tampilan demo
• Pilih TAMPILAN HTML
• Tempel skrip berikut ke bagian yang ingin Anda tampilkan demo:

<div class="responsive">
  <embed async src="https://jsfiddle.net/Ferisp_Demo/dh7r0x14/29/embedded/html,css,result/" />
</div>

Sesuaikan URL yang ditandai dengan URL halaman JSFiddle Anda

• Selesai.

Demo

Tampilan hasil hanya dalam bentuk gambar.

Cara 2

Di atas adalah tutorial untuk menampilkan tampilan demo JSFiddle secara langsung. Anda juga bisa membuat demo dengan menggunakan fungsi tombol atau button.

Untuk tutorialnya, Anda hanya perlu menyisipkan URL halaman JSFiddle ke bagian skrip tombol template. Bagi pengguna template Median UI, silahkan menggunakan format penulisan berikut:

<div style="text-align:center">
  <a class="button" href="https://jsfiddle.net/Ferisp_Demo/dh7r0x14/33/embedded/html,css,result/dark/" rel="nofollow noopener" target="_blank" title="JSFiddle">Demo</a>
</div>

Demo

Penutup

Kira-kira Anda ingin menampilkan yang mana? Saran saya, gunakan tampilan langsung untuk memberikan kesan yang lebih profesional.

Sedangkan bagi Anda yang sangat memperhitungkan kecepatan loading halaman, mungkin cara ke dua merupakan solusi yang paling pas.

Baca Juga: Cara Mudah Memasang Notifikasi Cookies di Blog

Cukup sekian artikel tentang Cara Embed JSFiddle di Blog ini, Terima kasih.