Halo Sobat DesignzChan kali ini saya ingin berbagi tutorial Cara Membuat Turn On/Off the Lights Video Streaming di Blog. Mungkin sobat pernah mengunjungi sebuah web streaming atau video dengan konten yang pastinya berupa video, seperti Film, Trailer, Anime, Drama, Dll yang dapat di tonton secara online/streaming. Saat sobat melakukan streaming pada website tersebut, biasanya sobat akan meliat sebuah tombol/button yang "Turn Off the Lights" atau "Turn Off", dan lainnya.
Fungsinya yaitu apabila sobat mencoba menekan tombol tersebut, nantinya seluruh latar belakang website akan berubah menjadi gelap kecuali pada video yang sedang anda tonton. Jadi, mata anda dapat lebih fokus pada video yang sedang di putar di video, Berikut Demonya.
Demo Turn On/Off the Lights
Baca Juga : Cara Membuat Mirror Streaming/Video di Blog
Bagaimana sob, menarik bukan..? bila sobat ingin mencobanya, silakan mencoba tutorial di bawah ini.
Cara Pemasangan Turn On/Off Light Video
1. Langkah Pertama, Silakan sobat buka Buka akun blogger, lalu..
2. Pilih menu Template > Edit HTML
3. Dan Cari kode </head>, tambahkan kode berikut ini sebelum kode </head>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#plo").css("height", $(document).height()).hide();
$(".pls").click(function(){
$("#plo").toggle();
if ($("#plo").is(":hidden"))
$(this).html("Turn Off").removeClass("pto");
else
$(this).html("Turn On").addClass("pto");
});
});
//]]>
</script>
4. Cari kode ]]><b:skin>, tambahkan kode berikut ini sebelum kode ]]><b:skin>
/* Turn On Off the Lights */
#plv {
position:relative;
z-index:999;
}
.pls {
z-index:998;
float: right;
background: #dd4b39;
display: inline-block;
color: #fff;
border-radius: 3px;
margin: 3px;
padding: 5px 8px;
}
.pls:hover {
color: #fff;
background-color: #C74433;
}
.pto {
float: right;
position:relative;
background: #C74433;
display: inline-block;
color: #fff;
border-radius: 3px;
margin: 3px;
padding: 5px 8px;
}
.pto:hover {
color: #fff;
background-color: #dd4b39;
}
#plo {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:997;
}
5. Cari kode </body>, salin kode berikut ini sebelum kode </body>
<div id='plo'/>6. Simpan Template.
Catatan :
<a class="pls" href="javascript:void(0);">Turn Off</a>
<div id="plv">
--- CODE VIDEO/EMBED DISINI ---
</div>
Sekian dari artikel saya hari ini Cara Membuat Turn On/Off the Lights Video Streaming di Blog, Apabila sobat masih bingung / ada pertanyaan lainnya, silahkan bertanya pada kolom komentar dibawah ini..
Terima Kasih.
