Cara Membuat Embed JSFiddle Agar Valid HTML 5
Cara Membuat Embed JSFiddle Agar Valid HTML 5 - Kamu yang bergelut dalam dunia blog tentu sudah tidak asing dengan JsFiddle, sebab situs ini merupakan tempat belajar bahasa pemrograman dengan mengisi coding-coding berupa HTML, CSS dan Javascript yang bisa dijalankan secara instan.
JSFiddle sendiri banyak digunakan kalangan blogger untuk menampilkan demo-demo tutorial yang telah dibuat, sebab jika setiap demo harus membuat blog khusus maka itu akan sangat melelahkan dan kehadiran situs JSFiddle ini tentunya merupakan angin segar bagi pencinta dunia coding.
Saya sendiri menggunakan JSFiddle ini karena menggunakannya sangat easy dan bagi yang awam sekalipun akan mudah mengerti jika menggunakan layan dari JSFiddle ini.
Untuk menampilkan embed JsFiddle pada blog sebenarnya tidaklah sulit sebab kamu bisa langsung memberikan link keluar menuju JsFiddle atau menaruh langsung di blog (embed) agar para pengunjung dapat melihat langsung demo yang ditampilkan.
Sampai sini saya anggap sobat blogger yang budiman sudah paham dan kita langsung ke langkah penerapan bagaimana Cara Membuat Embed JSFiddle Agar Valid HTML 5.
Perhatikan gambar (klik untuk perbesar) umumnya ketika kita mengambil embed kode dari JsFiddle "Prefer iframe?" maka akan seperti ini:
<iframe width="100%" height="300" src="//jsfiddle.net/jejakunik/ubskj683/embedded/html,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>Bila kamu langsung memasang kode tersebut maka akan terjadi render blocking javascript di pagespeed dan tidak valid html 5. Nah kalian perlu menambahkan sedikit CSS di dalam template blog sobat seperti ini:
.Responsive embed{width:100%;height:100%}Selanjutnya gunakan kode HTML ini untuk embed JsFiddlenya:
<div class="Responsive"><embed async src="//jsfiddle.net/jejakunik/ubskj683/embedded/html,result/" /></div>Kalian tinggal ganti saja url yang saya marking kuning dan hasilnya akan menjadi seperti berikut ini (Contoh Saja)
Bagaimana mudah bukan? selamat mencoba!
Jejak Unik
Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com