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'/>Note: Exclude the red highlighted color if you had already added a jQuery library in your Blogger template.
<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>
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:
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
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