How To Put Light Effects In Your Blogger Template

How to Add together Turn off Lights Video Effect in Blogger

In the by we accept already showed you lot how to exercise video SEO in Blogger to go maximum visitors out of search engines. However, the question is that practise all of your visitors would end up watching that video? What yous can practise to make your video standout in a blog post? The reality is that nobody likes to force their visitors to picket, merely may exist making your video more prominent could help in getting maximum video plays. Today in this article, we will bear witness you How to add Turn off Lights Video Issue in Blogger.

What is Plow off Calorie-free Video Effect?

With the help of jQuery this script helps you to create darkish background effectually the video so that your video stands outs among the whole content. It provides you the flexibility to turn the background night by pressing "Turn off Lights" push button. When you are cease watching the video, you tin over again turn the background normal by pressing "Turn on Light" button.

How to Add together Plough off Lights Video Effect in Blogger:

Offset and foremost you have to install the jQuery script in your template that would take care of nearly of the things. So, go to Blogger >> Template >> Edit HTML >> Search for </head> and just above it paste the following slice of coding:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(part(){
$("#lightsoff").css("height", $(certificate).meridian()).hibernate();
$(".lightSwitcher").click(part(){
$("#lightsoff").toggle();
if ($("#lightsoff").is(":hidden"))
$(this).html("Plough off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>

Once you lot are finish adding above jQuery code, now it's time to add CSS code in your template. With the combination of both jQuery and CSS it will provide yous simply perfect results. Paste the following CSS code correct above the ]]></b:skin> tag in 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;
groundwork-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi289VOQ60Jtlf7OsjGlfDFIFmyORN87YrJ0fW2HmYpc0NjMZmf3dOcu1xYH-XjwaQEOblZBXC8mmajD6Rq8kveVUDCFlQlsxtZeIoty3Qoq2505-AdwHuL5f1JNTnF7YTKZa9tBfRyqjS/s1600/lights-on.png);
groundwork-echo:no-echo;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-prototype:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAHBPQS6PhtJ2-D8h_0ZQ-RbjzdN8aCo-eHFDroNr-WVm2eJXQVev6KDg67x3exjJUpA0scQGNbOMaHw6KgdP4xZndyX0v9VD25gFTDJjnztxbu0aOSmb-dCxnuxp1CnrSKU4anAJPdMeI/s1600/lights-off.png);
}
#lightsoff {
groundwork:#000;
opacity:0.ix;
filter:alpha(opacity=90);
position:absolute;
left:0;
tiptop:0;
width:100%;
z-index:100;
}

Lastly in the template search for </body> tag and simply in a higher place information technology paste the following code:

<div id='lightsoff'/>

After adding allof the above codes, salvage your template by pressing "Save Template" button. That'southward it yous have successfully installed the effect in your template. At present the adjacent matter is making it appear on your video.

Information technology entirely depends on y'all on which video you lot want to use this outcome. Go to Blogger >> Add together a new post >> revert to EDIT HTML Tab and paste the following code there. Note: Exercise not forget to supplant the text Video-Here with the embed lawmaking of your video.

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

Congratulations, y'all accept successfully added low-cal off effect in your video. At present press the Publish button to brand it alive for your visitors.

We promise this tutorial may have helped yous in learning a smart technique of adding plow off light video effect in blogger. If you are a YouTube fan then, you lot might have seen this feature on YouTube too. Share your thoughts most this astonishing widget we take come up with by commenting below.