How To Add Together Plough Off Lights Video Final Result Inwards Blogger

In the past times nosotros cause got already showed y'all how to practise video SEO inward Blogger to acquire maximum visitors out of search engines. However, the enquiry is that practise all of your visitors would terminate upwards watching that video? What y'all tin laissez passer the axe practise to brand your video standout inward a weblog post? The reality is that nobody likes to forcefulness their visitors to watch, but may move making your video to a greater extent than prominent could assist inward getting maximum video plays. Today inward this article, nosotros volition exhibit y'all How to add together Turn off Lights Video Effect inward Blogger.

What is Turn off Light Video Effect?

With the assist of jQuery this script helps y'all to practise darkish background roughly the video thus that your video stands outs amid the whole content. It provides y'all the flexibility to plough the background nighttime past times pressing “Turn off Lights” button. When y'all are complete watching the video, y'all tin laissez passer the axe over again plough the background normal past times pressing “Turn on Light” button.

How to Add Turn off Lights Video Effect inward Blogger:

First in addition to firstly y'all cause got to install the jQuery script inward your template that would cause got aid of most of the things.  So, acquire to Blogger >> Template >> Edit HTML >> Search for </head> in addition to only higher upwards it glue the next slice of coding:

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

Once y'all are complete adding higher upwards jQuery code, forthwith it’s fourth dimension to add together CSS code inward your template. With the combination of both jQuery in addition to CSS it volition render y'all only perfect results.  Paste the next CSS code correct higher upwards the ]]></b:skin> tag inward your template.

 /* 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/AVvXsEgvpenQJM4wg2dSgLCVd02N8i7we7Ib68PzXQLhROiTzDPSirELfqInc65-aW7irVWQxrx1lYRAq4OiOangxmnNww9EP9puU6KrsN7nZdm6KsVHKZCKZpW80n-BrTwrLLKvqn7c0IkYFKDM/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/AVvXsEiUKkSqVPiSH_7gr_kOeX7UMA0-YFOvuH9CMnaGRPh9tE7D9ONQz84UTgW7wNWnHM0rjet1fDDN4ywhC2kjeWVqY5mqTxdUGGTKGvBs45Y5GQxZa_x2O05AHlOPNfy5oLUy8BC8TT2tGuwb/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;
}

Lastly inward the template search for </body> tag in addition to only higher upwards it glue the next code:

<div id='lightsoff'/>

After adding allof the higher upwards codes, relieve your template past times pressing “Save Template” button. That’s it y'all cause got successfully installed the outcome inward your template. Now the side past times side affair is making it seem on your video.

It exclusively depends on y'all on which video y'all desire to apply this effect. Go to Blogger >> Add a novel postal service >> revert to EDIT HTML Tab in addition to glue the next code there. Note: Do non forget to supervene upon the text Video-Here amongst the embed code of your video.

<center>
<div id="switch">
<a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a>
</div>
<div id="lightsVideo">
Video-Here
 </div>
</center>

Congratulations, y'all cause got successfully added lite off outcome inward your video. Now press the Publish push to arrive alive for your visitors.

We promise this tutorial may cause got helped y'all inward learning a smart technique of adding plough off lite video outcome inward blogger. If y'all are a YouTube fan then, y'all mightiness cause got seen this characteristic on YouTube too. Share your thoughts almost this amazing widget nosotros cause got come upwards up amongst past times commenting below.