Content Locker Code for Blogger Templates

How would you like to have your own content locker blogger site that prevents visitors from viewing your site content not until they check on some free offers, surveys and place a share button (they have to click the share button to unlock your site)? Go on checkout screen shot below that has content locker code which is embedded inside the blogger template. You'll immediately see the content locker in action as it dims the content of the page except for the free offers, surveys and share button that appears above the content.

You'll find more popular blog sites using content lockers to make extra money from surveys and free offers, however the code they used is more sophisticated and well coded because they used codes from the CPA network. Content locker from various CPA network is best, but you may have trouble during approval if you don't have enough visitors or traffic to your site.  This is were most people fails to be approved but don't worry there's a solution just in case your website is denied, you can use the content locker javascript code for your blogger template. But unfortunately all new blogger templates does not work on it. You'll have to use some old blogger templates or download free blogger templates like Langit Template - tested and code working. You can experiment other blogger templates and try it if it works.

Below is the code that you can use as content locker for you blogger templates. Here's how to implement the code.


1. Login to your blogger account and go to Template then click on HTML. Please see screenshot below as guide.

Image 1

Image 2

2. Click Proceed button to continue editing template.

Image 3

3. Next is to paste the following code below just above the </head> tag.

<!-- content locker start here -->

<script src='http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js' type='text/javascript'/>
<script type='text/javascript'>

    var Delay = 10;//Seconds after them clicking the link, the gateway vanishes.
   
    function setupgateway()
    {
        var Left = $(window).width() /2;
        Left = Left - $(&#39;#gatewaydiv&#39;).width()/2;
       
        var Top = $(window).height()/20;
        Top = Top - $(&#39;#gatewaydiv&#39;).height()/20;
       
        $(&#39;#gatewaydiv&#39;).css(&#39;top&#39;, Top+&#39;px&#39;).css(&#39;left&#39;, Left+&#39;px&#39;).css(&#39;display&#39;, &#39;inline&#39;);
        $(&#39;#gatewayDimmer&#39;).width($(&#39;html&#39;).width());
        $(&#39;#gatewayDimmer&#39;).height($(&#39;html&#39;).height());
        $(&#39;#gatewayDimmer&#39;).css(&#39;display&#39;,&#39;block&#39;);
    }
   
    function removegateway()
    {
        $(&#39;#gatewaydiv&#39;).css(&#39;display&#39;, &#39;none&#39;);
        $(&#39;#gatewayDimmer&#39;).css(&#39;display&#39;,&#39;none&#39;);
    }
   
    $(document).ready(function()
    {
        $(&#39;.offerlink&#39;).click(function()
        {
            setTimeout(&#39;removegateway()&#39;, Delay*1000);
        });
       
        setupgateway();
    });
</script>

<style>

    body
    {
        background-image:url(&#39;&#39;);
        background-repeat:repeat;
        height:100%;
        margin:0;
    }

    #mainContent
    {
        background-color:white;
        margin-left:auto;
        margin-right:auto;
        margin-top:30px;
        width:700px;
        border:3px solid #CDCDCD;
        text-align:center;
    }

    #gatewaydiv
    {
        background-image:url(&quot;&quot;);
        background-repeat:no-repeat;
        width:500px;
        height:100px;
        padding:10px;
        position:absolute;
        display:none;
        background-color:#0e0f0f;
        border:solid 4px gray;
        text-align:center;
        font-family:arial;
        font-weight:bold;
        opacity:0.9;
               
               
    }

    #gatewaydiv h1
    {
        font-size:35px;
        color:#cc0000;
    }

    #gatewayMessage
    {
        font-size:18px;
    }
   
    .offerlink
    {
        color:gray;
        font-weight:;
                font-size:15px;
    }
   
    #OfferList
    {
        margin:0;
        padding:0;
    }
   
    #OfferList
    {
        list-style:none;
    }

    #gatewayDimmer
    {
        background-color:#000000;
        opacity:0.9;
                filter: alpha(opacity = 50);
        display:none;
        position:absolute;
        top:0;
    }
  
</style>
<!-- content locker end here -->


4. Then paste the next code below right after the <body> tag.

<div id='gatewayDimmer'>
</div>
<div id='gatewaydiv'>
    <center>
    <table><tr><td><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></td><td><a class='offerlink' href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></td>
<td><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></td>
<td><script src='http://www.reddit.com/r/Android/buttonlite.js?i=5' type='text/javascript'/></td>
</tr></table>
<p><font color='#ffffff'>Please share or checkout free offers below to unlock this page.</font></p><a class='offerlink' href='LINK OR OFFER'>Ipad 2: Enter your email and get Apple iPad 2 - Back to School</a>
    </center>
</div>

5. Once you've pasted all of them, please make sure that you've change LINK OR OFFER to any free offers or survey links. Preview to see if it works, if not please discard any changes and try another blogger template. It's just a matter of trial and error.

If you like to modify a bit of the placement of the offers or add any background color, simply find #gatewayDimmer and #gatewaydiv then change the values according to your liking.

    #gatewayDimmer
    {
        background-color:#ffffff;
        opacity:0.9;
                filter: alpha(opacity = 50);
        display:none;
        position:absolute;
        top:0;
    }

    #gatewaydiv
    {
        background-image:url(&quot;&quot;);
        background-repeat:no-repeat;
        width:500px;
        height:100px;
        padding:10px;
        position:absolute;
        display:none;
        background-color:#0e0f0f;
        border:solid 4px gray;
        text-align:center;
        font-family:arial;
        font-weight:bold;
        opacity:0.9;
               
               
    }

Posted in: Blogger Tips and Tricks