Memasang Tab Pilihan Server dan Resolusi Untuk Video Streaming di Blog, widget blog streaming yang akan menampilkan beberapa pilihan server dan kualitas video yang berbeda.
Buat kalian yang membuat blog streaming tentunya harus membuat beberapa video cadangan di server yang berbeda untuk jaga-jaga apabila salah satu server sedang mengalami gangguan dan lainnya sebagainya, tentunya pengunjung bisa memilih server lainnya tanpa membuat pengunjung blog kalian pergi.
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.
Tutorial Membuat Multi Tab Server Video Streaming di Blog
1. Login ke akun blogger kalian2. Masuk ke menu Template → Edit HTML
3. Selanjutnya cari kode </head>
4. 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>
5. Save Template
Langkah selanjutnya memasang kode html untuk menampilkan video didalam postingan.
1. Masuk ke postingan yang ingin dipasang Multi Tab Video Streaming2. Pilih Tab mode HTML
3. 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 Video Kalian dan sesuaikan dengan kualitanya, kalo tidak ada bisa hapus
NAMA SERVER : Ganti dengan Nama Server tempat kalian upload video yang dipakai4. Selesai, Save dan lihat hasilnya
Cukup sekian, semoga artikel tentang Cara Membuat Video Streaming Multi Tab di Blog ini bermanfaat.
Membuat Multi Tab Video Streaming, Multiple Server Video Streaming Cara Membuat Video Streaming Multi Tab di Blog
