How to Create a Social Content Locker in Blogger Blog

Have you ever seen that some website author locks their content or download link by social icon like facebook, google+, twitter. You have to like/tweet/share to unlock that content. That's call 'social locker'.
Some of my readers are facing problem in adding Social Content Locker to their Blogger blog and they requested to create a tutorial on how to add this Social Content Locker in their Blogger blog. So I am going to write about social content locker in this post. Let's start.

Social content locker script for blogger

Although there are many social content locker scripts but I am going tell one of the most easy script and also easy to use. In this script you will get facebook like us button, Twitter tweet button, and Google+ like us button.

How to add Social Content Locker?

Now follow every steps carefully.

#1- Sign in to blogger.
#2- Click on Template and Edit html
#3- Now from keyboard press CTRL+F and write </head>
#4- Now before </head> tag write the script.

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
<link href='https://www.dropbox.com/s/j8u0px1qszixxwl/TricksTantraSCL.css?dl=1' rel='stylesheet' type='text/css'/>
<script src='https://www.dropbox.com/s/tskmt978ku8qb7g/TricksTantraSCL.js?dl=1' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({
    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
    twitter: {url:"http://twitter.com/abcxyz"},
    facebook: {url:"https://www.facebook.com/abcxyz/"},
    google: {url:"https://plus.google.com/+abcxyz"},
    text: {
      header: "Like us To Unlock This Content",
      message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."
    },
    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>

Change the abcxyz with your facebook/twitter/google+ url.

#4- Save Template.
#5- Go to post. Create new post or edit your old post.
#6- Click on HTML 
#7- Now at the end put this code.

 <article class="socialLocker">  <div class="to-lock" style="display:none;">    — ADD YOUR CONTENT HERE —   </div> </article>

Change the *ADD YOUR CONTENT HERE* with your article or download link and then publish.

*** When you will put the script into your template make sure to backup your template to avoid any error. ***

That's all. Hope you have enjoyed this tutorial. If you are facing any problem do comment below. If you like this tutorial do share and subscribe. Happy blogging.