Cara Menciptakan Streaming Post V2

- Multiple Stream Video ini hampir sama menyerupai post sebelumnya adalah "Cara menciptakan Post Streaming Video", yang membedakannya post kali ini memuat lebih banyak video sesuai yang di inginkan.

Artikel ini aku buat menurut request, Cara Membuat Streaming Post v2 aku buat hanya memakai iframe sebagai wadah videonya, untuk versi HTML5 next aku akan buat. OK kita mulai saja tutorial kali ini & demo kalian dapat cek tombol dibawah ini:

Demo

Cara Membuat Streaming Post v2

1. Buka Blogger > Tema > Edit HTML
2. Salin dan simpan CSS berikut ini ke dalam <style> ... </style>

/* CSS IFRAME Multiple Stream Video    ================================  */ #--title-anime{display:block;text-align:center;padding:10px;font-size:14px;font-weight:600;background:#212121;color:#fff;border-bottom:2px solid #E91E63} #--iframe-video{display:block;overflow:hidden;clear:both;text-align:center;background:#212121} #--iframe-video a{display:inline-block;padding:7px 10px;font-size:14px;color:#FFF;background:#444;cursor:pointer;margin:5px;border-top-left-radius:5px;border-top-right-radius:5px;font-weight:600;border-bottom:2px solid #E91E63;box-shadow:rgba(0,0,0,.12) 0 1px 3px,rgba(0,0,0,.22) 0 1px 2px;transition:all .2s} #--iframe-video a:hover{background:#333;text-decoration:none;transition:all .2s} #--iframe-video.--tab-eps:before{content:'Episode';display:block;color:#FFF;padding:10px;font-size:15px;background:#333;border-bottom:1px solid #121212}



3. Kemudian, salin & letakkan javascript berikut di atas </head>

<b:if cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'> <script type='text/javascript'>//<![CDATA[ // Script Multiple Embed video - Don't Edit $(document).ready(function(){(function(){var g=anime.length;var e=$(".--tab-eps");for(var h=0;h<g;h++){e.append("<a class='ganti-eps' data-id='"+h+"' data-eps='Episode "+(h+1)+"'>"+(h+1)+"</a>")}var f=$(".--show-video");$(".ganti-eps").click(function(){f.html('<div class="--responsive"><iframe src="'+anime[parseInt($(this).data("id"))]+'" allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="360"  ></iframe></div>');$("#--title-anime").text($(this).data("eps"))})}())}); //]]></script> </b:if>



4. Jika sudah save tema
5. Langkah terakhir adalah buat post
6. Buat lah post memakai Tag HTML & Javascript berikut, jangan lupa edit bab yang sudah di tandai.

<span id='--title-anime'>Episode 1</span> <div class='--show-video'>    <iframe        allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width='100%' height='360'        src="LINK EMBED VIDEO Episode 1">    </iframe> </div> <div id="--iframe-video" class="tabs --tab-eps">    <!-- tombol akan muncul disini --> </div>  <script> // LINK EMBED VIDEO var anime = [  "LINK VIDEO", // Episode 1  "LINK VIDEO", // Episode 2  "LINK VIDEO", // Episode 3  "LINK VIDEO", // Episode 4  "LINK VIDEO", // Episode 5  "LINK VIDEO", // Episode 6  "LINK VIDEO", // Episode 7  "LINK VIDEO", // Episode 8  "LINK VIDEO", // Episode 9  "LINK VIDEO", // Episode 10  "LINK VIDEO", // Episode 11  "LINK VIDEO", // Episode 12 ] </script>



7. Jika lebih dari 12 episode maka kalian tinggal menambahkan javascript nya menyerupai berikut ini

<span id='--title-anime'>Episode 1</span> <div class='--show-video'>    <iframe        allowfullscreen="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width='100%' height='360'        src="LINK EMBED VIDEO Episode 1">    </iframe> </div> <div id="--iframe-video" class="tabs --tab-eps">    <!-- tombol akan muncul disini --> </div>  <script> // LINK EMBED VIDEO var anime = [  "LINK VIDEO", // Episode 1  "LINK VIDEO", // Episode 2  "LINK VIDEO", // Episode 3  "LINK VIDEO", // Episode 4  "LINK VIDEO", // Episode 5  "LINK VIDEO", // Episode 6  "LINK VIDEO", // Episode 7  "LINK VIDEO", // Episode 8  "LINK VIDEO", // Episode 9  "LINK VIDEO", // Episode 10  "LINK VIDEO", // Episode 11  "LINK VIDEO", // Episode 12  "LINK VIDEO", // Episode 13  "LINK VIDEO", // Episode 14 ] </script>

Jika ada pertanyaan atau kurang paham silahkan beri komentar kalian dibawah post ini. Sekian artikel untuk kali ini, biar bermanfaat & hingga jumpa di tutorial berikut nya.

Bagikan Artikel ini