Membuat Demo JSFiddle di Blog dengan JQuery

Membuat Demo JSFiddle di Blog dengan JQuery - Mungkin Anda sering melihat beberapa tutorial yang menyertakan demo dari JSFiddle, CSS-Deck, Codepen, dll, dengan mengembed / membuat demo dengan iframe.

Supaya lebih SEO friendly, saya sarankan jangan langsung menggunakan iframe, tapi gunakan IFrame Loader. Akan tetapi semuanya saya serahkan kepada Anda, mana yang menurut Anda paling mudah digunakan.


Untuk menerapkannya, simpan kode ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
setTimeout(function() {
        $('.jsfiddle-demo').each(function() {
        $(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
    });
}, 5000);
//]]>
</script>

Untuk menyesuaikan tampilan silahkan edit dan simpan CSS ini di atas ]]></b:skin> atau </style>

.jsfiddle-demo {
  display:block;
  width:99%;
  height:300px;
  border:2px solid #bbb;
}

Cara Penggunaan

Simpan kode ini pada postingan Anda :

<div class="jsfiddle-demo loader" data-src="URL Hostingan Demo Disini"></div>

Pengaturan URL

Untuk menampilan hasilnya saja gunakan url-jsfiddle/show contoh

http://jsfiddle.net/mastertuts/aL7Sx/1/show

Untuk menampilkan hasil, CSS, HTML dan JavaScript

http://jsfiddle.net/mastertuts/aL7Sx/1/embedded/result,css,html,javascript

Untuk menampilkan hasil dan CSS saja, maka contoh urlnya seperti ini :

http://jsfiddle.net/mastertuts/aL7Sx/1/embedded/result,css

Happy Coding...