Sering kita jumpai di beberapa blog atau website yang membahas perihal video ibarat 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 ibarat lampu, kalau kita klik turn off light (matikan lampu) maka tampilan blog atau website akan gelap, sedangkan kalau 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 yakni tombol turn on off ini sangat membantu sekali saat 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 instruksi embednya.
Jika Anda ingin menambahkan fitur ini di blog Anda silahkan ikuti langkah-langkahnya di bawah ini.
Tombol turn on / turn off ini mempunyai fungsi ibarat lampu, kalau kita klik turn off light (matikan lampu) maka tampilan blog atau website akan gelap, sedangkan kalau 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 yakni tombol turn on off ini sangat membantu sekali saat 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 instruksi 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.1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
3. Kemudian simpan instruksi ini di atas instruksi
]]></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 instruksi ini di atas instruksi
</head><script type='text/j4vascript'> //<![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 instruksi ini di atas instruksi
</body><div id='settinganlampu'/>6. Terakhir klik Simpan tema
Di atas merupakan langkah instalasi instruksi scriptnya, kini kita lanjut ke tahap penggunaanya ibarat di bawah ini.
Cara Menerapkan atau Menggunakannya
1. Masuk ke bab postingan atau halaman yang mempunyai video2. Silahkan edit dan masuk ke bab HTML bukan bab compose
3. Lalu masukkan instruksi di bawah ini:
<div id="stopkontak"> <a class="lampunyala" href="j4vascript: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 instruksi embednya langsun dari video youtube Anda.
5. Jika video Anda bukan berasal dari YouTube maka kodenya ibarat ini:
<div id="stopkontak"> <a class="lampunyala" href="j4vascript: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 instruksi di atas tidak berjalan ibarat teladan atau demonya silahkan pasang jQuery ini di atas instruksi
</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 instruksi FontAwesome ini di atas instruksi
</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 http://www.caramanual.com
Buat lebih berguna, kongsi:
