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.
1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
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.1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
3. Kemudian simpan arahan ini di atas arahan
4. Lalu tambahkan arahan ini di atas arahan
5. Kemudian tambahkan arahan ini di atas arahan
6. Terakhir klik Simpan tema
Di atas merupakan langkah instalasi arahan scriptnya, kini kita lanjut ke tahap penggunaanya menyerupai di bawah ini.
2. Silahkan edit dan masuk ke bab HTML bukan bab compose
3. Lalu masukkan arahan di bawah ini:
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:
6. Silahkan klik Publish atau Simpan
Catatan:
Apabila arahan di atas tidak berjalan menyerupai referensi atau demonya silahkan pasang jQuery ini di atas arahan
Kemudian apabila icon lampu tidak muncul silahkan tambahkan arahan FontAwesome ini di atas arahan
Itulah artikel mengenai cara menciptakan turn on / off lights video di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/
]]></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 video2. 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/
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:
6. Silahkan klik Publish atau Simpan
Catatan:
Apabila arahan di atas tidak berjalan menyerupai referensi atau demonya silahkan pasang jQuery ini di atas arahan
Kemudian apabila icon lampu tidak muncul silahkan tambahkan arahan FontAwesome ini di atas arahan
Itulah artikel mengenai cara menciptakan turn on / off lights video di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/
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
- Tips Mengatasi “ Error 0X00000709: Can’T Set Default Printer” Postingan kali ini aku akan membahas perihal kode error pada printer “Error 0x00000709: Can’t Set Default Printer”. Tips dan Trik Komputer - ...
- Cara Menciptakan Tabel Harga Paket Di BlogKali ini saya kembali menulis sebuah tutorial menciptakan tabel harga di blog. Beberapa bulan kemudian saya pernah menciptakan sebuah tabel harga re ...
- Cara Mengatasi Wifi Limited Access Pada Windows 7,8, Dan 10 Tips dan Trik Komputer - Cara Mengatasi Wifi Limited Access pada Windows 7,8, dan 10 sudah kita ketahui kini kebanyakan komputer kini sudah mema ...
- Cara Mematikan Klik Kanan Pada Gambar Di BlogBagi kalian yang bekerja sebagai Graphic Designer kemudian sering mengupload atau mengunggah gambarnya ke website atau blog, maka Anda perlu menonakt ...
- Cara Penulisan Abjad Besar Atau Kecil Pada Judul Artikel Yang Benar Dalam penulisan sebuah judul kita harus memperhatikan penulisan aksara besar (kapital) dan aksara kecil, jangan hingga Anda salah menentukan apala ...
- Cara Menciptakan Table Of Contents (Menu Daftar Isi) Di Postingan Blogger - Menu Daftar Isi Atau yang biasa disebuat dengan Table Of Contents (TOS) yaitu daftar yang terdiri dari poin atau bab dari subjek yang terkandung d ...
