logo blog

Membuat Multi Tab Server Video Streaming Seperti Layarkaca21

Membuat Multi Tab Server Video Streaming Seperti 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 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 TemplateEdit HTML
  • Selanjutnya cari kode </head>
  • 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>
    
  • Save Template

Sekarang tinggal memasang kode 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 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 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, semoga artikel tentang 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

Share this:

Berlangganan via email

Agan Sedang Membaca Artikel : Membuat Multi Tab Server Video Streaming Seperti Layarkaca21. Silahkan masukan email anda dibawah ini! dan nanti akan otomatis mendapatkan kiriman artikel terbaru dari Blog Mas Tamvan. Terimakasih.

Kumpulan Tips Trik Blogger

Blog Mas Tamvan

Terima Kasih Sudah Membaca Artikel Tentang : Membuat Multi Tab Server Video Streaming Seperti Layarkaca21. Jika Ada Yang Mau Request Tutorial Silahkan Beri Tahu Saya Di Kolom Komentar :)

26 comments

sanin sardi obreg

Lapor om ko video ga muncul si ? padahal semua yang tulisan EMBEDE URL VIDEO udah di ganti link video youyube tetep ga mucul. trus kalo gadi isi malah tampil blog ane sendiri bukan video

Mas Tamvan

Kalo dari youtube pakenya yang embed gan, jangan copy langsung dari urlnya..

Cek Demo ↓
https://jsfiddle.net/vd5985po/1/embedded/result

Mida Max

Keren banget mas, saya ijin bookmark ya untuk saya gunakan suatu saat nanti

Egi Agan

Cara membuat seperti ini gimana mas teja 1https://lh3.googleusercontent.com/-8SL0ZOexfns/WX_03MnaegI/AAAAAAAAAd8/mMlgLz6hmDYzvpqz8OXq8jyxtJQjKL1JgCLcBGAs/h101/Untitled.png

Egi Agan

cara membuat komentar seperti ini gimana mas1https://lh3.googleusercontent.com/-F9pxdyF9g_A/WX_1VR8tFBI/AAAAAAAAAeA/aj4ar4M496IDK7eX3pXolxo7TnewRrqjgCLcBGAs/h36/dd.png

Mas Tamvan

Udah ada artikelnya, coba cari Komentar Blog Show Hide

Mas Tamvan

Pake CSS background-image gan. Bikin shadownya, upload imagenya terus Taro di div yang di inginkan..

Manchester City Supporter Indonesia

permisi mau tanya, gimana caranya untuk menyesuaikan iframe yg ditampilkan?

ALPAJ 23

mabtab min...
ue cari cari tutor tentang kek gini gx susah...
tanks min infonya (y)

Mas Tamvan

Menyesuaikan gimana?
Itu link iframenya tinggal taro aja di button yg udah ada / tambah button baru..

Kak Boy

Kalau di wordpress pake plugin apa?

contoh thunder

Keren blognya bersih dari popup

foresthe

saya mau tanya nih gan, ini kan tentang video ya. kalau artikel masukin lagu kaya situs2 download lagu itu gimana ya ? lagunya bisa langsung di putar di blog dan kalau yang pake idm bisa download langsung sewaktu lagunya di putar. terimakasih gan.

Wong Ndeso

Waaahhh keren.. nemu juga ahirnya.. makasih

SECREAT FILM

gan gimana kalau vidionya gak di youtube ?
gimana kalau vidionya disimpen di google drive atau mediafire ??

saya udah semet coba sih tapi gak mau kalau selain vidio yang di youtube ? mohon bantuannya gan

Mas Tamvan

Iya gan bisa, itu yg di demo saya ambil dari Google Drive.

mizipediacom

bole juga ni di coba, thanks gan, salam kenal.

Agus Mozan

Saya ambil di video di google drive ..knp ga nongol yah videonya

Mas Tamvan

Apa pemasangannya sudah benar?
Demo di atas saya gunakan embed dari google drive n normal.

Josie Kartika

mas yang paling tamvan bisa request untuk tambahan tombol layar redup?

Syahrull Wahyudi

mantap jangan lupa mampir ya bro www.indofilm. me

Sakti

CARAB NGUBAH TINGGI SAMA LEBAR NYA GIMANA

Hosnadai

cara ganti biar hasil download sama kaya judul video gimana gan?
https://drive.google.com/open?id=1b-BKu09DdwzVk0-ZNTditpdcMyykbNLi

Dika Ramadhan

tolong di buatkan videonya biar jelas

Dika Ramadhan

google drive menolak untuk bersambung (bacaan nya)

Saya menunggu komentar anda..

Kalo ada yang error mohon kasih tau admin, supaya bisa secepatnya untuk diperbaiki..

Komentar dengan link promo akan masuk spam.

Tambahkan Spasi Setelah Memasukan Kode Emoticon..
Gunakan kode <i rel="image">URL GAMBAR DI SINI</i> untuk menyertakan gambar di komentar.Show Konversi Kode Hide Konversi Kode Show EmoticonShow Emoticon Hide Emoticon