Minggu, 15 Juli 2018

Cara Membuat Multi Video Streaming (Anime/Film) Repsonsive di Blogspot

Cara Membuat Video Streaming di Blogspot - Pada postingan kali ini saya akan membagikan cara menampilkan beberapa pilihan server yang berbeda seperti web blog Dunia21.net di blogger.

Cara membuat mutli server streaming di blogspot

Buat anda yang ingin membuat blog khusus video baik anime maupun film tetapi tidak memiliki hosting, anda bisa menggunakan script multi tab streaming ini di hosting blogger.

Tentunya script ini bisa memuat lebih dari satu server yang berbeda-beda dalam waktu bersamaan, hal ini sangat menguntungkan jika ada server yang maintenance, pengunjung bisa memilih server streaming lain untuk ditonton.

Nah sebelum anda membuat web streaming sendiri, anda bisa melihat demo nya terlebih dahulu.
DEMO

Cara Membuat Multi Tab Video Streaming di Blogspot

Untuk tutorial memasang multi tab streamingnya anda bisa mengikuti langkah-langkahnya sebagai berikut.

1. Pertama masuk terlebih dahulu ke blogger
2. Masuk ke menu TEMPLATE > EDIT HTML
3. Cari kode
4. Selanjutnya masukan kode dibawah ini tepat diatas

/* Streaming List */
#streaming-box{border:solid 1px #222; display:block; overflow:hidden; margin:20px 0}
#streaming-box h3{font-size: 16px; text-align:center; padding: 5px; color:#fff; background:#222}
.streaming-title{padding:5px; overflow:hidden; width:648px; margin-left:auto; margin-right:auto}
.streaming-title a{display:block; width:560px; float:none; margin-bottom:5px; position:relative; border: solid 1px #222; text-align:center; color:#222; margin-left:5px; margin-right:5px}
.streaming-title a:hover{background:#222;color:#fff}
#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}
@media screen and (max-width:1073px){.main-wrapper{width:100%;}.streaming-title{width:100%;margin-left:0;margin-right:0}.streaming-title a{width:auto;float:none;margin-bottom:5px}}
5. Simpan Template

Sekarang anda tinggal masukan kode htmlnya untuk menampilkan video di blog anda.

1. Masuk Ke Postingan yang ingin anda pasang streaming video
2. Pilih mode HTML, disebelah kanan COMPOSE
3. Salin dan masukan kode dibawah ini.

<div id="multitab-video">
<div id="movie-player">
<iframe allowfullscreen="" frameborder="0" mozallowfullscreen="" name="search_iframe" src="embed-link-utama" webkitallowfullscreen=""></iframe></div>
</div>
<div id="streaming-box">
<h3>
STREAMING LIST</h3>
<div class="streaming-title">
<a href="embed-link-utama" target="search_iframe">Server utama</a> <a href="embed-link" target="search_iframe">Server dua</a> <a href="embed-link" target="search_iframe">Server tiga</a> </div>
</div>


Server : Ganti dengan nama server yang anda gunakan
Embed Link : Ganti dengan link embed video yang anda gunakan

4. Save dan lihat hasilnya

Demikian yang dapat saya sampaikan pada artikel ini tentang cara membuat multi server video streaming responsive di blogspot. Semoga bermanfaat!!!

Lorem ipsum is simply dummy text of the printing and typesetting industry.


EmoticonEmoticon