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
- Cara Menciptakan Tombol Dengan Dampak Animasi Border Button atau yang paling kita kenal sebagai Tombol merupakan bab penting yang ada dalam sebuah website. Di internet terdapat aneka macam website k ...
- Cara Menciptakan Hidangan Navigasi Blog Horizontal Sederhana Salah satu ciri blog yang disukai oleh pengunjung yakni mempunyai hidangan navigasi yang terang sehingga tidak membingungkan pengunjung dalam menelu ...
- Cara Memasang Badge Profil Google Plus Di Blogger Badge atau tanda pengenal merupakan salah satu widget yang dapat kau pasang di blog, lencana profile google+ ini pada umumnya dipasang pada bab si ...
- Cara Memasang Widget Galeri Foto Instagram Di BlogInstagram merupakan media umum yang sangat menarik di sini Anda sanggup membagikan foto, video dan story Anda sehingga instagram menjadi sosial media ...
- 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 ...
- Artikel Agan Ke 100 Blog Terbaik Artikel Agan Ke 100 Blog Terbaik Assallamualikum sahabat perkenalkan nama aku Egi Supiyudin admin di artikel agan usia aku 24 tahun, asal bandung ...
