Add a Turn Off Lights Effect in Blogger While Watching Videos

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 ;)

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(){

    $("#lightoff").css("height", $(document).height()).hide();

    $(".lightSwitcher").click(function(){

    $("#lightoff").toggle();

    if ($("#lightoff").is(":hidden"))

    $(this).html("Turn off the lights").removeClass("turnedOff");

    else

    $(this).html("Turn on the lights").addClass("turnedOff");

    });

    });

    //]]>

    </script>

Don't Paste Green Script if You Already Have it in your template 

    Now Search for below code

]]></b:skin>

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

       /* Make 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/AVvXsEjvfGV3gmUUO_P9VFz56POK3diYJ6FNMKluF7wMukn-NcOeG0U9OG3XICuIvK__7syxH5_Ztk5B-XCZONg3R5AIQc3tT-UJF8gg9QESY294tDF5w3CL6fyXN_WeW_pzjqy05urYvk0G4qi_/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/AVvXsEgoKAIBzwKxYvdgt_Hdc7DF6Li9NDAlF6tebJkmUyXahycDP2Lix0pJwZJD4V_4mhLoNx2kn9p6R_j74Do9gEgVHBnPOYWgAd2xYTafge4HK416ouZArNWP7cjTW1f84G8IUSgph16UO1eE/s1600/wglightnf.png);

    }

    #lightoff {

    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='lightoff'/>

Save Your Template

2nd 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>

That's it from this widget.

Make Changes!

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