Cara Menambah Turn off Light Video Effect di Blogger

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(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. 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! :)
Cara Menambah Turn off Light Video Effect di Blogger Cara Menambah Turn off Light Video Effect di Blogger Reviewed by Mgs Rama Dony on 3:33 AM Rating: 5

10 comments:

  1. wah mantap gan nambah keren blog ane kalau diberi efek turn off light

    ReplyDelete
    Replies
    1. eheh.. pastinya gan makin Joss! :ng
      semoga bermanfaat.

      Delete
  2. Oh jadi itu namanya, baru tau ane, keren nih

    ReplyDelete
    Replies
    1. siip :)
      semoga bermanfaat untuk anda.

      Delete
  3. mantapz gan,,ane baru tau nih infonya :) thanks gan udh share...

    ReplyDelete
    Replies
    1. oke gan, sama-sama. :)
      semoga bermanfaat untuk anda!

      Delete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. WARNING! komentar diatas saya hapus, karna menggunakan Link Aktif! :(
    Saya harap anda, tidak menggunakan Link Aktif dalam berkomentar.
    Tolong hargai saya, Jika anda ingin dihargai! :-d

    ReplyDelete
  6. kalau mau pasang theater mode gimana ya

    ReplyDelete

Silahkan berkomentar sesuai topik artikel diatas.
1. Jangan tinggalkan link akitf
2. Jangan gunakan kata kotor, spam, sara, atau provokasi lain
3. Gunakanlah form komentar dengan baik dan bijak

Powered by Blogger.