Cara Menambah Turn off Light Video Effect di Blogger

Cara Menambah Turn off Light Video Effect di Blogger - Mungkin anda bertanya-tanya apa yang saya maksud pada judul artikel saya kali ini, namun saya rasa anda pasti sudah pernah melihat widget ini sebelumnya ketika menonton sebuah video disalah satu website video online. Namun saya akn menjelaskan kembali secara singkat apa yang dimaksud Cara Menambah Turn off Light Video Effect atau Cara Menambah Efek Mematikan Lampu Video di Blogger. Silahkan disimak dibawah ini penjelasannya.

Apa itu Turn off Light Video Effect?
Dengan bantuan sedikit script jQuery anda dapat membuat area background disekitar video menjadi lebih gelap, namun video anda tetap pada keadaan aslinya. Anda dapat membuat/mematikan cahaya background hanya dengan mengklik tombol "Turn off Lights". Dan ketika anda telah selesai menonton video, anda dapat kembali menghidupkan background ke keadaan semula dengan mengklik tombol "Turn on Lights".

Jadi, Turn off Lights adalah sebuah widget yang dapat membuat backgroung disekitar area video menjadi lebih gelap dibandingkan area konten video itu sendiri, sehingga anda dapat lebih nyaman dalam menonton video.

Masih Bingung? Klik DEMO untuk live preview. (diBagian video/akhir post).

Cara Menambah Turn off Light Video Effect di Blogger

1. Installasi jQuery pada Template

1.1 Masuk ke Akun Blogger
1.1 Pilih Template > Edit HTML > Cari kode </head> dan paste kode berikut sebelum kode </head>

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#lightsoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script> 

2. Menambah CSS pada Template

2.1 Masih dalam Template > Edit HTML
2.2 Cari kode ]]></b:skin> dan paste kode berikut sebelum kode ]]></b:skin>

  /* Turn off the lights By Semua-Tutorialku
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWScU42kC6emDnXzU1kI-JLNEytphRzowtOdQAOUgLF9W___JKuIlq2HGF56wC5Jup1_qh0Fx2MLVLRTplNvjbCUxE7mpTR7Gcff_7L2BRHamsNepdat3jKku8n6s9o1z6DpqSWxS7pbGZ/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA3Bt03LtM9NCXLjP9KHEKcZwVkFk9ZSszP7IYjxYd2sI0s96Ruf7Dvc0ok92-tFDYBqAf4D14LZytQDk6lhFop0f0FC0RqE0b8tdWPxLYF0P__8BAZD6mIv8T9ccw4-O5wv_4u2UqQgKD/s1600/lights-off.png);
}
#lightsoff {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
} 

3. Selanjutnya cari kode </body> dan paste kode berikut sebelum kode </body>

 <div id='lightsoff'/> 

Setelah anda selesai menambahkan semua kode diatas sesuai dengan letak yang benar, sekarang anda dapat menyimpan Template anda dengan mengklik 'Save Template'. Sekarang anda dapat menambah effek turn off lights pada video pada.

Untuk menambah Efek Turn off Lights pada Video di Postingan blog. Anda cukup Membuat Post baru dan pada Tab HTML mode bukan Compose paste kode berikut:

 <center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
</div>
<div id="lightsVideo">
Video-Here
 </div>
</center> 

Note! Jangan lupa untuk mengganti 'Video-Here' dengan kode Embeb dari video yang kamu inginkan. (ingat: Bukan URL video).

Sekarang anda sudah Membuat Efek Turn off Light pada video dipostingan anda, dan sekarang anda dapat Publish video anda tersebut untuk membagikan pada pengunjung anda.

Bingung? ada masalah atau mau mengucapkan Terima Kasih! Cukup dengan berikan Komentar anda dibawah ini. :) Saya tunggu..

Semoga bermanfaat! :)