[How To] Create a Social Content Locker In Blogger

Some time you have gone through an article on which a popup appear saying you must like that website social media account in order to step ahead.In this post i will tell you to create such popup and hide your content as you wish to get likes and shares on any social media.As Shown below by www.AsamWeb.cf

 

Social content locker is a premium wordpress plugin ( also available For blogger using source code ) which is used to lock a specific part of  blog posts content  until a  user clicks one of the social button ( Facebook , Tweet , Google Plus ) .

You used to put social share option in everypage on the blogger , but  user's don't click on any one of the button . Now , social content locker is a best choice for those who wants to increase their faceook likes , Tweets ang google Plus share . Demo

Installation :

Blogger : As , Social content locker is created for Wordpress Users , but we can also install it on Blogger using source code ( available on Github under creative common licence ) .

 How to /

  1. Go to Blogger template Editor and find </head>

  2. Now , Paste the below code just before , </head>

 

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
<link href='https://dl.dropboxusercontent.com/s/wty2pc0nbzhjewb/lockercss.css' rel='stylesheet'/>
<script src='http://dl.dropboxusercontent.com/s/p1zg8pbc9td0wgx/lock.js' type='text/javascript'/>
<script type='text/javascript'>
  //<![CDATA[
jQuery(document).ready(function ($) {
  $('#default-usage .to-lock').sociallocker({
    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
    twitter: {url:"http://twitter.com/ammarmalghani"},
    facebook: {url:"https://www.facebook.com/asamblogspot"},
    google: {url:"https://plus.google.com/+asamenterprises"},
    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>

Customization :
   * Replace ' Highlited contents with yellow colour ' with your social usernames .

 3. Now , whenever , you want to add social content locker in your blog posts . then simply switch to Html box and then paste the below div tag ,
       

<article id="default-usage">
 <div class="to-lock" style="display:none;">
  -- Hidden Content Starts --
 </div>
</article>

Note : Replace ' --Hidden Content Starts --' with your blog posts or content or files . done