image:© TECHPHERE
There is good news for all users that facebook added a new lights off! effect.just see by going to youtube.
Now i come to point the youtube lights off effect is also available for your blogger you can add to your blogger posts.
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(){$("#wglightoff").css("height", $(document).height()).hide();$(".lightSwitcher").click(function(){$("#wglightoff").toggle();if ($("#wglightoff").is(":hidden"))$(this).html("Turn off the lights").removeClass("turnedOff");else$(this).html("Turn on the lights").addClass("turnedOff");});});//]]></script>Don't Paste Orange Script if You Already Saved it in your template
- Now Search for below code
/* Make Turn off the lights www.Techphere.blogspot.com
------------------------------------------------------- */
#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/AVvXsEjBkGXa-lmimcrxDnz-fDbQyWz2A5x3d_1-X_7BE6jNuA1kWr6RX1QNrlKtJ6Jl8OlLmomNEacIYN__DIWA6BVSovi-UST7jfAiFOEXH7dQts24sBb6GfYGgpb9edR6UlETivTQPF0x9OZp/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/AVvXsEgJMt6R6kf2gjpktegdTPn5bjStw8q7LaaWjbasuWopuhyphenhyphenEbTdPtj1rLsTB0-QKOBeT7mWbKn925ri6Vqh2omHJGDnBXGvCZAutyN0d012WkGNr7_64mLtOiLqi5QVJF-AwjpyPehIjzDo9/s1600/wglightnf.png);
}
#wglightoff {
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='wglightoff'/>
- And, Finally Save Your Template.
IInd 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>
- Finally That's it from this widget.
