Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger jQuery » Blogger Tutorial » Blogger Widget » How-to » jQuery to Turn off or Turn on the lights while watching videos

jQuery to Turn off or Turn on the lights while watching videos

Do you love watching videos online? Me too :D but what we needs to have to love more is that something like option of turning on or off lights around the page except the video. Just amazing that how it would be look and feel? Nice? Yeah ! Here we are going to talk about the same.


If you are running a video sharing website or you might sometimes need to embed videos in your blog posts. Let's do something different with it for your blog/website readers ! I am talking about a jQuery which let's users to turn off the lights while watching videos on your blog. which is made by Janko.

Related : How to Add Custom jQuery Lightbox to Blogspot blog


You can check how actually it works on the following demo blog - click the link that says "Turn off the lights" and the page will be darkened. To make the page elements active again, just click the "Turn on the lights" link:

Demo

How to add the "Turn off the Lights" Feature to Blogger/Blogspot

Go to blogger dashboard > Template > Edit HTML
Press CTRL + F to enable search box, then search for the following code:

</head>

Now, Copy and paste the following code just above the </head> tag.

    <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: if you already have one version of jquery in the template, please remove the line in red.

Now search for the following tag:

    ]]></b:skin>

Just above ]]></b:skin> add the following CSS:

    /* 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/AVvXsEj043rvwRDQVfvi0sNWTuU7rpd5ZrIUbsn_wEqmQ6hTOSJHMpZknPtppJvfV31_u72umNH5SrVjmIeMoyj9fgtsURIHOeY3W8GuihVYXE11UYeyyQFoiopht_j3-qDPuZhsLy7PIXX3KWIj/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/AVvXsEiIq5P5fAcInikD7kkye-CiJqnpKI6myze3KlHs2S_ZfwxymLzUGm2u-_FP0tZIf33RSMleIHkI0a4ZzMI7kWCVc5-aBGXE_WyjkGYWWZiYUzjhWOdoElji_KOi2073DGthB5GPhkIKgImQ/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;
    }

Try to find this tag:

    </body>

Just above the </body> tag, add this HTML code:

    <div id='lightsoff'/>

Click the "Save Template" button and that's it!

Now, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:

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

Add the code of your video instead of the blue text and "Save" or "Publish" your gadget / post. Now you can enjoy your videos with the lights off!
Add Comment
Blogger jQuery Blogger Tutorial Blogger Widget How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • Add Auto Read More with Thumbnail to Blogger/Blogspot
    Add Auto Read More with Thumbnail to Blogger/Blogspot
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot
  • Optimising images for search engines
    Optimising images for search engines
  • HTML iFrame Code Generator
    HTML iFrame Code Generator
  • How to Prepare and Upload Videos to Blogger
    How to Prepare and Upload Videos to Blogger

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ▼  November (6)
      • Flipper Social Sharing Widget for Blogger
      • Add jQuery Link Nudging On Links Hover For Blogger...
      • Are you using SSL ? As Now It Is A Ranking Factor !
      • Featured images not showing up on blogger index/pa...
      • jQuery to Turn off or Turn on the lights while wat...
      • Add Facebook Like Button Below Post Titles (Blogger)
    • ►  October (1)
    • ►  September (8)
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates