Cara Membuat Tombol Turn off Lights Video Effect di Blog Video

Baca Juga

Tombol efek video "matikan lampu" (Turn off Lights Video Effect) adalah elemen yang akan membuat tampilan blog di luar video menjadi gelap. Jika kita klik turn on light (nyalakan lampu), maka tampilan blog akan kembali terang.

Efek ini diperlukan agar mata pengunjung fokus ke video, membuat nyaman menonton videonya, tanpa terganggu elemen atau elemen lain yang ada di sekitar video. Demonya dalam video yotube di bawah.

Kode ini cocok diterapkan di blog foto atau video. Lebih oke lagi jika Anda menggunakan template blog foto dan video.

Cara Membuat Tombol Turn off Lights Video Effect di Blog Video

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

#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/AVvXsEgO8DWUA8sboPNiC8C4BpQqNBZCo97W0lnIBRc559IlwUl7y-M2y88gA9VXmxO3or9K7eHFyB3dAf8pCkOVmj5qHV30-vySY6yhOJs5bWABZHk0qDX7_LSXrVTgBXfAU6NL0CEcbQZul9_x/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/AVvXsEgseMnzHuuz5hJo6bvXAHgs-tUV5DtS4pIPLigJpwu5RUpsEgVLB2a_5yDd4c3KRXKzAjxqnk1bKpbrlUgnS1873Hb_b5aUn9XdoZgnSZ9gNqTfaybB9rHqJlFTsHQZspxJONa-gLGc054n/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. Copas kode berikut ini di atas 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>

4. Copas kode berikut ini di atas kode </body>

<div id='lightsoff'/>

5. Simpan template!

Saat posting video, klik mode HTML, dan copas kode berikut ini:

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

Ganti <!-- Kode Video di Sini --> dengan kode tempel video yang akan dipublikasikan di postingan.

Contoh:

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
</div>
<div id="lightsVideo">
<iframe width="100%" height="415" src="https://www.youtube.com/embed/RAoGDAmZ1rg" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</center>

Beres!

Demo Turn off Lights Video Effect di Blog Video. Silakan klik Turn off the lights

Turn off the lights

Sumber