Membuat Multi Tab Server Video Streaming Ibarat 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 menyerupai pada wrbsite layar kaca

Buat kalin yang menciptakan blog moveie tentunya harus menciptakan beberapa video / Film cadangan di server yang berbeda untuk jaga-jaga apabila di server yang satunya ada problem / sedang maintenance.
Sebelumnya saya juga sudah pernah share artikel yang sama tapi pada tutorial sebelumnya video yang di pasang akan diload secara bersamaan dikala blog / halaman di buka.

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

Nah untuk tutorialnya kalian dapat ikuti langkah demi langkah dibawah ini

Membuat Multi Tab Server Video Streaming Responsive di Blog

• Login ke akun blogger kalian

• Masuk ke hidangan Template → Edit HTML

• Selanjutnya cari arahan </head>

• Setelah ketemu, masukan CSS dibawah ini sempurna diatasnya

 <style type="text/css"> /*CSS Multi Tab Video by Blog */ #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 arahan 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 arahan 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, agar artikel ihwal 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