Cara Membuat Turn On / Off Lights Video di Blog

Sering kita jumpai di beberapa blog atau website yang membahas tentang video seperti anime, film barat, drama korea, video streaming dan sejenisnya yang menyediakan tombol turn on dan turn off.

Tombol turn on / turn off ini memiliki fungsi seperti lampu, jika kita klik turn off light (matikan lampu) maka tampilan blog atau website akan gelap, sedangkan jika kita klik turn on light (nyalakan lampu) maka tampilan blog akan kembali terang.

Nah, pada kesempatan kali ini saya akan membahas tutorial cara membuat tombol turn on dan turn on lights video di blog.

Untuk kalian yang di blognya menampilkan video mungkin akan membutuhkan ini, karena tombol turn on off ini sangat membantu sekali ketika sedang menonton video di blog Anda.

Penonton akan lebih fokus kepada video atau film yang sedang mereka tonton di blog Anda apabila mematikan lampu atau cahaya pada latar belakang blog Anda.

Mereka akan lebih senang dengan adanya fitur turn on light dan turn off light pada blog Anda.

Baca juga: Cara Live Streaming YouTube di PC dengan OBS Studio

Ini berfungsi untuk video yang berasal dari youtube, apabila video berasal dari sumber lain silahkan Anda ambil kode embednya.

Jika Anda ingin menambahkan fitur ini di blog Anda silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Efek Turn On / Off Lights Video di Blog

Silahkan lihat contohnya dengan mengklik tombol ini.

DEMO

1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
3. Kemudian simpan kode ini di atas kode ]]></b:skin> atau </style>

/* Turn On Off the Lights by Caramanual.com */
#stopkontak {
position:relative;
z-index:999;
}
.lampunyala {
float: right;
background: #328bdd;
display: inline-block;
color: #fff;
border-radius: 3px;
padding: 10px 15px;
}
.lampunyala:hover {
background-color: #1f72be;
}
.lampunyala:before{content: "\f0eb";
color:#000;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-right: 10px;
color:#ffff00;}
.lampumati {
background: #328bdd;
float: right;
position:relative;
display: inline-block;
color: #fff;
border-radius: 3px;
padding: 10px 15px;
}
.lampumati:hover {
background-color: #1f72be;
}
.lampumati:before{content: "\f0eb";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-right: 10px;
color:#000;}
#settinganlampu {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:997;
}

4. Lalu tambahkan kode ini di atas kode </head>

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

5. Kemudian tambahkan kode ini di atas kode </body>

<div id='settinganlampu'/>

6. Terakhir klik Simpan tema

Di atas merupakan langkah instalasi kode scriptnya, sekarang kita lanjut ke tahap penggunaanya seperti di bawah ini.

Cara Menerapkan atau Menggunakannya

1. Masuk ke bagian postingan atau halaman yang memiliki video
2. Silahkan edit dan masuk ke bagian HTML bukan bagian compose
3. Lalu masukkan kode di bawah ini:

<div id="stopkontak">
<a class="lampunyala" href="javascript:void(0);">Turn Off</a>
<div style="text-align:center">
<object data="//www.youtube.com/embed/y9bic_wp5ro" height="315" width="560"></object>
</div>
</div>

4. Silahkan ganti ID Video ini y9bic_wp5ro dengan milik Anda

Contoh ID Video:
https://www.youtube.com/watch?v=y9bic_wp5ro

Catatan:
Kode di atas tidak support video full screen, Anda bisa mengatur height dan width untuk ukuran videonya. Jika ingin video bisa dilihat full screen silahkan ambil kode embednya langsun dari video youtube Anda.

5. Jika video Anda bukan berasal dari YouTube maka kodenya seperti ini:

<div id="stopkontak">
<a class="lampunyala" href="javascript:void(0);">Turn Off</a>
<div style="text-align:center">
PASANG CODE EMBED VIDEO DISINI
</div>
</div>

6. Silahkan klik Publish atau Simpan

Catatan:
Apabila kode di atas tidak berjalan seperti contoh atau demonya silahkan pasang jQuery ini di atas kode </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Kemudian apabila icon lampu tidak muncul silahkan tambahkan kode FontAwesome ini di atas kode </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Itulah artikel mengenai cara membuat turn on / off lights video di blog, selamat mencoba. Semoga bermanfaat.

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini