Membuat Multi Tab Server Video Streaming Responsive di Blog

 

Membuat Multi Tab Server Video Streaming Responsive di Blog

• Login ke akun blogger kalian

• Masuk ke menu Template → Edit HTML

• Selanjutnya cari kode </head>

• Setelah ketemu, masukan CSS dibawah ini tepat diatasnya

<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

Sekarang tinggal memasang kode htmlnya untuk menampilkan videonya didalam postingan. Masuk ke postingan yang ingin dipasany Multi Tab Video Streaminynya

• Pilih Tab mode HTML jangan COMPOSE

• Selanjuntya copy dan masukan kode HTML dibawah 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 sesuaikan dengan kualitanya, kalo tidak ada hapus aja.
• NAMA SERVER : Ganti dengan Nama Server upload video yang kalian pakai

• Selesai, Save dan lihat hasilnya

ads here

ads here

ads here

ads here

Related Posts