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.

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


No comments:

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel