Lock Your Blog Page or Homepage

How would you want to have your own content locker blogger site that prevents visitors from viewing your blog content not until they check on some free offer, surveys and a share button (they have to click on the share button to unlock your website)?

You can find more popular blogs using content lockers to create extra money from surveys and free offers, even so the code they used might be more sophisticated and well soded since they used codes through the CPA network.

Content locker from various Cpa affiliate network is best, and you may have trouble during approval with no enough visitors or traffic to your web site.

This can be were a lot of people doesn't be accepted but don't be concerned there's a solution in the event your internet site is denided, you need to use the content locker javascript code to your blogger template. But unfortunately many new blogger templates rule isn't followed on it. You'll habe to utilize some old blogger templates. You possibly can experiment other blogger templates and try it if it truely does work.

Here's the way to implement the code.

1. Login for your blogger dashboard and check out Design then simply click Edit HTML and don't forget to tick Expand Widget Templates

2. Next is usually to copy the code bellow and paste the code just above the </head> tag.

<style>

body
    {
        background-image:url('');
        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("");
        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>

3. Then paste the subsequent code below following the <body> tag.

4. If you love to change some the location with the offers or add any background color, simply find #gatewayDimmer and #gatewaydiv then affect the values in line with your liking.

Good luck.

Share on :

Lock Your Blog Page or Homepage

0 Comment:

Post a Comment

Blog Archive

Top 10 Posts