Membuat Multi Tab Server Video Streaming Seperti Layarkaca21

Tutorial Cara Membuat Multi tab Video Streaming Click to Load Iframe

Memasang Tab Pilihan Server Untuk Video Streaming di Blog, kali ini saya akan membagikan lagi sebuah widget untuk blog movie yang akan menampilkan beberapa pilihan server dan kualitas video yang berbeda seperti pada wrbsite layar kaca

Buat kalin yang membuat blog moveie tentunya harus membuat beberapa video / Film cadangan di server yang berbeda untuk jaga-jaga apabila di server yang satunya ada masalah / sedang maintenance.


Sebelumnya saya juga sudah pernah share artikel yang sama tapi pada tutorial sebelumnya video yang di pasang akan diload secara bersamaan ketika blog / halaman di buka.

Nah pada widget Responsive Multi Tab Video Streaming ini video / iframe yang ada didalamnya akan di load ketika tombol button di klik. Jadi tidak akan memberatkan loading blog kalian..


Demo Multi Tab Video Streaming

Nah untuk tutorialnya kalian bisa ikuti langkah demi langkah dibawah ini

Membuat Multi Tab Server Video Streaming Responsive di Blog

• Login ke akun blogger kalian

• Masuk ke menu Template ? Edit HTML

• Selanjutnya cari kode </head>

• Setelah ketemu, masukan CSS dibawah ini tepat diatasnya



<style type="text/css">
/*CSS Multi Tab Video by Blog Mas Tamvan*/
#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>

• Save Template

Sekarang tinggal memasang kode htmlnya untuk menampilkan videonya didalam postingan. Masuk ke postingan yang ingin dipasany Multi Tab Video Streaminynya

• Pilih Tab mode HTML jangan COMPOSE

• Selanjuntya copy dan masukan kode HTML dibawah ini



<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>
</div>







• EMBED URL VIDEO : Ganti Dengan Link Film / Video Kalian dan sesuaikan dengan kualitanya, kalo tidak ada hapus aja.


• NAMA SERVER : Ganti dengan Nama Server upload video yang kalian pakai

• Selesai, Save dan lihat hasilnya

Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Multi Tab Server Video Streaming Seperti Layar Kaca ini bermanfaat, apabila ada yang tidak dimengerti silahkan bertanya dikolom komentar. Membuat Multi Tab Video Streaming, Multiple Server Video Streaming