Turn off the lights with jQuery

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko . And what this script does? It ...

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko. And what this script does? It will turn off the lights for you, so that everything on the page will be fading to dark, except the video, and everything around the video will be less visible, in a way that nothing will distract you while watching it.

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 visible again, just click the "Turn on the lights" link:



How to add the "Turn off the Lights" Feature to Blogger/Blogspot

Step 1. Log into your Blogger account and click on your blog, then 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'/>
<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: if you already have one version of jquery in the template, please remove the line in red.

Step 4. Now search for the following tag:
]]></b:skin>
Step 5. Just above ]]></b:skin> add the following CSS code:
/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoW40JI_WBrpWuJ9CEr_jDtHAXHLJQkYXJPMhikD1u74SgzMU6_lNAuA7mypjCzqkiXA4hnqAiHTufb9WFkgAVfvJcK8kf03mkHPtInTO2_J_u38yehZ4U6KPOi8GCoqqzTUKIVblMOHSm/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/AVvXsEhPvdemP_GaHyzx2xfosZgzauXLEKVRK1ZsqbqETXFF6CyJvJ3T0ZfQCy31UScsSfHroKFhoAp9echFY5mOeq2TglwE2maPq_F4l3AftsGvUY_3oNA9TegShMPA2jrJwCi2w0QhTxEpHPQL/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. Finally, find this tag:
</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, each time you add a video, either in a post or using a HTML/Javascript gadget, use this code:
<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>
Add the iFrame code of your video instead of the text in blue and "Save" the gadget or "Publish" your post. Now you can enjoy your videos with the lights off!

Remember that this trick uses jQuery and if you have another version of jQuery, you need to remove it, otherwise it might not work.

COMMENTS

HawkHost Sale 25% Ending Soon

SaibABC's Contact Form:

Name

adsense,10,adsense optimization,4,adsense tips,5,Amp,3,backlinks,2,Beautiful,26,Beautifully,3,Beauty,15,beginner's guide,12,Blog Design,57,Blogger,22,blogger pages,4,blogger posts,11,blogging tips,3,Bolero Hot,13,click bombing,1,Comedies,10,Comedy,8,Comments,9,css,27,Cuisine,32,Cuisines,39,custom domain,2,Dab Neeg,6,DabNeeg,36,Facebook,4,Fashion,27,Fighting,12,firebug,1,font awesome,1,GoodTrick,58,google analytics,1,google plus,4,Grid Style,17,HealthLife,57,Hmong Health,11,Hmong Music,6,homepage,1,how to,54,Hunting,55,Image Effects,13,Information,17,instagram,2,Instrument,5,invalid clicks,1,javascript,10,jQuery,16,KabTxuj,28,Karaoke,19,Karaoke Hit,12,labels,2,Liste Style,6,make money online,8,menus,7,Movie Hot,37,Movies,18,Music Hot,41,Musical,100,Navigation,5,navigation menu,5,Other Clips,6,popular posts,5,posts,11,recent comments,1,recent posts,3,related posts,3,robots,1,Sad Songs,17,SEO,16,sitemap,1,slideshows,3,social media,8,social media plugins,4,statcounter,1,static pages,2,Technology,17,Template,12,Templates,7,threaded comments,3,tools,1,Travels,1,Video Fight,7,Video Hot,22,Video Hunt,30,Widgets,47,Xov Xwm,2,
ltr
item
SaibABC - News, HealthLife, Beauty, Tips: Turn off the lights with jQuery
Turn off the lights with jQuery
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HQsUmSL4vuK3odEyx4Hw27OV1MGsmnAp4ZmOK6Gd44EtizrIweuWKWkUosGZx0egmqzEiE_rj1X-rnbTUcDC5VCDhAapIRlzUyWLKIDVG9pF8pB8kOBwHTgXtmTXBiGhlFl14U-6ALxB/s320/turn-off-light.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2HQsUmSL4vuK3odEyx4Hw27OV1MGsmnAp4ZmOK6Gd44EtizrIweuWKWkUosGZx0egmqzEiE_rj1X-rnbTUcDC5VCDhAapIRlzUyWLKIDVG9pF8pB8kOBwHTgXtmTXBiGhlFl14U-6ALxB/s72-c/turn-off-light.jpg
SaibABC - News, HealthLife, Beauty, Tips
https://saibabc.blogspot.com/2020/10/turn-off-lights-with-jquery.html
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/
https://saibabc.blogspot.com/2020/10/turn-off-lights-with-jquery.html
true
7959548849429202663
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy