Cara Menciptakan Post Streaming Video

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

Pada artikel kali ini aku buat singkat dan terang semoga gampang dimengerti kalian, kalau ada yang kurang paham silahkan beri komentar ya. Untuk Demo kalian dapat cek pada tombol dibawah ini..

Demo

Multiple Stream Video

1. Buka Blogger > Tema > Edit HTML, Cari Jquery menyerupai 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 bab yang sudah ditandai, misalnya menyerupai gambar dibawah ini.

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

Bagikan Artikel ini