Membuat Multi Tab Video Streaming di Blog Responsive

Membuat multi tab video streaming di blog Responsive – Pada update kali ini moodku ingin berbagi tentang artikel cara membuat multi tab video streaming. Untuk penggunaan trik ini akan lebih pas dan cocok bila sobat terapkan di blog movie atau streaming.

Selain untuk membuat blog anda lebih SEO, tentu akan mempermudah pengunjung untuk melihat streaming di blog tersebut. Selain itu, blog anda juga akan lebih terlihat profesional dengan fitur ini.

Apakah sobat pernah melihat film di layar kaca ? Nah tampilan yang akan di hasilkan kurang lebih mirip-mirip seperti itu. Untuk contoh tampilannya lihat gambar di bawah ini ya. Kurang lebih seperti itu.

Membuat Multi Tab Video Streaming di Blog Responsive
Membuat Multi Tab Video Streaming di Blog Responsive

Nah untuk tutorialnya cukuplah mudah, sobat bisa simak dan ikuti langkah-langkah di bawah ini.

Membuat Multi Tab Video Streaming di Blog Responsive

  • Langkah pertama sobat Login dulu ke akun Blogger kalian.
  • Masuk ke menu Template >> Edit HTML.
  • Langkah selanjutnya cari kode </head>. Atau sobat bisa menggunakan Ctrl + F lalu ketik </head>.
  • Setelah ketemu, masukkan CSS di bawah ini tepat diatasnya.
<style type="text/css">
/*CSS Multi Tab Video by MOODKU*/
#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 / Simpan Template.

Jika sobat telah melakukan langkah diatas dengan benar, langkah selanjutnya adalah tinggal memasang kode htmlnya untuk bisa menampilkan video di dalam postingan.

Berikut caranya

  • Sobat masuk ke postingan yang ingin di pasang multi tab video streaming.
  • Pilih tab mode HTLM jangan Compose.
  • Langkah berikutnya copy dan paste kode di bawah 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 jangan lupa sesuaikan dengan kualitasnya, jika tidak bisa sobat hapus saja.
  • NAMA SERVER ganti dengan nama server upload video yang kalian gunakan.
  • Jika sidah selesai, klik Save dan sobat bisa lihat hasilnya.

Demikian tadi tutorial cara membuat multi tab server video streaming. Semoga artikel ini dapat bermanfaat ya guys.. Jika ada masukan dan ide artikel bisa sobat cantumkan pada kolom komentar.

Sampai berjumpa di artikel selanjutnya ya.

Selamat mencoba!!

Sumber script : mastamvan

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *