Cara Membuat Tombol Turn off Lights Video Effect di Blog Video

Cara Membuat Tombol Turn off Lights Video Effect di Blog Video

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.

Cara Membuat Tombol Turn off Lights Video Effect di Blog Video

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(http://3.bp.blogspot.com/-Vs5EJnjVScM/Um0Sq84fJtI/AAAAAAAAEeQ/PEu-OStZciA/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(http://3.bp.blogspot.com/-vKGxmBhYshA/Um0Sqwy_hNI/AAAAAAAAEeU/F0WKs6_WARM/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



Sumber

Thanks for reading Cara Membuat Tombol Turn off Lights Video Effect di Blog Video | Labels: Desain Blog, Video edit this post
0 Komentar untuk "Cara Membuat Tombol Turn off Lights Video Effect di Blog Video"

Contact Form

Name

Email *

Message *