Add a Turn Off Lights Effect in Blogger While Watching Videos

jQuery is a very good and a awesome plugin for all web developers and blog developers but there is most important thing is we have to and we should have to use it in a positive manner otherwise that could be harmful for our blog and website.

This plugin is very awesome and also very important for our blogs and most important for those blog who shows the videos on their blogs, you can easily turn off lights of your blog and easily can see those videos and feel like you are watching them in cinema halls ;)

Live Demo

Add Turn Off Effect in Blogger

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Click on Edit > Backup your Template before making any changes to your blog
• Press Ctrl + F and search the code shown below.

</head>

• Paste below code before </head>

<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(){
$("#wglightoff").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#wglightoff").toggle();
if ($("#wglightoff").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Don't Paste Orange Script if You Already Saved it in your template

• Now Search for below code

]]></b:skin>

• Paste below code before ]]></b:skin> 

  /* Make Turn off the lights www.widgetgenerators.com
------------------------------------------------------- */
#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/AVvXsEjq_ohLbi0s7RwRIESYRCUCwngjmf6lQr9-qtNmFjIKHySX77s-lt9l9vAl1jvB6DnMD7_nnvIKg585bA9I8PhsM3hCy2rzAL9UCezVT2N392BWTxzpjSYCzKuJijq9ffP-quont1wOwN5I/s1600/wglightn.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/AVvXsEgh65n_ljuuvVnENTUnd5qq5IRWUVwP6qpCRdn_bo74v3CBR_hwAWzrhAt6i2bDy5qep4JzumXGxi577A4JcJGDLr61TArYKivoohPW_fF0TVDWOUPaea8sIr5_630gD37yMwd7Ny57uIVH/s1600/wglightnf.png);
}
#wglightoff {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

• Now Search for </body>
• Paste below code before </body>

<div id='wglightoff'/>

• And, Finally Save Your Template.

IInd Step- Add ON/OFF Button

• Paste below code where you want to embed video and button

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

• Finally That's it from this widget.

Make Changes....!

• Replace it paste here video code with your youtube OR other video code.

Final Words....!

This widget developed by the Janko At Warp Speed and it 's very helpful for us and also for the bloggers and specially for those blogs who have lots of video content. So enjoy that widget and make your blog Light OFF and ON :)