Cara Membuat Demo JSFiddle di Blog dengan JQuery

Cara Membuat Demo JSFiddle di Blog dengan JQuery - Kali ini saya akan menjawab request dari teman saya kemaren , yaitu tentang Cara Membuat Demo JSFiddle di Blog dengan JQuery di blog , sebetulnya banyak sekali tutorial untuk membuat demo seperti menggunakan demo CSS-Deck, Codepen, dengan mengembed / membuat demo dengan iframe. Supaya lebih seo demonya , saya punya tips nya yaitu dengan mengguanakan .IFrame Loader

Pasti anda penasaran kayak apa demonya , Nih dia demo dari JSFiddle di Blog dengan JQuery di Blog

Nah gimana menggunakan Demo JSFiddle di Blog dengan JQuery ? Mudah sekali Untuk menerapkannya,
Langkah Pertama sobat harus memasang  CSS ini di atas ]]></b:skin> atau </style>

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

Langkah yang kedua yaitu pasang javasript 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>

Namun Bagimana cara penggunaanya ? . Cara anda pemasanganya mudah yaitu
Simpan kode ini pada postingan Anda bagian HTML ( bukan Compose ):

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

Mungkin hanya itu yang dapat saya jawab dari reques teman saya yang tidak mau disebutkan namanya tentang bagaimana Cara Membuat Demo JSFiddle di Blog dengan JQuery