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
CSS
<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
Selanjutnya baca di sini
