information point
what is Content Locker?

The Content Locker is a pop-up box that cannot be closed unless a user takes the necessary action on your website.
in another words, website owner forces users to take an action before accessing website content.

How do I add a content locker to my website?

it very easy to add into website. first of all we need html code, javascript and css code of content locker. then add into your website

How many Types of content lockers

Basically there are the type of content locker. Social content locker, Paywall content locker and Email list content locker.
But we can also create custom action in javascript to perform to access content data.

What are the benefits of content lockers

Its depends on javascript what we have chosen to perform. content locker helps to gain social media Promotion, Website views, Revenue and contact details of user.

Requirements For Editing Html

Here is the list of the needy

  1. website

    On which website do you want to add content locker.
    Going to do it on WordPress in my case
    आप किस वेबसाइट पर कंटेंट लॉकर जोड़ना चाहते हैं।
    मेरे मामले में यह वर्डप्रेस पर करने जा रहा है
    ਤੁਸੀਂ ਕਿਸ ਵੈਬਸਾਈਟ ਤੇ ਸਮਗਰੀ ਲੌਕਰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ.
    ਮੇਰੇ ਕੇਸ ਵਿਚ ਵਰਡਪਰੈਸ ਤੇ ਇਸ ਨੂੰ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ

  2. jawa script and html code

    we need java script and html code to make content locker.
    i`ll provide download for watchers
    हमें सामग्री लॉकर बनाने के लिए जावास्क्रिप्ट और HTML कोड की आवश्यकता है।
    मैं देखने वालों के लिए डाउनलोड प्रदान करेगा
    ਸਮੱਗਰੀ ਨੂੰ ਲਾਕਰ ਬਣਾਉਣ ਲਈ ਸਾਨੂੰ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਅਤੇ HTML ਕੋਡ ਦੀ ਜ਼ਰੂਰਤ ਹੈ.
    ਮੈਂ ਦਰਸ਼ਕਾਂ ਲਈ ਡਾਉਨਲੋਡ ਪ੍ਰਦਾਨ ਕਰਾਂਗਾ.
    information point

  3. Knowladge

    person should have little bit knowledge about html codes and editing.

Here is the process to add content locker in blogger and wordpress site

First I will do it on the WordPress site. But the process is almost same for blogger site too.

सबसे पहले मैं इसे वर्डप्रेस साइट पर करूंगा। लेकिन ब्लॉगर साइट के लिए भी प्रक्रिया लगभग समान है।

ਪਹਿਲਾਂ ਮੈਂ ਇਸਨੂੰ ਵਰਡਪਰੈਸ ਸਾਈਟ ਤੇ ਕਰਾਂਗਾ. ਬਲੌਗਰ ਸਾਈਟ ਲਈ ਵੀ ਪ੍ਰਕਿਰਿਆ ਲਗਭਗ ਇਕੋ ਜਿਹੀ ਹੈ.

  • First Step :- login to your WordPress site with username and password. (
  • Second Step :- After then go to posts page and create new post or Edit Post
  • Third Step :- create new or Edit post with you content
  • Last Step :- copy paste the given text code below your post content

Here The Example Of Content Locker

Unlock content with a social share.

here is css code for editing

    @import "";
    html, body {
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        padding: 50px;
        background: #f7f8f9;
    #sociallocker {
        background-color: #EEEEEE;
        text-align: center;
        position: relative;
        max-width: 500px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    #sociallocker-overlay {
        background-color: rgba(0,0,0,0.6);
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        transition: all 0.2s ease;
    #sociallocker-overlay i {
        margin-right: 10px;
    #sociallocker:hover #sociallocker-overlay {
        top: -100%;
        transition: all 0.2s linear;
    #sociallocker:hover #sociallocker-content {
        top: 100%;
        transition: all 0.2s linear;
    #sociallocker-content a {
        display: inline-block;
        text-decoration: none;
        padding: 10px 20px;
        background-color: #777777;
        color: #f9f9f9;
        border-radius: 4px;
        font-weight: bold;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
    #sociallocker-content {
        background-color: #ccc;
        transition: all 0.2s ease;
    .social-1 {
        text-decoration: none;
        color: #ffffff;
        display: inline-block;
        width: 60px;
        height: 60px;
        overflow: hidden;
        margin-right: 5px;
    .social-1 i {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    .social-1:hover i {
        background-color: rgba(0,0,0,0.1);
        transform: scale(1.2);
        transition: all 0.2s;
    .fb { background-color: #4561A8; }
    .tw { background-color: #17ADEA; }
    .gp { background-color: #BF3B28; }
    .in { background-color: #1679B1; }
    .pi { background-color: #D9303C; }
    .su { background-color: #E84930; }

You may also like is post

Here is the body code for container

<center><div id="sociallocker">
        <div id="sociallocker-links">
            <a href="#" class="social-1 fb"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="social-1 tw"><i class="fab fa-twitter"></i></a>
            <a href="#" class="social-1 gp"><i class="fab fa-google-plus-g"></i></a>
            <a href="#" class="social-1 in"><i class="fab fa-linkedin-in"></i></a>
            <a href="#" class="social-1 pi"><i class="fab fa-pinterest-p"></i></a>
            <a href="#" class="social-1 su"><i class="fab fa-stumbleupon"></i></a>
        <div id="sociallocker-content">
            <a href="#">Download Now</a>
        <div id="sociallocker-overlay"><i class="fas fa-lock"></i>Unlock content with a social share.</div>
    (function() {
        var sl = document.querySelector("#sociallocker");
        var slc = document.querySelector("#sociallocker-content");
        if (!sl) return;
        var old_slc_html = slc.innerHTML;
        slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\"");
        sl.querySelectorAll("#sociallocker-links a").forEach(function(ele) {
            ele.onclick = function(e) {
                var web_window =, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
                var check_window_close = setInterval(function() { 
                    if (web_window.closed) {
                        slc.innerHTML = old_slc_html;
                        document.querySelector("#sociallocker-links").style.display = "none";
                        document.querySelector("#sociallocker-overlay").style.display = "none"; 
                        document.querySelector("#sociallocker-content") = "0";
                }, 1000);

Instructions for blogger

How to add content locker into blogger?

this process divided into two parts. first of all go to your blogger site and we see theme option on right side of blogger dashboard. click on them option.

Then edit them in html form As per shown pictures blow

we have not done yet. Now the container is added on your site. But it need to configure as per your requirement

By infohub