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'>
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...