Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :

Membuat Multi Tab Video Streaming di Blog Responsive

/
/

Membuat multi tab video streaming di blog Responsive – Pada update kali ini bangnurung 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.

“BACA JUGA : Menyimpan Video Dari Youtube dengan Mudah”

Fitur ini sangatlah responsif digunakan di dalam blog kalian. Dengan menambahkan fitur ini pula, pengunjung bisa menyesuaikan mana kualitas video yang akan di tonton. Misalnya saja jika kondisi sinyal sedang down. Pengunjung bisa membuka video dengan memilih kualitas rendah agar tidak terjadi bufering ( kebanyakan bilang ngelag / ngeleg ).

Nah.. dengan adanya fitur ini, pengguna bisa menyesuaikan dengan lebih nyaman. Saya sendiri pun juga begitu. Saat nonton video streaming kadang terjadi lag. Sayapun menyesuaikan kualitas videonya agar tidak lag dan menontonnya pun semakin nyaman.

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
Membuat Multi Tab Video Streaming

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

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.

“BACA JUGA : Cara Menyimpan Video Dari Instagram ( Lengkap !! )

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

  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This div height required for enabling the sticky sidebar