Membuat Multi Tab Server Video Streaming Menyerupai 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 ibarat 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. Kaprikornus 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 instruksi </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 instruksi 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 instruksi 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, supaya artikel perihal 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