Selamat pagi... Sebagai pemilik blog tentunya kita ingin memberikan segala kemudahan bagi para pembaca blognya, salah satunya dengan menyediakan Widget TV Online di Blog. Dengan TV Online ini diharapkan para pembaca akan betah berlama-lama berada di blog kita sambil menikmati siaran televisi favorite-nya. Salah penyedia Widget TV Online ini adalah GudangTV yang saya rasa cukup komplit channel TV-nya yang patut kita coba pasang di blog berikut screenshotnya;
Bagaimana?, keren kan hehehe....
Nah, untuk mendapatkan kode embed-nya dari GudangTV cukup mudah karena sudah disediakan di widgetnya pada menu "Embed" seperti di bawah ini;
<iframe frameborder="0" height="765" scrolling="no" src="http://widget3.gudang.tv/2013/09/welcome-to-gudangtv.html? format=embed&player_autoplay=true" width="565"></iframe>
Setelah kita mendapatkan kode embednya, selanjutnya kita Memasang TV Online tersebut dengan Valid HTML5, dari kode di atas kita tahu ada beberapa kode yang dapat menyebabkan error pada validasi HTML5 yaitu
frameborder="0",
scrolling="no", dan
&. selain itu iframe sendiri dapat mengurangi skor seo blog ketika dicek di
Chkme.com.
Untuk itu cara yang aman (bisa dilihat dengan Chrome atau firefox) untuk membuat TV Online ini valid HTML5, sebaiknya kita gunakan iframe loader.
Langkah Pertama
Silahkan Anda buat postingan pada halaman statis / PAGE, beri judul untuk halamannya contohnya TV Online, dan lain-lain. Dan silahkan copy kode HTML di bawah ini pada posisi post editor
HTML.
<div class="tv-online loader" data-src="http://widget3.gudang.tv/2013/09/welcome-to-gudangtv.html? format=embed&player_autoplay=true"></div>
Kemudian silahkan publish postingannya dan catat URL-nya.
Langkah Kedua
Silahkan copy kode di bawah ini dan paste tepat di atas kode
</body>
<b:if cond='data:blog.url == "URL HALAMAN TV ONLINE"'>
<style type='text/css'>
.post-body{text-align:center;}
.tv-online{margin-top:30px;height: 765px; width: 565px;}
iframe{border:none}
</style>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.tv-online').each(function(){
$(this).replaceWith('<iframe class="tv-online loader" src="'+$(this).data('src')+'" scrolling="no"></iframe>')})},5000);
//]]>
</script>
</b:if>
Silahkan ganti tulisan yang warna
merah dengan URL halaman tempat kita menyimpan kode HTML TV Online-nya dari langkah pertama.
Selesai... sebagai demo silahkan coba TV Online di blog ini dengan mengklik tombol di bawah ini;
Blogger
Google+
Facebook
Twitter