Cara Membuat Streaming Post v2

Arleth-desz - Multiple Stream Video ini hampir sama seperti post sebelumnya yaitu "Cara membuat Post Streaming Video", yang membedakannya post kali ini memuat lebih banyak video sesuai yang di inginkan.


Cara Membuat Multiple Stream Post v2

Artikel ini saya buat berdasarkan request, Cara Membuat Streaming Post v2 saya buat hanya menggunakan iframe sebagai wadah videonya, untuk versi HTML5 next saya akan buat. OK kita mulai saja tutorial kali ini & demo kalian bisa cek tombol dibawah ini:



Cara Membuat Streaming Post v2

  1. Buka Blogger > Tema > Edit HTML
  2. Salin dan simpan CSS berikut ini ke dalam <style> ... </style>
    3. /* CSS IFRAME Multiple Stream Video
   ================================  */
#--title-anime{display:block;text-align:center;padding:10px;font-size:14px;font-weight:600;background:#212121;color:#fff;border-bottom:2px solid #E91E63}
#--iframe-video{display:block;overflow:hidden;clear:both;text-align:center;background:#212121}
#--iframe-video a{display:inline-block;padding:7px 10px;font-size:14px;color:#FFF;background:#444;cursor:pointer;margin:5px;border-top-left-radius:5px;border-top-right-radius:5px;font-weight:600;border-bottom:2px solid #E91E63;box-shadow:rgba(0,0,0,.12) 0 1px 3px,rgba(0,0,0,.22) 0 1px 2px;transition:all .2s}
#--iframe-video a:hover{background:#333;text-decoration:none;transition:all .2s}
#--iframe-video.--tab-eps:before{content:'Episode';display:block;color:#FFF;padding:10px;font-size:15px;background:#333;border-bottom:1px solid #121212}

  3. Kemudian, salin & letakkan javascript berikut di atas </head>
    4. <b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'>
<script type='text/javascript'>//<![CDATA[
// Script Multiple Embed video - Don't Edit
$(document).ready(function(){(function(){var g=anime.length;var e=$(".--tab-eps");for(var h=0;h<g;h++){e.append("<a class='ganti-eps' data-id='"+h+"' data-eps='Episode "+(h+1)+"'>"+(h+1)+"</a>")}var f=$(".--show-video");$(".ganti-eps").click(function(){f.html('<div class="--responsive"><iframe src="'+anime[parseInt($(this).data("id"))]+'" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="360"  ></iframe></div>');$("#--title-anime").text($(this).data("eps"))})}())});
//]]></script>
</b:if>

  4. Jika sudah save tema
  5. Langkah terakhir yaitu buat post
  6. Buat lah post menggunakan Tag HTML & Javascript berikut, jangan lupa edit bagian yang sudah di tandai.
    7. <span id='--title-anime'>Episode 1</span>
<div class='--show-video'>
   <iframe 
      allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width='100%' height='360' 
      src="LINK EMBED VIDEO Episode 1">
   </iframe>
</div>
<div id="--iframe-video" class="tabs --tab-eps">
   <!-- tombol akan muncul disini -->
</div>

<script>
// LINK EMBED VIDEO
var anime = [
 "LINK VIDEO", // Episode 1
 "LINK VIDEO", // Episode 2
 "LINK VIDEO", // Episode 3
 "LINK VIDEO", // Episode 4
 "LINK VIDEO", // Episode 5
 "LINK VIDEO", // Episode 6
 "LINK VIDEO", // Episode 7
 "LINK VIDEO", // Episode 8
 "LINK VIDEO", // Episode 9
 "LINK VIDEO", // Episode 10
 "LINK VIDEO", // Episode 11
 "LINK VIDEO", // Episode 12
]
</script>

  7. Jika lebih dari 12 episode maka kalian tinggal menambahkan javascript nya seperti berikut ini
    8. <span id='--title-anime'>Episode 1</span>
<div class='--show-video'>
   <iframe 
      allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width='100%' height='360' 
      src="LINK EMBED VIDEO Episode 1">
   </iframe>
</div>
<div id="--iframe-video" class="tabs --tab-eps">
   <!-- tombol akan muncul disini -->
</div>

<script>
// LINK EMBED VIDEO
var anime = [
 "LINK VIDEO", // Episode 1
 "LINK VIDEO", // Episode 2
 "LINK VIDEO", // Episode 3
 "LINK VIDEO", // Episode 4
 "LINK VIDEO", // Episode 5
 "LINK VIDEO", // Episode 6
 "LINK VIDEO", // Episode 7
 "LINK VIDEO", // Episode 8
 "LINK VIDEO", // Episode 9
 "LINK VIDEO", // Episode 10
 "LINK VIDEO", // Episode 11
 "LINK VIDEO", // Episode 12
 "LINK VIDEO", // Episode 13
 "LINK VIDEO", // Episode 14
]
</script>


Jika ada pertanyaan atau kurang paham silahkan beri komentar kalian dibawah post ini. Sekian artikel untuk kali ini, semoga bermanfaat & sampai jumpa di tutorial berikut nya.