Cara Menciptakan Turn On / Off Lights Video Di Blog

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

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

Nah, pada kesempatan kali ini aku 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, alasannya yaitu tombol turn on off ini sangat membantu sekali dikala 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 bahagia 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 arahan 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 misalnya dengan mengklik tombol ini.

DEMO

1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
3. Kemudian simpan arahan ini di atas arahan ]]></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 arahan ini di atas arahan </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 arahan ini di atas arahan </body>

<div id='settinganlampu'/>

6. Terakhir klik Simpan tema

Di atas merupakan langkah instalasi arahan scriptnya, kini kita lanjut ke tahap penggunaanya menyerupai di bawah ini.

Cara Menerapkan atau Menggunakannya

1. Masuk ke bab postingan atau halaman yang mempunyai video
2. Silahkan edit dan masuk ke bab HTML bukan bab compose
3. Lalu masukkan arahan 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 dapat mengatur height dan width untuk ukuran videonya. Jika ingin video dapat dilihat full screen silahkan ambil arahan embednya langsun dari video youtube Anda.

5. Jika video Anda bukan berasal dari YouTube maka kodenya menyerupai 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 arahan di atas tidak berjalan menyerupai referensi atau demonya silahkan pasang jQuery ini di atas arahan </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 arahan FontAwesome ini di atas arahan </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 menciptakan turn on / off lights video di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/

Related Posts