You can test it on the following demo blog - click the link that says "Turn off the lights" and the page will be darkened. To make the page elements active again, just click the "Turn on the lights" link:
How to add the "Turn off the Lights" Feature to Blogger/Blogspot
Step 1. Log in to your Blogger account and click on your blog > go to "Template" and hit the "Edit HTML" button
Step 2. Click anywhere inside the code area and search for the following tag by pressing the CTRL + F keys (hit Enter to find it)
</head>
Step 3. After you found it, paste the below scripts just above it:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Note: if you already have one version of jquery in the template, please remove the line in red.
<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>
Step 4. Now search for the following tag:
]]></b:skin>Step 5. Just above ]]></b:skin> add the following CSS:
/* Turn off the lightsStep 6. Try to find this tag:
----------------------------------------------- */
#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/AVvXsEh0qdBIPnVYzi0Rh_Z2jVFoH9Y4yjZd8PIzFNResNcx8ZqrQCT0tOAo6R2JTK9NNQYpAXhdlOfT7Y3kdiK0HgXmuiIb73ETZv2jM493IW7dJGPA1zRg7YVPJEPBKRXoKOMRCWWHkW6V2b_a/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/AVvXsEg5sV5MBupgoGGM-PE2SXDg3bcnpEhM47Yul9rOMRlO1suEQnl9DvJk5C0XsgkiIvU-A6QLSZRlWiVZRK3K3kebWrPh8JKKKin9TAFbIoGBhDYtW8qlqS4-e-nwcgFmaFiRzIW-4934qrNv/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;
}
</body>Just above the </body> tag, add this HTML code:
<div id='lightsoff'/>Step 7. Click the "Save Template" button and that's it!
Now, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:
<center>Add the code of your video instead of the blue text and "Save" or "Publish" your gadget / post. Now you can enjoy your videos with the lights off!
<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>
Remember that this trick uses jQuery and if you use another version of jQuery, you must check to have only one, otherwise it might now work.
EmoticonEmoticon