Cara Membuat Postingan Video Multi Tab Seperti Layarkaca21

komputerdia.com - Apakah kalian berniat untuk membuat blog atau situs video streaming ? Jika memang benar, mungkin sebagian besar dari kalian akan mencari situs yang akan kalian jadikan sebagai bahan referensi. Di indonesia sendiri, situs video streaming yang sangat populer adalah layarkaca21 dan sinema indo.

Mungkin setelah kalian melihat situs tersebut, terbesit keinginan untuk bisa membuat postingan video seperti pada situs populer tersebut. Namun apakah format multi tab server seperti di layarkaca21 bisa kita terapkan di blogger atau blogspot? Jawaban pastinya tentu saja bisa, namun sebelumnya kalian juga harus memasang script CSS pada template kalian.

Diartikel kali ini, saya akan mencoba menjelaskan bagaimana cara membuat postingan video multi tab server seperti di situs layarkaca21. Sebelum melangkah lebih jauh, bagi kalian yang belum sempat mengulas artikel sebelumnya, kalian dapat membacanya pada list artikel dibawah ini.

Baca Juga :

• 16 Cara Rahasia Meningkatkan Pengunjung / Visitor Blog Dengan Cepat dan Stabil .
• Mengenal Optimasi Seo On-Page dan Seo Off-Page Didunia Blogging .
• Cara Daftar Webmaster Tools dan Mengkonfigurasi Blog Pada Webmaster Tools .
• 13 Cara Membuat Artikel Seo Friendly Agar Bisa Bersaing Di Mesin Pencari .

Cara Membuat Multi Tab Seperti Layarkaca21

• Langkah pertama silahkan kalian login ke akun blogger
• Pilih menu template atau theme kemudian tekan tombol edit html .
• Setelah kalian berada dihalaman edit html, silahkan kalian cari kode </head> dengan cara menekan tombol CTRL + F di keyboard kalian dan ketikan perintah </head> kemudian enter .
• Setelah menemukan kode tersebut, silahkan kalian copy kode dibawah ini dan tempelkan kode tersebut diatas 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>

• Setelah itu silahkan kalian tekan tombol simpan untuk menyimpan setelan tersebut.
• Langkah selanjutnya silahkan kalian buat postingan baru dengan menekan tombol entri baru .
• Setelah berada dihalaman posting, kalian pindahkan mode compose ke mode html, dan tempelkan kode dibawah ini di bagian konten mode html .

<div id='multitab-video'>
    <div id="movie-player">
        <iframe src="https://www.youtube.com/embed/ZwzY1o_hB5Y" frameborder="0" webkitAllowFullScreen="" mozallowfullscreen="" allowFullScreen="" name="search_iframe"></iframe>
    </div>
    <div id="server-list">
        <div class="server-item" title="YOUTUBE">
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">SD 360p</a>
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">SD 480p</a>
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">HD 720p</a>
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">HD 1080p</a>
        </div>
        <div class="server-item" title="GOOGLE DRIVE">
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">SD 360p</a>
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">SD 480p</a>
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">HD 720p</a>
            <a href="https://www.youtube.com/embed/ZwzY1o_hB5Y" target="search_iframe">HD 1080p</a>
        </div>
    </div>
</div>

• Kode berwarna biru silahkan kalian ganti dengan nama server yang kalian gunakan untuk meng-Upload video kalian
• Kode berwarna merah silahkan kalian ganti dengan alamat embed url video kalian, perlu diingat bahwa yang di copy bukan alamat link di address bar, tetapi alamat link embed
• Jika kalian menggunakan youtube sebagai servernya, maka kalian dapat mengambil embed url-nya seperti pada gambar dibawah ini

• Selesai, semoga bermanfaat untuk kalian semuanya

Sumber Referensi : https://mastamvan.blogspot.co.id/

Share this post