Cara Embed JSFiddle di Blog

GEMA.MY.ID

Sunday, January 3, 2021

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.

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.

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

Cancel