Add a Cinema Mode to Your Blog

    Do you need a cinema mode wherein your audience can click a button and poof, the rest of the page darkens - leaving the flash videos highlighted. Now you can have this feature in your blog and keep your audience focused on your videos. Click on the sample link below and see for yourself.

Cinema Mode On



Show or Hide Cinema Mode Codes

Cinema Mode
Code:

<!--Cinema Mode-->
<div style="display: none;" id="CinemaOn"></div>

<script type="text/javascript"> $('.CinemaToggle').click(function(){ $('#CinemaOn').toggle(); $('#CinemaOn').fadeTo(0, .9);}); $('#CinemaOn').click(function(){$('#CinemaOn').hide(); }); </script>

<style type="text/css"> #CinemaOn{background: #000; height: 100%; width: 100%; position: fixed; top: 0px; left: 0px; z-index: 1000;} </style>
<!--@Cinema Mode-->

    To install the cinema mode into your blog, follow the steps below. Please refer to INSTALLING JQUERY TO YOUR BLOG for instructions in adding the JQuery.

1 Make sure that you have JQuery installed in your blog.

2 Go to Layout >> Add a Gadget.

3 When the pop-up box appears, choose HTML/Javascript.

4 Copy the code above and paste it into the content box.

5 Leave the title box blank if you want it not to show up on your page.

6 Press save.

    Now that you have installed the core code into your blog, you will need to add a button, wherein the user may click it to enter the cinema mode. You can add as much button as you want by just adding a class named "CinemaToggle" into the HTML element. Below are some examples.

Example 1:
Anchor Link Sample

Code: <a href="javascript:void" class="CinemaToggle">Anchor Link Sample</a>

Example 2:


Code: <button class="CinemaToggle">Button Sample</button>

Example 3:

Image Sample

Code: <img class="CinemaToggle" src="https://lh6.googleusercontent.com/-qErZNeUiwAw/T7FMLrL-2cI/AAAAAAAADPI/VDDXJUzhUIk/s128/lightbulb.png" />