Social Content Locker - SCL

How can we Add Social Content Locker by JQuery in Our Blogspot Blog with Simple Method.

Today PK Helper will share this Interesting and Must Have Widget in Blogger for Bloggers so we can easily increase our followers and Facebook Page Likes.You can also check other Blogspot Tricks.
Why You Need It? The Reason we Need this widget is that we make posts and many useful tricks for free and people who visit our blog post do not like or recommend our post or page.This is totally unfair for bloggers.We are helping them and they do not even like our pages.So it is now our main need in hour to have such a widget or script so that people like us our pages and so that increase our exposure on social networks too.You may Have tried many Widgets on the Internet but all in vein and with no fruits.So This method will surely work for you just Follow us. What Will We Do? We will add a Jquery Script so that people who want to see our post or our content which we have made with our precious time.We will Add a Content Locker in which our Social Bookmarks will be added that are Facebook, Twitter and Google+ Pages.

Method:

1First of all please take Full Template Backup so that if anything Happened Wrong,You will be able to revert all changes to Zero from where you started this method.But i am sure that it will work for you. 2Now Go to Your Blogger, Log in and Move on to Template Section and Click on Template and then on Edit HTML. Like in Picture Below.

3Now this is the Part of Trick.You need to make sure that the Jquery Script is already added in your HTML or not.For this Purpose in HTML Section,Click CTRL + F to open the search bar and search for below HTML Script.If you find the below script in your HTML then no need of adding it again but if there is no such script then add it manually just below <head> or after it.

 <script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

This is actual code in image form.

4Now search for </head> in your HTML and before or above it, Paste the below code

<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script.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/PKHelper18"},

facebook: {
  like:{
    url:"https://www.facebook.com/PKHelper18"
  },
  share:{
    appId:1644466799163691,
    url:"http://pkhelper18.blogspot.com"
  },
},

    google: {url:"http://pkhelper18.blogspot.com/"},

    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>

5Now whenever you want to Hide some Content, either images,videos or article, Just paste the below HTML code in your HTML section of Post as described in the Video and Replace it with -Your Content-

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

  -- Your Content which you want to Lock or Hide --

 </div>
</article>

Note:If you like or Unlock the Locker Once,It will not appear for you on that page again within some time so Don't worry if it is not appearing again for you, it will be there for every new Comer.

Watch This in Video

Customizations in Locker:

You can customize many things in above locker.You can Change Locker Theme, Actions like " Like Us Follow Us Tweet Follow Recommend" and some others i will mention Below.

Actions

You can change these actions.Just Replace One of the following according to your Need.Actions are mentioned in the Image.

Replace them with any of these in the code.

buttons: { order:[ "facebook-like","twitter-follow","google-plus" ] },

Heading and Message

You can also change the text which appears when content is locked in locker.In the Above code Heading is Like us to unlock this content and Message is This part of post is locked .......

Theme or Look

In the above code we have selected secrets theme which is

But You can also use below mentioned themes

1.dandyish

2.starter

3.glass

4.flat

Just Replace any of the above with the secrets in your code.

Timer and Close Button

You can also change timer and close button options.Just replace timer: 0 with any number in above code and set a time in seconds after which locker will automatically close.Also if you want to place a close button after on the upper right corner so that users can easily close your locker if they want to without liking then change close; false to true.

So We have successfully added a Social Content Locker in our Blogger Blog and also we can custimize it according to our will.Anything if you want to ask then you can comment or can Ask in ASK PK HELPER FORUMS.