Multi Tab Streaming versi AnimeStream

Postingan pertama saya setelah beberapa saat hiatus karena laptop saya yang sebelum nya rusak. Dan alhamdulillah sudah bisa membeli yang baru.

Kali ini saya akan membagikan source code untuk Multi tab streaming versi AnimeStream, jadi langsung saja comot.

Multi Tab Streaming versi AnimeStream
Dagruel

CSS

Untuk css bisa di pasang di dalam template tepat nya di atas tag </style> atau ]]></b:skin>.

.gomuStrem>.gPembed{background:#000;overflow:hidden;position:relative}.gPembed>.resGomu{position:relative;z-index:1;max-width:100%;height:0;padding-bottom:56.2%}.resGomu>iframe{position:absolute;border:none;width:100%!important;height:100%!important;top:0;left:0;margin:0;padding:0;z-index:2}.gomuStrem>.gData{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;background:#fff;position:relative;overflow:hidden;padding:10px 15px;font-size:.85em;margin-bottom:15px}.gData>.gSel>.gomuSelect{border:1px solid #dbdbdb;border-radius:4px;color:#363636;-webkit-box-shadow:inset 0 1px 2px hsl(0deg 0% 4% / 10%);box-shadow:inset 0 1px 2px hsl(0deg 0% 4% / 10%);padding:5px 3px;font-size:13px;font-weight:300;outline:0}.gData>.gDow{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap}.gDow>div:not(:last-child){margin-right:7px}.gDow>div{display:inline-block;padding:5px;font-size:12.5px;line-height:1.2em;cursor:pointer}.gDow>div:before{content:'';display:inline-block;width:14px;height:14px;vertical-align:middle;margin-right:3px}.gCinema:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z' fill='%23a20a0a'/%3E%3C/svg%3E") center/14px no-repeat}.gCinema.gDark:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C9.76,2 7.78,3.05 6.5,4.68L7.93,6.11C8.84,4.84 10.32,4 12,4A5,5 0 0,1 17,9C17,10.68 16.16,12.16 14.89,13.06L16.31,14.5C17.94,13.21 19,11.24 19,9A7,7 0 0,0 12,2M3.28,4L2,5.27L5.04,8.3C5,8.53 5,8.76 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H14.73L18.73,22L20,20.72L3.28,4M7.23,10.5L12.73,16H10V13.58C8.68,13 7.66,11.88 7.23,10.5M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z' fill='%23a20a0a'/%3E%3C/svg%3E") center/14px no-repeat}.gDL:before{background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8,13H10.55V10H13.45V13H16L12,17L8,13M19.35,10.04C21.95,10.22 24,12.36 24,15A5,5 0 0,1 19,20H6A6,6 0 0,1 0,14C0,10.91 2.34,8.36 5.35,8.04C6.6,5.64 9.11,4 12,4C15.64,4 18.67,6.59 19.35,10.04M19,18A3,3 0 0,0 22,15C22,13.45 20.78,12.14 19.22,12.04L17.69,11.93L17.39,10.43C16.88,7.86 14.62,6 12,6C9.94,6 8.08,7.14 7.13,8.97L6.63,9.92L5.56,10.03C3.53,10.24 2,11.95 2,14A4,4 0 0,0 6,18H19Z' fill='%23a20a0a'/%3E%3C/svg%3E") center/14px no-repeat}.gDow>.gCinema{background:#fff}.gDow>.gDL{border:1px solid #f05252;color:#f05252;border-radius:3px;font-weight:500;padding:3px 10px}#gomuShadow{display:none;position:fixed;left:0;top:0;bottom:0;background:rgba(0,0,0,.93);width:100%;height:100%;z-index:100;transition:all .5s ease}.gomuPly{position:absolute;top:0;width:100%;height:100%;background-image:url(https://i.pinimg.com/originals/29/da/b4/29dab486d78e101620f84c6f344cc553.jpg);background-size:cover}#gomuPly{position:absolute;top:50%;left:50%;width:68px;height:48px;background-color:#333;opacity:.8;box-shadow:0 0 30px rgb(0 0 0 / 60%);z-index:2;border-radius:12px;transform:translate3d(-50%,-50%,0);cursor:pointer;transition:background-color .3s ease-out}#gomuPly:before{content:"";border-style:solid;border-width:10px 0 10px 20px;border-color:transparent transparent transparent #fff;position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0)}.gomuPly:hover #gomuPly{background-color:red}

Javascript

Begitu pula untuk script nya, letakkan di atas tag </body>.

<script>/*<![CDATA[*/
function loadMi(e){if(e.value.length<1)return!1;e.value&&document.getElementById("resGomu").getElementsByTagName("iframe")[0].setAttribute("src",e.value),document.querySelector(".gomuSelect>option").setAttribute("disabled","disabled");var t=document.getElementById("gomuPly");if(t){var n=setInterval(function(){t.style.opacity||(t.style.opacity=1),t.style.opacity>0?t.style.opacity-=.1:clearInterval(n)},200);t.parentNode.parentNode.removeChild(t.parentNode)}return!0}document.querySelector(".gomuPly")&&document.getElementById("gomuPly").addEventListener("click",function(){var e=document.getElementById("gomuPly"),t=setInterval(function(){e.style.opacity||(e.style.opacity=1),e.style.opacity>0?e.style.opacity-=.1:clearInterval(t)},200);e.parentNode.parentNode.removeChild(e.parentNode),document.querySelector("#resGomu iframe").setAttribute("src",document.getElementById("gomuDefault").value),document.getElementById("gomuDefault").setAttribute("selected",!0)},!1),document.getElementById("gCinema").addEventListener("click",function(){this.classList.contains("gLight")?(document.querySelector(".gomuStrem>.gPembed").style.zIndex="102",this.classList.remove("gLight"),this.classList.add("gDark"),document.querySelector("#gCinema span").innerHTML="Turn on Light",this.style.zIndex="102",document.getElementById("gomuShadow").style.display="block"):(document.querySelector(".gomuStrem>.gPembed").style.zIndex="",this.classList.remove("gDark"),this.classList.add("gLight"),document.querySelector("#gCinema span").innerHTML="Turn off Light",this.style.zIndex="",document.getElementById("gomuShadow").style.display="none")}),document.getElementById("gCinema").addEventListener("click",function(){this.style.visibility&&(document.querySelector(".gomuStrem>.gPembed, .gDark").style.zIndex="",document.getElementById("gCinema").classList.remove("gDark"),document.getElementById("gCinema").classList.add("gLight"),document.querySelector("#gCinema span").innerHTML="Turn off Light",this.style.display="none")});
/*]]>*/</script>

HTML

Selanjutnya html yang terpenting. letak nya di dalam postingan.

<div class='gomuStrem'>
    <div class='gPembed'>
      <div class='resGomu' id='resGomu'>
        <iframe loading="lazy" src="" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" name="search_iframe"></iframe>
        <div class="gomuPly">
          <div id='gomuPly'></div>
        </div>
      </div>
    </div>
    <div class='gData'>
      <div class="gSel">
        <select id='gomuSelect' class="gomuSelect" onchange="loadMi(this)" name="gomuSelect">
          <option value="">Select Video Server</option>
          <option id='gomuDefault' value="#urlStreaming1">Nama Server1</option>
          <option value="#urlStreaming2">Nama Server2</option>
        </select>
      </div>
      <div class="gDow">
        <div class="gCinema gLight" id="gCinema"><span>Turn off Light</div>
        <div class="gDL" id="gDL"><span><a href="#urldownload">Download</a></div>
      </div>
    </div>
  </div>
<div id='gomuShadow'></div>
Text yang ditandai bisa kalian ganti sesuai keterangan.

Mungkin itu saja yang dapat saya post. Dan jika ada yang tidak di mengerti silahkan berikan komentar di bawah.

Comments