Cara Membuat Multi Tab Video Streaming Seperti Layar Kaca 21

Sumber foto: m.facebook.com


Halo sobat blogger - pada kesempatan kali ini saya ingin berbagi tips Cara Membuat Multi Tab Video Streaming Seperti Layar Kaca 21.

Multi Tab Video Streaming ini berguna untuk menambah pilihan server yang ingin di play semakin banyak, hal ini dilakukan untuk menjaga-jaga ketika suatu saat salah satu server streaming terdapat error makan masih terdapat pilihan server lainya, karena memiliki banyak kolom server yang bisa di gunakan.

Multi Tab Video Streaming ini tentunya sudah responsif dan Video Streaming akan di play saat tombol play di klik, jadi tidak akan membebankan kepada loading blog.


Multi Tab ini dibuat hanya menggunakan kode CSS & Html tanpa Javascript & Jquery dengan begitu tidak akan menggangu kecepatan loading blog kalian.

Untuk tutorial cara membuatnya kalian bisa ikuti step by step nya dibawah ini, cukup mudah hanya tinggal copy kode & done.

Cara Membuat Multi Tab Video Streaming Responsif Untuk Blogspot


  • Pertama silahkan login ke akun blogger kalian
  • Masuk ke menu Template ==> Edit HTML
  • Kemudian cari kode </head> letakan kode dibawah ini tepat di atasnya kode </head>

<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
Nah setelah memasang kode CSS di atas selanjutnya kita pasang kode Html nya, lakukan pemasangan kode html ini setiap postingan kalian bertujuan agar kolom Multi Tab Video Streaming muncul pada setiap postingan artikel.
  • Pada penulisan artikel silahkan kalian rubah terlebih dulu mode penulisan menjadi HTML 
  • Kemudian masukkan kode Html berikut

 <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>

  • Silahkan kalian ganti EMBED URL VIDEO dengan link Video/film kalian.
  • Ganti juga NAMA SERVER dengan nama server yang kalian pakai.
  • Klik simpan, dan lihat hasilnya.
Oke mungkin hanya segitu saja Cara Membuat Multi Tab Video Streaming Seperti Layar Kaca 21, Semoga bermanfaat untuk kalian.

Sumber tutorial: mastamvan.blogspot.com

Berlangganan update artikel terbaru via email:

Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Membuat Multi Tab Video Streaming Seperti Layar Kaca 21"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel