Turn On and Turn Off The Lights with jQuery Plugin

Hello brothers! Its been a quiet short time here that I was not able to post an article because of some important matters to settle but for now I will share you a widget that could make you happy. This is from Janko and made it bloggerize by helplogger. You can use this widget especially if you are showing a video to your visitor. I will make this tutorial more straight to make it more comprehensive to all of us.

Live Demo: Turn On and Turn Off The Lights with jQuery Plugin

Turn On and Turn Off The Lights with jQuery Plugin

Step 1. Go to Blogger Dashboard >> Template >> Edit HTML
Step 2. Look for the Code below

</head>

Step 3. Just above the code in step 2, paste the code below

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<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>

Note: Exclude the red highlighted color if you had already added a jQuery library in your Blogger template.
Step 4.  Look for the code below

]]></b:skin>

Step 5. Just above the code in step 4, paste the following code below

/* Turn off the lights
----------------------------------------------- */
#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/AVvXsEiivoLY-J2hs6KmBuMTo_01_SxCCo0ei3SbB6VMlUx35PGTjYEhFZ_4KRLceYwfQYSQgz_hM0ozSzH8GsxppnLeJ63cUxrotfgbdR4OCoLwIoDblEXq_sb2vyiETyVThMDdn_adJvWccbTr/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/AVvXsEhGrdkzmpol47xSSP4zyVHT4XKqL3CSBLyjf76Dxk2nIVu4nX09PxyCdW2MK1LXuYKA2tMdUp2yIqztqjzkRg0SmdrL9WU5WgqWWNoLmJhefK7b9jEFubMHOseaOgQpu04Re6TlHLdULrRx/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 6. Look for the code below

</body>

Step 7. Just above it, paste the code below

<div id='lightsoff'/>

Step 8. Save your Template
Step 9. Whenever you want to integrate this widget to your post, just copy the code below and paste it in your Blogger Post Editor page in HTML mode.

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>