Add Dim Off & Lights On Effect for Blogger Blogs Videos

Watching movies and videos by turning off the lights makes us to feel that we’re in Cinema theaters! So for this case many professional video sharing websites has added Dim Off & Lights On effects on their sites which the visitors happy. So only they are called as Professionals! Now, if you’re running a video sharing blog or you’re sharing movies/videos means you too can add this effect to your blogs by using jQurey plugin.

jQurey is a popular plugin for all web developers. Many developers are try to create new plugins with it and here the new one for blogger. This plugin can Dim Off & Lights On of your blog when you watch videos. It makes your lovable visitors feel happy and they experience same feelings as like they are in movie halls! Are you want to be Professional video sharer? Then this article will surely makes your dream success!

Click here for Live Preview

Now I’m here to share an new awesome widget to Dim Off & Lights On on your blog while watching videos. You can call it as Professional Dim Off & Lights On Effect. You can add this effect in Blogger by following my simple steps added below,

How to Add Dim Off & Lights On Effect in Blogger 

Step 1: Go to Blogger >> Dashborad Menu >> Template

Step 2: Then Click Edit HTML and press Ctrl + F key & find </head> tag on your template.

Step 3: Now just paste the below code before the </head> tag,

<script src=’’ type=’text/javascript’/>
<script type=’text/javascript’>
$(“#wglightoff”).css(“height”, $(document).height()).hide();
if ($(“#wglightoff”).is(“:hidden”))
$(this).html(“Lights Off”).removeClass(“turnedOff”);
$(this).html(“Lights On”).addClass(“turnedOff”);

Step 4: Now again search for ]]></b:skin> tag on your template and paste the below code just before ]]></b:skin>

/* Dim Off & Lights On
——————————————————- */
#lightsVideo {
#switch {
margin: 25px 0 0 60px;
.lightSwitcher {
padding: 0 0 0 20px;
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
#wglightoff {

Step 5: The final part is, Search for </body> tag and just paste the below code before </body> tag,

<div id=’wglightoff’/>

Step 6: Once everything was finsihed just click the Save button and save your template.

That’s it! You’ve added the Dim Off & Lights On effect successfully to your blog. Now it’s time to add this effects to video or to the post.

How to add Dim Off & Lights On effect to video?

Step 1: Go to the New post >> HTML section .

Step 2: Then paste below code in any place where you like to add your video with this new effect,

<div id=”switch”><a class=”lightSwitcher” href=”javascript:void(0);”>Dim Off & Lights On Effects</a></div>
<div id=”lightsVideo”>
Your Embed video code

Step 3: Just replace the “Your Embed Video Code” with your video code and click publish button.

Congrats! You’ve successfully integrated the Dim Off & Lights On effect in your Blog. Here at this time I’ve to thank Janko At Warp Speed for developing this awesome widget for blogger blogs. If you’re facing any issues while installing this effect to your blogs then share it in comments! Don’t forget to do some likes and share your thoughts in comments about this wonderful widget! Cheers:)

Check out the Video Tutorial:

About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.