Holaaaaaaaaa :v , pada kesempatan kali ini aku akan membagikan tutorial ihwal bagaimana Cara menciptakan mirror streaming , dilengkapi dengan tombol "Turn Of The Lights" , wahhh mantul bukan ? iya dong ,tutorial ini sangat cocok buat sahabat yang mengelola website streaming misalnya website anime. baiklah tanpa basa bau kita pribadi ke tutorialnya.
Cara Membuat Mirror Streaming
1. Buka Blogger , klik Tema , Selanjutnya klik tombol Edit HTML.
2.Letakan Jquery berikut sempurna diatas isyarat </head> , kalo sahabat sudah menepatkan isyarat berikut sebelumnya sahabat dapat melewati tahap ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/j4vascript'/> 3. Letakan CSS berikut sempurna diatas isyarat ]]></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 isyarat j4vascript berikut sempurna diatas isyarat </body>
<b:if cond='data:blog.pageType == "item"'> <div id='lightsoff'/> <script type='text/j4vascript'>//<![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 gres , 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="j4vascript: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 sahabat ganti "Isi dengan Link embed" dengan sumber video embed sahabat , silahkan lihat referensi dibawah ini biar 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="j4vascript: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> aku harap dengan klarifikasi yang aku buat ini gampang dipahami oleh sobat, demikan untuk tutorial mengenai Cara Membuat Mirror Streaming Responsive di Blogspot kali ini , kalau ada yang perlu dipertanyakan silahkan komentar dibawah, hingga jumpa di tutorial selanjutya
Sumber http://idalponse.blogspot.com
EmoticonEmoticon