Cocok Untuk Blog/Web Streaming.Source By Arleth

Untuk Demo Silahkan Kunjungi

Langkah 1 :

    Masuk Ke Theme > Edit HTML. Cari (Ctrl + F).

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'>
</script>

    Cari Script Jquery seperti itu atau yang mirip, Jika Sudah ada Skip aja Langkah 1. Jika Belum ada Taruh Script tersebut di atas </head>

Langkah 2:

    Taruh Code CSS ini diatas Code </head> 

  <style>
/* CSS Spoiler Tabs Post */
#--tabs{overflow:hidden;width:50%;display:inline-block;margin:0;padding:0;list-style:none}
#--tabs li{float:left;margin:0 ;margin-right:0.5%}
#--tabs a{float:left;position:relative;padding:0 9px;height:0;line-height:200px;text-transform:none;text-decoration:none;color:#fff;filter:alpha(opacity=30)}
#--tabs a:hover,#--tabs a:focus{border-bottom-color:#2e51a2;opacity:1;filter:alpha(opacity=100)}
#--tabs a:focus{outline:0}
#content {padding:0;}
#--tabs #current{z-index:3;border-bottom-color:#3d3d3d;opacity:1;filter:alpha(opacity=100);margin-bottom:5px}
#--tabs a{height:0;line-height:30px;border-bottom:30px solid #34373b;font-size:smaller}
#lightsVideo {position:relative;z-index:102;}
.lightSwitcher a:hover {text-decoration: none;color: #eee;}
.lightSwitcher {position: relative;z-index: 600;cursor: pointer;color: #fff;height: 0;padding: 0 5px;line-height: 30px;border-bottom: 30px solid #34373b;font-size: smaller;float: right;}
.lightSwitcher:hover {cursor:pointer;}
.lightSwitcher a {color: #FFF;text-decoration: none;}
.turnedOff {color: #eee;}
#lightsoff {background:rgba(0,0,0,0.90);opacity:0.99;position:fixed;left:0;top:0;width:100%;z-index:100;}
/* Frame video responsive */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){.post-body iframe{height:auto!important;max-height:auto!important}}
</style>

Langkah 3 : 

      Cari (Ctrl+F) </body>. Letakkan Code Script ini Diatas Code </body>

  <script type='text/javascript'>//<![CDATA[
// Tabs Mirror
$(document).ready(function(){$("#content").find("[id^='tab']").hide(),$("#--tabs li:first").attr("id","current"),$("#content #tab1").fadeIn(),$("#--tabs a").click(function(t){t.preventDefault(),"current"!=$(this).closest("li").attr("id")&&($("#content").find("[id^='tab']").hide(),$("#--tabs li").attr("id",""),$(this).parent().attr("id","current"),$("#"+$(this).attr("name")).fadeIn())})});
// Light Button
$(document).ready(function(){$("#lightsoff").css("height", $(document).height()).hide();$(".lightSwitcher").click(function(){$("#lightsoff").toggle();if ($("#lightsoff").is(":hidden"))$(this).html("Turn off the Lights").removeClass("turnedOff");else $(this).html("Turn on the Lights").addClass("turnedOff");});});
//]]></script>

Langkah 4 :

    Untuk Dipostingan Silahkan Salin Code ini

  <div id="lightsoff">
</div>
<div id="lightsVideo">
  <ul id="--tabs">
    <li><a href="#" name="tab1">Server 1</a></li>
    <li><a href="#" name="tab2">Server 2</a></li>
    <li><a href="#" name="tab3">Server 3</a></li>
  </ul>
  <span class='lightSwitcher' id='checkbox'><a href='javascript:void(0);' type='checkbox'>Turn off the Lights</a><label data-off='OFF' data-on='ON'/>
  </span>
  <div id="content">
    <div id="tab1"><!-- LETAKKAN IFRAME DIBAWAH INI -->    </div>
    <div id="tab2"><!-- LETAKKAN IFRAME DIBAWAH INI --> </div>
    <div id="tab3"><!-- LETAKKAN IFRAME DIBAWAH INI --> </div>
  </div>
</div>

Silahkan Ganti Yang Sudah saya kasih tanda Kuning "Server" Bisa kalian ganti seperti "Google Drive" Dll, Dan untuk Iframe kalian Embed Video Player Seperti :

<iframe src="#" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" width="630" height="340"></iframe>

lalu letakkan di Tanda Kuning Iframe