Cara Membuat Multi Tab Streaming Server Seperti LK21

Memasang media player mirip lk21 - Bagi anda yang sering mengunjungi web film seperti layar kaca 21 pasti sudah melihat media player yang mereka miliki dan cukup di terapkan di blog anda. artikel ini khusus untuk blog anda yang bertema tentang download film atau nonton film.

Fitur yang tersedia seperti nama server, format kualitas video agar lebih leluasa memilih kualitas yang di tonton. multi tab server ini sudah responsive untuk semua perangkat, jadi loading halaman menjadi cepat dan efesien memutarnya.

Anda dapat memutar video secara embed terlebih dahulu, contohnya video youtube, file video yang berada di googledrive dan lain-lain.

Demo Multi Tab

Memasang Media Player MultiTab Mirip LK21

1. Theme > Edit HTML > Cari </head>.
2. Letakkan script css dibawah ini, tepat di atas </head>.

<style type="text/css">
/*CSS Multi Tab Video by Blog Surya Pero*/
#multitab-video{position:relative;box-sizing:border-box;margin:0 auto;line-height:2em;font-size:15px!important;width:100%}
#multitab-video #movie-player{position:relative;padding-bottom:56.25%;padding-top:1.66666666666667em;height:0}
#multitab-video #movie-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#multitab-video #server-list{position:relative;background:#fafafa;display:block}
#multitab-video #server-list .server-item:before{content:attr(title);width:9.93333333333333em;display:inline-block;padding-left:0.933333333333333em}
.server-item{border-bottom:1px solid #c8c8cb}
#multitab-video #server-list a{color:#334;text-decoration:none;border:1px solid #443;padding:0.333333333333333em 0.666666666666667em;display:inline-block;margin:0.333333333333333em;box-sizing:border-box}
a:active{background-color:yellow}
</style>

3. Simpan themplate anda.

Cara Menggunakannya

1. Buat postingan baru, pilih Tab HTML.

2. Salin dan pastekan kode di bawah ini pada bagian tab HTML.

<div id='multitab-video'>
    <div id="movie-player">
        <iframe src="EMBED URL VIDEO" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
    </div>
    <div id="server-list">
        <div class="server-item" title="NAMA SERVER">
            <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
        </div>
        <div class="server-item" title="NAMA SERVER">
            <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
        </div>
    </div>

Sehingga menjadi seperti di bawah.

<div id='multitab-video'>
    <div id="movie-player">
        <iframe src="https://www.youtube.com/embed/FcoUvu0mGog" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" name="search_iframe" width="560" height="315" __idm_id__="621108225"></iframe>
    </div>
    <div id="server-list">
        <div class="server-item" title="NAMA SERVER">
            <a href="https://www.youtube.com/embed/wOOhE_00Gq0" target="search_iframe">SD 360p</a>
            <a href="https://www.youtube.com/embed/9_-AU2eQ6n4" target="search_iframe">SD 480p</a>
            <a href="https://drive.google.com/file/d/19XVGnXC-Yfd1cJoAZUbB2hIScL-ZHLjU/preview" target="search_iframe">HD 720p</a>
            <a href="https://dada.fuwaost.net/player/4e6554" target="search_iframe">HD 1080p</a>
        </div>
        <div class="server-item" title="NAMA SERVER">
            <a href="EMBED URL VIDEO" target="search_iframe">SD 360p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">SD 480p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 720p</a>
            <a href="EMBED URL VIDEO" target="search_iframe">HD 1080p</a>
        </div>
    </div>
</div>

Apabila anda ingin megambil video dari youtube, ambil dari embednya, lalu salin link embed nya seperti gambar di bawah ini.

Lihat Juga : Cara Agar Gambar Postingan Muncul Di Bawah Judul Artikel

Demikianlah, tutorial memasang multitab streaming seperti layarkaca 21. semoga bermanfaat untuk anda. bantu bagikan juga keteman anda.

Berbagi :