Cara Membuat Streaming Video (Multi Tab) di Blogger

Dezign Desu - Pernahkah kalian menonton video (streaming) via website / youtube / semacamnya?
Pada kesempatan kali ini saya akan menyampaikan bagaimana cara membuat wadah (tempat) streaming tersebut menggunakan html, javascritp & css biar keliatan agak rapi.

Tutorial kali ini saya tidak lagi cuma main embed 1 video saja, tapi berbagai video dengan berbagai resolusi. Tapi tetap tergantung pada user, mau bi buat 1 video dengan resolusi 480p atau mau di buat sama dengan tutorial & gambar yang saia sediakan atau... Terserah.

Btw.. mungkin desain kali ini belum ada yang menyamai / bisa di bilang ini buatan saya, walaupun ada teman yang membantu untuk menemukan cara ini dan akhirnya saya membuat post ini.. walupun suatu saat mungkin ada yang buat tutorial mirip semacam ini... hahahah.

Tutorial Membuat Streaming Video (Multi Tab) :

Login pada akun blogspot kalian (ini wajib).
Setelah masuk pada dashbord blogger, klik bagian TEMA.
Edit HTML.
Cari kode ]]></b:skin>, kalau gak ketemu silahkan pakai ctrl + f pada keyboard.

Tempeklan kode ini di atas ]]></b:skin>

/* Multi tab video - DezignDesu */
#multitab-embed {
    position: relative;
    box-sizing: border-box;
    margin: 0 auto;
    line-height: 2em;
    font-size: 15px !important;
    width: 100%
}
#multitab-embed #movie-player {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 1.66666666666667em;
    height: 0
}
#multitab-embed #movie-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
#multitab-embed #server-list {
    position: relative;
    background: transparent;
    display: block;
}
#multitab-embed #server-list .server-item {
    position: relative;
    padding-left: 120px;
}
#multitab-embed #server-list .server-item::before {
    content: attr(title);
    display: inline-block;
    position: absolute;
    left: 10px;
}
#multitab-embed #server-list a {
    color: #334;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.17);
    padding: 0px 8px;
    display: inline-block;
    margin: 3px 0;
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 14px;
}
#multitab-embed #server-list a:hover {
    background: #4291e5;
    color: #fff;
    border: 1px solid transparent;
    transition: .5s;
}
button.qualit::before {
    animation: mymove 2s linear infinite;
    right: 4px;
    top: 2px;
    position: absolute;
    content: ' ';
    height: 24px;
    width: 24px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z' fill='%23fff'/%3E%3C/svg%3E");
}
button.qualit::before {
    left: 4px;
}
#server-list {
    transition: 1s;
    max-height: 0;
    overflow: hidden;
}
#server-list.show {
    transition: 1s;
    max-height: 500px;
    border-radius: 0 0 10px 10px;
    padding: 5px;
    box-shadow: 0 0 2rem 0 rgba(113, 121, 130, 0.15) !important;
    height: auto;
}
button.qualit {
    display: block;
    background: #4093ec;
    border: 0;
    color: #fff;
    padding: 5px 10px 5px 35px;
    margin: 2px 0 0 0;
    position: relative;
    border-radius: 0 8px 8px 8px;
}
@keyframes mymove {
    25% {transform: rotate(90deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(270deg);}
    100% {transform: rotate(360deg);}
}

Jangan di close dulu, belum selesai.
Selanjutnya cari </body>

Tempeklan kode ini di atas </body>

<script>
  function hide() {
    var x = document.getElementById("server-list");
    if (x.classList.contains("show")) {
      x.classList.remove("show");
    } else {
      x.classList.add("show");
    }
  }
</script>

Jika sudah, silahkan klik Simpan / Save

Tahap terakhir (Cara pakai), silahkan buat postingan video yang kalian inginkan. Jangan lupa di kasih code di bawah ini!!, Tapi editnya menggunakan tampilan HTML jangan yang tampilan Menulis.

<div id='multitab-embed'>
    <div id="movie-player">
        <iframe src="EMBED URL VIDEO AWAL" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
    </div>
  <button class="qualit" onclick="hide()">SELECT SERVER</button>
    <div id="server-list">
        <div class="server-item" title="Google Drive">
            <a href="EMBED URL VIDEO" target="search_iframe">360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">1080p</a>
        </div>
        <div class="server-item" title="Sharer Drive">
            <a href="EMBED URL VIDEO" target="search_iframe">360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">1080p</a>
        </div>
    </div>
</div>

Warna Biru : ganti dengan url embed video kalian (urlnya saja).
Warna Hijau : ganti dengan nama server (tempat) kalian ambil video tersebut.
Jika semua sudah selesai, silahkan publish posting kalian.
Dah... itu saja, SELESAI

Sekian tentang tutorial kali ini "Cara Membuat Streaming Video (Multi Tab) di Blogger". Bagi yang belum paham, itu kolom komentar masih berfungsi. Silahkan tulis saja disitu, admin akan berusaha bantu sebisa mungkin. Cara membuat streaming, Cara membuat blog streaming, Cara membuat streaming iframe, Cara membuat video player di blogger, Cara membuat streaming multi tab, Cara membuat blog streaming anime, Cara membuat streaming video anime, Cara membuat web streaming simple, Cara membuat streaming, template streaming blogger.

DzDesu

Cara Membuat Streaming Video (Multi Tab) di Blogger

1 komentar untuk "Cara Membuat Streaming Video (Multi Tab) di Blogger"

Menu Halaman Statis