Jsfiddle adalah salah satu web yang menyediakan editor kode baik kode css, javascript, atau html untuk membentuk sebuah elemen blog atau website. Dengan kata lain bisa jadikan sebagai sarana pengujian atau demo yang sedang kita buat.
Dan hasilnya bisa kita ditampilkan juga dipostingan blog dengan mengambil kode embednya. Kode embed dari jsfiddle menggunakan iframe.
Namun seperti telah kita ketahui bahwa iframe ini akan mengurangi skor SEO blog dan bisa di Chkme.com. Juga ada beberapa kode yang menyebabkan error di valid HTML5. Untuk itu agar kode embed jsfiddle bisa SEO Friendly dan Valid HTML5, maka perlu sedikit perubahan pada kode embednya.
Biasanya kode embed dari jsfiddle untuk disimpan dipostingan akan tampak seperti di bawah ini.
<iframe width="100%" height="300" src="http://jsfiddle.net/alvinwarasi/Ay9Sp/1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Silahkan ganti kode
iframe dan
embed, hilangkan
% (persen) pada width dan ganti angkanya dengan yang Anda kehendaki misalnya disesuaikan dengan lebar daerah postingan (tanpa memakai satuan
px), dan ganti kode
allowfullscreen="allowfullscreen" frameborder="0" dengan kode
/ (garis miring), juga hapus kode
</iframe>. Sehingga penampakannya akan seperti di bawah ini.
<embed width="600" height="300" src="http://jsfiddle.net/alvinwarasi/Ay9Sp/1/embedded/" />
Dan perlu diperhatikan, jika Anda mempublikasikan postingannya harus dalam posisi
HTML bukan
Compose, karena jika dipublikasikan dalam keadaan
Compose maka secara otomatis kode di atas akan berubah dan menjadi tidak valid di HTML5. Perubahan yang terjadi yang menyebabkan error HTML5 sperti di bawah ini.
<embed width="600" height="300" src="http://jsfiddle.net/alvinwarasi/Ay9Sp/1/embedded/" ></embed>
Kode
/ (garis miring) yang ada di ujung akan menghilang di ganti dengan kode
</embed> di akhir kode, nah kode itulah yang akhirnya menyebabkan menjadi error lagi di HTML5.
Sebagai contoh, di bawah ini adalah demo result dari jsfiddle yang sudah valid HTML5 dan tentunya SEO Friendly yang menampilkan tab javascript, css, html, dan result dengan kode di bawah ini.
<embed width="600" height="300" src="http://jsfiddle.net/alvinwarasi/Ay9Sp/1/embedded/" />
Demo resultnya hanya menampilkan tab dengan hanya result-nya saja.
<embed width="600" height="300" src="http://jsfiddle.net/alvinwarasi/Ay9Sp/1/embedded/result/" />
Demo resulnya tanpa menampilkan tab jsfiddle
<embed width="600" height="300" src="http://jsfiddle.net/alvinwarasi/Ay9Sp/1/show" />
Semoga bisa dimengerti dan bermanfaat,..
Blogger
Google+
Facebook
Twitter