Cara Memasang TV Online Dari GudangTV - Valid HTML5 & SEO Friendly

M-S Blog || sebagai pemilik blog tentunya kita ingin memberikan segala kemudahan bagi para pembaca blognya, salah satunya 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 satu penyedia widget TV Online ini adalah GudangTV yang saya rasa cukup komplit channel TV-nya yang patut kita coba pasang di blog kita.

Nah kali ini saya akan share cara memasang TV online dari GudangTV ini agar valid HTML5 juga seo friendly. Sebenarnya cara mendapatkan kode embed-nya 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>

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.

Untuk itu cara yang aman (bisa dilihat dengan Chrome atau Firefox) untuk membuat TV online ini valid HTML5 dan seo friendly, sebaiknya kita gunakan iframe loader. 

Langkah Pertama

Silahkan buat postingan pada halaman statis / PAGE, beri judul untuk halamannya 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&amp;player_autoplay=true"></div>

Kemudian silahkan Publish postingannya dan catat URL-nya.

Langkah Kedua

Silahkan copy kode di bawah ini dan paste di atas kode </body>

<b:if cond='data:blog.url == &quot;URL HALAMAN TV ONLINE&quot;'>
<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 URL HALAMAN TV ONLINE dengan URL halaman tempat kita menyimpan kode HTML TV online-nya dari Langkah Pertama. 

DEMO

Tweet