Turn On and Turn Off The Lights with jQuery Plugin

Hello brothers! Its been a quiet short time here that I was not able to post an article because of some important matters to settle but for now I will share you a widget that could make you happy. This is from Janko and made it bloggerize by helplogger. You can use this widget especially if you are showing a video to your visitor. I will make this tutorial more straight to make it more comprehensive to all of us.
Lights on and lights off Plugin with jQuery

Live Demo: Turn On and Turn Off The Lights with jQuery Plugin

Turn On and Turn Off The Lights with jQuery Plugin


Step 1. Go to Blogger Dashboard >> Template >> Edit HTML
Step 2. Look for the Code below
</head>
Step 3. Just above the code in step 2, paste the code below

<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(){
$("#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>
Note: Exclude the red highlighted color if you had already added a jQuery library in your Blogger template.
Step 4.  Look for the code below
]]></b:skin>
Step 5. Just above the code in step 4, paste the following code below

/* 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/AVvXsEiivoLY-J2hs6KmBuMTo_01_SxCCo0ei3SbB6VMlUx35PGTjYEhFZ_4KRLceYwfQYSQgz_hM0ozSzH8GsxppnLeJ63cUxrotfgbdR4OCoLwIoDblEXq_sb2vyiETyVThMDdn_adJvWccbTr/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/AVvXsEhGrdkzmpol47xSSP4zyVHT4XKqL3CSBLyjf76Dxk2nIVu4nX09PxyCdW2MK1LXuYKA2tMdUp2yIqztqjzkRg0SmdrL9WU5WgqWWNoLmJhefK7b9jEFubMHOseaOgQpu04Re6TlHLdULrRx/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;
}

Step 6. Look for the code below
</body>

Step 7. Just above it, paste the code below
<div id='lightsoff'/>

Step 8. Save your Template
Step 9. Whenever you want to integrate this widget to your post, just copy the code below and paste it in your Blogger Post Editor page in HTML mode.
<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>

About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...