Turn On/Off Light in Blog Streaming

Turn On atau Turn Off Light sangat sering dijumpai pada blog/situs yang menyediakan layanan streaming salah satunya seperti streaming Anime dan Drama Korea.
Fungsi dari Turn On/Off Light ini untuk membuat penonton streaming lebih nyaman menontonnya dengan cara bagian sekeliling konten streaming itu dibuat agak digelapkan dan menonjolkan konten streamingnya. Cara membuatnya juga cukup mudah, untuk itu langsung saja kita coba cara berikut.

Apabila Menggunakan Blogger
1. Pertama, pergi ke Template > Edit HTML kemudian cari tag ]]>&lt/b:skin>
2. Lalu copy kode CSS dibawah ini dan pastekan diatas tag &lt/b:skin> tersebut
3. Simpan Template

Apabila Menggunakan WordPress
1. Pergi ke Dashboard > Tampilan > Penyunting edit pada style.css, kemudian copy kode CSS dibawah ini dan pastekan ke kolom penyuting style.css
2. Jangan lupa klik tombol Perbarui Berkas

Kode CSSnya sebagai berikut:

#btn-turnlight{cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;text-transform:uppercase;font-size:13px;background:#d9534f;color:#fff!important;font-weight:700;font-family:'Roboto','Open Sans',Segoe UI,sans-serif;display:inline-block;padding:10px;width:70px;border-radius:100px;z-index:250;position:relative;outline:0;border:0;text-align:right}
#btn-turnlight.active{background:#7ec169;text-align:left}
#btn-turnlight.active:before{right:5px;left:inherit}
#btn-turnlight:before{content:"";position:absolute;top:5px;left:5px;border:solid #fff;border-width:13px;z-index:100;border-radius:100px}
#turnofflight{background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;width:100%;height:100%;z-index:200}
#turnofflight.active{display:block!important}
.iframe-turnlight{z-index:250;position:relative}

Langkah selanjutnya kita pergi kebagian HTML, kita cari tag </body>. Salin kode JavaScript dan pastekan diatas tag </body> tersebut.

<div id='turnofflight' style='display:none;'>&lt/div>
<script type='text/javascript'>
 function turnlight(){
  turn = document.getElementById("btn-turnlight");
  turn.classList.toggle("active");
  document.getElementById("turnofflight").classList.toggle("active");
  "OFF" == turn.innerHTML ? turn.innerHTML = "ON" : turn.innerHTML = "OFF";
 }
</script>

Untuk pengaturan Vidio pada HTML, kalian tambahkan class="iframe-turnlight" pada kode Embed HTML. sebagai contoh berikut

<iframe src="https://www.youtube.com/embed/JGwWNGJdvx8" width="800px" height="480px" frameborder="0" allowfullscreen></iframe>

Menjadi

<iframe class="iframe-turnlight" src="https://www.youtube.com/embed/JGwWNGJdvx8" width="800px" height="480px" frameborder="0" allowfullscreen></iframe>

Selanjutnya untuk menampilkan Tombol Turn On/Off Light kalian bisa tambahkan kode dibawah ini tepat dibawah kode Embed HTML IFrame tadi.

<button id='btn-turnlight' onclick="turnlight()">OFF</button>

Hasil akhir dari penggabungan Embed HTML IFrame dengan Tombol Turn On/Off Light menjadi seperti ini

<iframe class="iframe-turnlight" src="https://www.youtube.com/embed/JGwWNGJdvx8" width="800px" height="480px" frameborder="0" allowfullscreen></iframe>
<button id='btn-turnlight' onclick="turnlight()">OFF</button>

Sumber CSS, HTML & JavaScript:
Usagilabs

Author : Ex10sionlabs

Belum sukses.

Share this

Related Posts