Cara Membuat Turn On/Off Lights Video di Blog

Prodeku - Mungkin anda pernah membuka sebuah website dengan konten berupa video, baik itu Film ataupun Anime yang dapat di tonton secara langsung (streaming). Saat anda akan melakukan streaming pada website tersebut, biasanya anda akan dijumpai sebuah tombol yang diberi nama "Turn Off the Lights" atau "Turn Off" saja.

Apa sih fungsi tombol tersebut?

Fungsi dari tombol "Turn Off the Lights" yaitu apabila anda mengklik tombol tersebut, nantinya seluruh background website tersebut akan berubah menjadi gelap kecuali pada video yang sedang anda tonton. Jadi, mata anda dapat lebih terfokus pada video yang sedang di putar karena hanya cahaya di video yang terlihat terang.

Lalu, apa yang terjadi pada tombol tadi?

Setelah background website menjadi gelap, tulisan pada tombol tersebut akan berubah menjadi "Turn On the Lights" yang artinya hidupkan cahaya. Apabila tombol tersebut anda tekan lagi, maka background akan kembali seperti semula.

Bagaimana, menarik bukan? bila anda ingin mencobanya, silahkan ikuti tutorial berikut ini.

Tutorial Turn On/Off Light Video

Buka akun blogger
Pilih menu Template > Edit HTML

Cari kode </head>, tambahkan kode berikut ini sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#plo").css("height", $(document).height()).hide();
$(".pls").click(function(){
$("#plo").toggle();
if ($("#plo").is(":hidden"))
$(this).html("Turn Off").removeClass("pto");
else
$(this).html("Turn On").addClass("pto");
});
});
//]]>
</script>

Cari kode ]]></b:skin>, tambahkan kode berikut ini sebelum kode ]]><b:skin>

/* Turn On Off the Lights by Prodeku.web.id */
#plv {
position:relative;
z-index:999;
}
.pls {
z-index:998;
float: right;
background: #dd4b39;
display: inline-block;
color: #fff;
border-radius: 3px;
margin: 3px;
padding: 5px 8px;
}
.pls:hover {
color: #fff;
background-color: #C74433;
}
.pto {
float: right;
position:relative;
background: #C74433;
display: inline-block;
color: #fff;
border-radius: 3px;
margin: 3px;
padding: 5px 8px;
}
.pto:hover {
color: #fff;
background-color: #dd4b39;
}
#plo {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:997;
}

Cari kode </body>, salin kode berikut ini sebelum kode </body>
```
<div id='plo'/>
```
Simpan Template.

Apabila langkah-langkah diatas sudah dilakukan semua, sekarang anda tinggal menerapkannya pada postingan video di blogger anda. Caranya sangat mudah, silahkan salin kode berikut ini pada postingan anda.

<a class="pls" href="javascript:void(0);">Turn Off</a>
<div id="plv">
--- TAMBAHKAN VIDEO DISINI ---
</div>

Keterangan: Pada tulisan yang telah saya beri warna pink, silahkan anda ganti dengan embed code dari video yang ingin anda tampilkan.

Apabila ada yang perlu ditanyakan, silahkan bertanya pada kolom komentar dibawah ini.

Demiikian artikel tentang cara membuat tombol turn on/off lights video yang dapat digunakan pada blog dengan konten film atapun anime di blogger milik anda. Selamat mencoba ...