Cara Membuat Mirror Streaming Responsive di Blogspot

Holaaaaaaaaa :v , pada kesempatan kali ini saya akan membagikan tutorial tentang bagaimana Cara membuat mirror streaming , dilengkapi dengan tombol "Turn Of The Lights" , wahhh mantul bukan ? iya dong ,tutorial ini sangat cocok buat sobat yang mengelola website streaming contohnya website anime. oke tanpa basa basi kita langsung ke tutorialnya.

DEMO

Cara Membuat Mirror Streaming
1. Buka Blogger , klik Tema , Selanjutnya klik tombol Edit HTML.
2.Letakan Jquery berikut tepat diatas kode </head> , kalo sobat sudah menepatkan kode berikut sebelumnya sobat bisa melewati tahap ini.

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

3. Letakan CSS berikut tepat diatas kode ]]></b:skin>

 /* 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}}

4. Selanjutnya tambahkan kode javascript berikut tepat diatas kode </body>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='lightsoff'/>
<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>
</b:if>

5. Simpan tema

Buatlah postingan atau halaman baru , dan gunakan markup HTML berikut untuk mirror streamingnya

 <div id="lightsVideo">
<ul id="--tabs">
<li><a href="#" name="tab1">Google Drive</a></li>
<li><a href="#" name="tab2">Solidfiles</a></li>
<li><a href="#" name="tab3">Mp4Upload</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">
  </label></span>
  <br />
<div id="content">
<div id="tab1">
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="NO" src="Isi dengan Link embed" width="640"></iframe>
    </div>
<div id="tab2">
<!-- IFRAME VIDEOS -->
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="NO" src="Isi dengan Link embed" width="640"></iframe>
    </div>
<div id="tab3">
<!-- IFRAME VIDEOS -->
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="NO" src="Isi dengan Link embed" width="640"></iframe>
    </div>
</div>
</div>

Silahkan sobat ganti "Isi dengan Link embed" dengan sumber video embed sobat , silahkan lihat contoh dibawah ini agar paham .

 <div id="lightsVideo">
<ul id="--tabs">
<li><a href="#" name="tab1">Google Drive</a></li>
<li><a href="#" name="tab2">Solidfiles</a></li>
<li><a href="#" name="tab3">Mp4Upload</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">
  </label></span>
  <br />
<div id="content">
<div id="tab1">
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="NO" src="https://drive.google.com/file/d/1AXnTHzX1rO9XdNXumJq_ZC7GbQBWh-w4/preview" width="640"></iframe>
    </div>
<div id="tab2">
<!-- IFRAME VIDEOS -->
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="NO" src="https://www.mp4upload.com/embed-ijd403apf49t.html" width="640"></iframe>
    </div>
<div id="tab3">
<!-- IFRAME VIDEOS -->
<iframe allowfullscreen="" frameborder="0" height="360" marginheight="0" marginwidth="0" scrolling="NO" src="https://www.mp4upload.com/embed-ijd403apf49t.html" width="640"></iframe>
    </div>
</div>
</div>

saya harap dengan penjelasan yang saya buat ini mudah dipahami oleh sobat, demikan untuk tutorial mengenai Cara Membuat Mirror Streaming Responsive di Blogspot kali ini , bila ada yang perlu dipertanyakan silahkan komentar dibawah, sampai jumpa di tutorial selanjutya