Membuat Tab View Mirror Onclick Untuk Streaming Video

Oleh Unknown

Tuesday, November 4, 2014

Bagikan :

Tweet

Mungkin kalian sering menemukan beberapa web atau blog dengan content fokus pada streaming video dengan mirror tab dari beberapa server penampung video seperti pada web streaming Anime atau Movie yang tujuanya memberikan pilihan bagi pengunjung ingin menonton dari server yang diinginkan atau sebagai antisipasi Broken Link.

Setelah kemarin saya membagikan tutorial cara membuat image gride label ala fansub atau web streaming anime kali ini saya akan membagikan bagaimana caranya membuat Tab View Mirror Onclick Untuk Streaming Video, dengan dasar tab view dengan onclick event ala Kompi Ajaib

Untuk lebih jelasnya kalian dapat melihat demo dibawah

DEMO

Tertarik untuk membuatnya?

Pertama pasang kode HTML di bawah ini ke postingan blog pada mode HTML bukan pada COMPOSE

<div id="Button1" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';">
JUDUL I</div>
<div id="Button2" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';">
JUDUL II</div>
<div id="Button3" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';">
JUDUL III</div>
<div id="Content1">
KODE IFRAME VIDEO EMBED I </div>
<div id="Content2">
KODE IFRAME VIDEO EMBED II </div>
<div id="Content3">
KODE IFRAME VIDEO EMBED III </div> 

Selanjutnya copy Kode CSS dibawah ini dan pastekan tepat diatas code ]]></b:skin> 

 #Button1,#Button2{margin-top:-30px;padding:0;text-align:center;float:left;border:1px solid #aaa;background:#00f9ff;cursor:pointer;width:32%;height:25px;line-height:25px}
#Button2{margin-left:34%}
#Button3{margin-top:-30px;margin-right:-2px;padding:0;text-align:center;float:right;border:1px solid #aaa;background:#00f9ff;cursor:pointer;width:32%;height:25px;line-height:25px}
#Content1{display:block;width:100%;height:400px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:center;background:#000; overflow: auto;}
#Content2,#Content3{display:none;width:100%;height:400px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:center;background:#000; overflow: auto;}
#Content1 p,#Content2 p,#Content3 p{margin:10px} 

Setting lebar untuk widget ini otomatis mengikuti lebar dari post blog, jadi untuk pengaturan kalian hanya perlu merubah bagian height sesuai dengan tinggi media yang akan kalian masukkan pada blog kalian.

nah seperti itulah cara pemasanganya cukup simple bukan ^_^

Tag : Widget