Ads

Multi Tab Video Streaming Otakudesu

Multi Tab Video Streaming Otakudesu
Dagruel

Cara Membuat Multi Tab Video Streaming Otakudesu

Pertama, salin css di bawah ke dalam template blog kalian. Tepat nya di atas tag </style>.

.lightVideo {position: relative;z-index: 102}
.lightVideo .embed {position: relative;width: 100%;height: auto;}
.embed .player-embed {margin: auto;}
.responsive_emded {position: relative;padding-bottom: 51%;padding-top: 44px;height: 0;overflow: hidden;}
.responsive_emded iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;right: 1px;}
.linkStream {display: flex;justify-content: space-between;overflow: hidden;margin-top: 10px;}
.linkStream ul {list-style: none;margin: 0;padding: 4px;width: 100%;text-align: center;line-height: 20px;font-size: 13px;color: #eee;text-decoration: none;max-width:33%}
.linkStream ul span {display: inline-block;width: 100%;cursor: pointer;}
.linkStream ul span:before {content: '';display: inline-block;min-width: 18px;min-height: 18px;vertical-align: middle;margin-right: 7px;background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5,4.5H21.5C22.34,4.5 23,5.15 23,6V17.5C23,18.35 22.34,19 21.5,19H2.5C1.65,19 1,18.35 1,17.5V6C1,5.15 1.65,4.5 2.5,4.5M9.71,8.5V15L15.42,11.7L9.71,8.5M17.25,21H6.65C6.35,21 6.15,20.8 6.15,20.5C6.15,20.2 6.35,20 6.65,20H17.35C17.65,20 17.85,20.2 17.85,20.5C17.85,20.8 17.55,21 17.25,21Z' fill='%23eee'/%3E%3C/svg%3E") center/18px no-repeat;}
.linkStream ul li {display: none;}
.linkStream ul li:nth-of-type(odd){background: #545655}
.linkStream ul li a {color: #fff;text-decoration: none;}
.linkStream ul li a:hover {text-decoration: underline;}
.linkStream ul.m360p {background: #727679;}
.linkStream ul.m480p {background: #2699C8;margin: 0 5px;}
.linkStream ul.m720p {background: #b93535}
.tambahan {display: inline-block;width: 100%;border-left: 4px solid #47516E;border-right: 4px solid #47516E;border-bottom: 4px solid #0f7ece;padding-left: 7px;padding-right: 7px;padding-bottom: 5px;transition: .3s;margin-bottom: 10px;margin-top: 10px;}
.tambahan .lightRoom {float: left;width: 60px;background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z' fill='%23edf094'/%3E%3C/svg%3E");background-size: 35px !important;background-repeat: no-repeat !important;background-color: #e23a2e !important;background-position: center !important;min-height: 50px;margin-right: 5px;cursor: pointer;transition: all .3s ease-out}
.tambahan .lightRoom.active {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.68L16.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,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z' fill='%23edf094'/%3E%3C/svg%3E");}
.tambahan .lightRoom.active ~ .item {color: #eee;}
.tambahan .lightRoom.active:hover {background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z' fill='%23edf094'/%3E%3C/svg%3E")}
.tambahan .lightRoom:hover {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.68L16.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,4M9,20V21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9Z' fill='%23edf094'/%3E%3C/svg%3E")}
.overlayActive {display: none;position: fixed;left: 0;top: 0;bottom: 0;background: rgba(0, 0, 0, .93);width: 100%;height: 100%;z-index: 101;transition: all .5s ease}

Selanjutnya pasang script berikut di atas tag </body>.

<script>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('S a=["\\r\\e\\j\\d","\\d\\n\\s\\s\\c\\b","\\p\\c\\f\\k\\u\\x\\d\\g\\b\\e\\m\\h\\o\\c\\h\\c\\f","\\i\\c\\f\\i\\u","\\p\\c\\f\\k\\u\\x\\d\\g\\b\\e\\m\\h\\o\\c\\h\\j\\v\\e\\k","\\e\\i\\d\\f\\l\\b","\\d\\n\\s\\s\\c\\b\\J\\c\\e\\j\\j","\\t\\j\\D\\f\\d\\i\\w","\\p\\n\\l\\b\\g\\c\\e\\y\\C\\i\\d\\f\\l\\b","\\t\\j\\D\\f\\d\\i\\w\\H\\h\\p\\n\\l\\b\\g\\c\\e\\y\\C\\i\\d\\f\\l\\b","\\p\\c\\f\\k\\u\\x\\d\\g\\b\\e\\m\\h\\o\\c\\h\\c\\f\\h\\e","\\v\\g\\b\\l\\b\\k\\d\\I\\b\\r\\e\\o\\c\\d","\\w\\g\\b\\r","\\e\\d\\d\\g","\\j\\g\\i","\\t\\v\\b\\m\\G\\b\\z\\h\\f\\r\\g\\e\\m\\b","\\n\\k","\\t\\z\\b\\r\\e\\o\\c\\d\\T\\v\\b\\k","\\g\\b\\e\\z\\y"];q R(){$(E)[a[U]](q(){$(a[4])[a[3]](q(){$(a[2])[a[1]](a[0])});$(a[9])[a[3]](q(){$(a[7])[a[6]](a[5]);$(a[8])[a[1]]()});$(E)[a[O]](a[3],a[P],q(B){B[a[Q]]();N A=$(K)[a[F]](a[L]);$(a[M])[a[F]](a[V],A)});$(a[W])[a[3]]()})}',59,59,'||||||||||_0x2641|x65|x6C|x74|x61|x69|x72|x20|x63|x73|x6E|x76|x6D|x6F|x75|x2E|function|x66|x67|x23|x6B|x70|x68|x53|x79|x64|_0xb12cx3|_0xb12cx2|x41|x77|document|13|x62|x2C|x44|x43|this|12|15|let|16|10|11|dagruelPembed|var|x4F|18|14|17'.split('|'),0,{}));
dagruelPembed();
//]]>
</script>
Catatan: Script di atas memakai jQuery, jadi harus pasang jQuery dulu.

Jika sudah silahkan simpan template. Sekarang jika ingin membuat postingan tinggal salin HTML berikut saja.

<span class="overlayActive"></span>
<div class="lightVideo" id="lightVideo">
  <div class="embed">
    <div class="player-embed" id="pembed">
      <div class="responsive_emded">
        <iframe src="" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" name="search_iframe"></iframe>
      </div>
    </div>
    <div class="linkStream">
      <ul class="m360p">
        <span class="title">Mirror 360p</span>
        <li><a href="Link">NameServer</a></li>
        <li><a id="defaultOpen" href="Link">NameServer</a></li>
        <li><a href="Link">NameServer</a></li>
      </ul>
      <ul class="m480p">
        <span class="title">Mirror 360p</span>
        <li><a href="Link">NameServer</a></li>
        <li><a href="Link">NameServer</a></li>
      </ul>
      <ul class="m720p">
        <span class="title">Mirror 360p</span>
        <li><a href="Link">NameServer</a></li>
        <li><a href="Link">NameServer</a></li>
        <li><a href="Link">NameServer</a></li>
      </ul>
    </div>
  </div>
  <div class="tambahan">
    <div class="lightRoom" id="switch"></div>
    <span class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
</div>
Catatan baris yang ditandai
  1. Mirror 360p, 480p, 720p = Resolusi Video.
  2. Link = link video yang akan di embed bisa dari youtube, google drive dll.
  3. NameServer = Nama Hosting.
  4. id="defaultOpen" = Server yang pertama kali di buka.
  5. Lorem ipsum blablaba = Terserah Mau di ganti dengan apa.

Sekian dari saya terima kasih. Jika ada yang ingin di tanyakan silahkan coret-coret kolom komentar.

https://otakudesu.tv

Comments

Blogger Disqus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!