Menampilkan Demo JSFiddle Di Blog

Newbanie Blog- Menampilkan demo JSFiddle Di Blog bukanlah hal yang sulit. Namun kode yang diberikan tersebut kurang baik bagi SEO blog karena mengandung Iframe.


BACA JUGA Cara SEO Score 100% di Chkme.com

Inilah contoh Animasi yang hanya menggunakan CSS yang saya embed dari JSFiddle :

Nah setelah melihat contoh diatas, apakah anda tertarik mencobanya? :) JSFiddle ini sangat bermanfaat bagi blog berniche tutorial blogging karena bisa menampilkan live demonya.

Baiklah ini dia cara Menampilkan Demo JSFiddle Di Blog

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>

Lalu letakkan kode ini diatas ]]></b:skin> atau </style>

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

Cara Penggunaan
Untuk pemanggilannya simpan kode ini pada postingan Anda :

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

Pengeditan
Untuk menampilan hasilnya saja gunakan url-jsfiddle/result contoh

http://jsfiddle.net/mazsoma/WRxyB/embedded/result

Untuk menampilkan hasil, CSS, HTML dan JavaScript

http://jsfiddle.net/mazsoma/WRxyB/embedded/result,css,html,javascript

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

 http://jsfiddle.net/mazsoma/WRxyB/embedded/result,css

Jadi secara keseluruhan kodenya akan seperti ini. Ini adalah contoh kodenya :

Tweet