Bagaimana Menambahkan Turn Off Lampu Video Effect di Blogger - Anda mungkin telah melihat Turn Off the Lights efek pada beberapa blog . Turn Off the Lights efek dibuat dengan bantuan jQuery dan digunakan membuat latar belakang darkish saat menonton video online. Saat mengklik Matikan Lampu seluruh halaman gelap kecuali video dan membiarkan Anda menonton video seolah-olah Anda berada di dalam bioskop. Sekali lagi pada mengklik Nyalakan Lampu akan beralih latar belakang normal. Efek ini sangat bagus untuk orang-orang yang memiliki blog video, dengan cara yang tidak akan mengalihkan perhatian pengunjung Anda saat menonton video. Today. dalam artikel ini kami akan menunjukkan Bagaimana Cara Menambahkan Turn Off Lampu Video Effect di Blogger. Cukup ikuti langkah-langkah sederhana untuk menambahkan efek ini ke blog Anda.
Step Pertama. Masuk ke
Akun Blogger Anda >>
Pilih blog and klik
Template >>
Edit HTML >> cari kode
</head> tag dan copy kan kode dibawah ini tepat diatas 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("Matikan Lampu").removeClass("turnedOff");
else
$(this).html("Hidupkan Lampu").addClass("turnedOff");
});
});
//]]>
</script>
Step Kedua. Lagi cari kode
]]></b:skin> dan copykan kode dibawah ini diatas kode
]]></b:skin>
/* Matikan Lampu
-------------------- */
#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/AVvXsEgPmKTmIt9Rs-oEuFsrMb_HlCSAv0KXbMeRqMRcXamBwWxjvkySuKa7RjCX7J7Pb6cPx1sFeKDbCA5o7OyTdr-8rXVONCKYxGbuZn9kR9GDmgrwxqEee8IBjO9o3EDttGdyUOUa-yQiap9r/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/AVvXsEgB8HoQJx8kswwvs7-gBoiK_3dpfv8TpFRgqJD7KerMaw-dZ5xY5TVwinH1v2WBwkslS7fTeQQMoJKfNJ_eMYpCx1rAkHFPijKbi-4ZEtKM2pq2aA4kZMmLXxiMosPLZFY4pif0QktrE5oy/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;
}
Step Ketiga. Selanjutnya cari kode
</body> tag dan letakkan kode ini diatas kode
</body>
<div id='lightsoff'/>
Step keempat. kemudian simpan template, dan sekarang sudah betul.
Sekarang dimana pun Anda ingin menambahkan video menggunakan kode di bawah ini dan mengganti Video Anda disini dengan kode embed video Anda. Untuk menampilkan video ini diposting, pergi ke Pos Editor, klik pada HTML Tab dan menggunakan kode di bawah ini untuk menambahkan video
<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
</div>
<div id="lightsVideo">
Video Kamu Disini
</div>
</center>
Selamat: Anda telah berhasil menambahkan Effect Lampu efek video ke blog Anda.
Ada yang anda tidak mengerti, tinggalka komen dibawah.