Membuat Multi Tab Server Video Streaming Ibarat Layarkaca21

multi tab server video streaming

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 saat blog / halaman di buka.

Nah pada widget Responsive Multi Tab Video Streaming ini video / iframe yang ada didalamnya akan di load saat 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 TemplateEdit 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, biar 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


Sumber https://mastamvan.blogspot.com/

0 Response to "Membuat Multi Tab Server Video Streaming Ibarat Layarkaca21"

Post a Comment

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel