Cara membuat Post Streaming video

Arlethdesign - Post kali ini saya akan memberitahu kalian bagaimana Cara membuat Post Streaming Video, artikel kali ini sama dengan contoh post streaming pada tema blog Unlimited Stream.

Pada artikel kali ini saya buat singkat dan jelas agar mudah dimengerti kalian, kalau ada yang kurang paham silahkan beri komentar ya. Untuk Demo kalian bisa cek pada tombol dibawah ini..

Demo

Multiple Stream Video

1. Buka Blogger > Tema > Edit HTML, Cari Jquery seperti dibawah ini,
   Jika sudah ada di tema kalian, Abaikan.

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



2. Simpan CSS berikut di dalam <style> ... </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}}



3. Jika Sudah cari </body> [letaknya ada di paling bawah tema]
4. Tambah kan Javascript berikut di atas </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. Jika Sudah Save tema.

Sebelum masuk ke tahap selanjutnya
Pastikan Tidak ada yang terlewati/salah pada tutorial diatas



• Buatlah Post > HTML bukan Compose
• Silahkan gunakan Markup HTML berikut untuk Multiple Stream Video nya

<div id="lightsVideo">
  <ul id="--tabs">
    <li><a href="#" name="tab1">EMPTY 1</a></li>
    <li><a href="#" name="tab2">EMPTY 2</a></li>
    <li><a href="#" name="tab3">EMPTY 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">
       <!-- IFRAME VIDEOS -->
    </div>
    <div id="tab2">
       <!-- IFRAME VIDEOS -->
    </div>
    <div id="tab3">
       <!-- IFRAME VIDEOS -->
    </div>
  </div>
</div>



• Silahkan ubah bagian yang sudah ditandai, contohnya seperti gambar dibawah ini.

ok sekian tutorial kali ini semoga bermanfaat, jika ada yang ingin ditanyakan silahkan tulis saja pada kolom komentar dibawah & sampai jumpa di artikel berikutnya.