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..
Multiple Stream Video
- Buka Blogger > Tema > Edit HTML, Cari Jquery menyerupai dibawah ini,
Jika sudah ada di tema kalian, Abaikan. - Simpan CSS berikut di dalam <style> ... </style>
- Jika Sudah cari </body> [letaknya ada di paling bawah tema]
- Tambah kan Javascript berikut di atas </body>
- Jika Sudah Save tema.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
/* 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}}
<b:if cond='data:blog.pageType == "item"'> <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>
- Buatlah Post > HTML bukan
Compose - Silahkan gunakan Markup HTML berikut untuk Multiple Stream Video nya
Sebelum masuk ke tahap selanjutnya
Pastikan Tidak ada yang terlewati/salah pada tutorial diatas
<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>
ok sekian tutorial kali ini semoga bermanfaat, kalau ada yang ingin ditanyakan silahkan tulis saja pada kolom komentar dibawah & hingga jumpa di artikel berikutnya.