Source Code Multitab Streaming Season + Episode Sederhana di Blogger

Source Code Multitab Season + Episode Sederhana di Blogger

Perkenalan

Halo Semuanya. di Postingan Kali ini Saya Akan Membagikan Source Code Multitab Season + Episode Sederhana di Blogger. Kalian bisa Mengembangkan Script ini sesuka hati kalian. Langsung Saja ke Point Utama Nya. Karna saya paling males menggunakan template text post yang itu itu aja, kalian bisa Baca Cara Pasang Script HTML, CSS, Javascript disini

Untuk Demo Kalian Bisa Cek Link DIbawah

Live Demo

Penting!
Sebelum Memulai Nya Ada Baiknya Kalian Memback-up Template Kalian Terlebih dahulu.

Source Code

<div class="streaming-widget">
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, 'Season1')">Season 1</button>
    <button class="tablinks" onclick="openTab(event, 'Season2')">Season 2</button>
  </div>

  <div id="Season1" class="tabcontent">
    <h3>Season 1</h3>
    <ul id="episodeList1"></ul>
    <iframe id="iframe11" style="display:none; width:100%; height:500px;"></iframe>
    <iframe id="iframe12" style="display:none; width:100%; height:500px;"></iframe>
  </div>

  <div id="Season2" class="tabcontent">
    <h3>Season 2</h3>
    <ul id="episodeList2"></ul>
    <iframe id="iframe21" style="display:none; width:100%; height:500px;"></iframe>
    <iframe id="iframe22" style="display:none; width:100%; height:500px;"></iframe>
  </div>
</div>

<style>
  /* Style untuk tab */
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }

  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }

  .tab button:hover {
    background-color: #ddd;
  }

  .tab button.active {
    background-color: #ccc;
  }

  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
</style>

<script type="text/javascript">
  // Fungsi untuk menambahkan episode dan season
  function addEpisode(season, episode, url) {
    var episodeList = document.getElementById('episodeList' + season);
    var li = document.createElement('li');
    li.innerHTML = '<a href="javascript:void(0);" onclick="openEpisode(\'iframe' + season + episode + '\', \'' + url + '\')">Season ' + season + ' Episode ' + episode + '</a>';
    episodeList.appendChild(li);
  }

  // Fungsi untuk mengganti konten tab
  function openTab(evt, tabName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
  }

  // Fungsi untuk menyembunyikan semua iframe
  function hideAllIframes() {
    var iframes = document.querySelectorAll('iframe');
    for (var i = 0; i < iframes.length; i++) {
      iframes[i].style.display = "none";
    }
  }

  // Fungsi untuk membuka episode dalam iframe
  function openEpisode(iframeId, url) {
    hideAllIframes(); // Sembunyikan semua iframe sebelum menampilkan yang baru
    var iframe = document.getElementById(iframeId);
    iframe.src = url;
    iframe.style.display = "block";
  }

  // Tambahkan episode dan season
  window.onload = function() {
    addEpisode(1, 1, 'https://api.seonxnn.id/embed/tt6263850');
    addEpisode(1, 2, 'https://api.seonxnn.id/embed/tt6263850');
    addEpisode(2, 1, 'https://api.seonxnn.id/embed/tt6263850');
    addEpisode(2, 2, 'https://api.seonxnn.id/embed/tt6263850');
  }
</script>

Kesimpulan

Diatas adalah Source Code Multitab Season + Episode Sederhana di Blogger., Jika Ingin Request Silahkan Berikan Komentar atau menuju Halaman Request:v.