Cara membuat Mirror Streaming video untuk blogger

Cara membuat Mirror Streaming video untuk blogger - Selamat pagi semuanya, kali ini saya akan membagikan request tutorial tentang Cara Membuat Mirror Streaming Video Untuk Blogger, request lainnya belum bisa saya buat karena komputer admin sedang rusak jadi saya hanya membuat request yang menurut saya mudah, ok langsung saja kita mulai tutorial kali ini.

Demo

Mirror Streaming video untuk blogger

1. Buka Blogger > Template > Edit HTML, lalu cari </style> lalu simpan CSS berikut di atasnya

/* Lampu mati bro */
#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;}
/* 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: 10px 5px;}
#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}

2. Langkah ke dua yaitu simpan javascript berikut ini di atas </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![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())})});
//]]>
</script>
<div id='lightsoff'/>
<script type='text/javascript'>
//<![CDATA[
// 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>

3. Langkah terakhir buatlah post, simpan HTML berikut ini di post tersebut dan jangan lupa ganti yang sudah saya tandai.

<div id="lightsVideo">
<ul id="tabs">
<li><a href="#" name="tab1">Solidfiles</a></li>
<li><a href="#" name="tab2">Mp4Upload</a></li>
<li><a href="#" name="tab3">GDrive</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">
<iframe src="https://drive.google.com/file/d/0B8mLGk1JKQS_MnptOFJjemlFOUk/preview" width="730" height="410"></iframe>
</div>

<div id="tab2">
<IFRAME SRC="http://www.mp4upload.com/embed-8pi035khmao7.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=730 HEIGHT=410 allowfullscreen></IFRAME>
</div>

<div id="tab3">
<iframe src="https://drive.google.com/file/d/0B8mLGk1JKQS_MnptOFJjemlFOUk/preview" width="730" height="410"></iframe>
</div>

</div>
</div>

Sekali lagi maaf ya bagi yang sudah request tapi belum diselesaikan, ok sekian tutorial kali ini semoga bermanfaat & sampai jumpa ditutorial berikutnya.