[UPDATED] How To Create a Social Content Locker in Blogger Blog

Update : Powered By New Blogger Tricks attribution is Removed..

Enjoy the New Version without any Credits 

Social Content Locker is Used To Lock Specific text  And Images

You Can Easily Install Social Content Locker By Following Simple Steps

• Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget
• Then Go To Template Tab  >>  Edit HTML
• Then Add The Below Code Before or Above </head> (Want help to find Click Here)

<link href='http://newblogger-tricks.webege.com/locker.css' rel='stylesheet' type='text/css'/>

Update  New Design Added

            To See New Design ClickHere

• For this design replace the above code with below code

<link href='http://newblogger-tricks.webege.com/locker-new.css' rel='stylesheet' type='text/css'/>

Now Go To The Post/Page you want to Lock Content And Add Below Code In HTML Tab

<article id="default-usage">
<div class="to-lock" style="display: none;">
     
<!--Hidden Content Starts (You can Use HTML BELOW)-->
<div style="text-align: center; margin-bottom: 20px;">
<img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
Add Your Hidden Text Here
</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="nbtunlocker"> </div>
<script type="text/javascript" src="http://newbloggertricks.googlecode.com/svn/lock.js"></script>

<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://www.newblogger-tricks.com",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/newbloggertrcks",
appId: "706100816073140"
},
google: {
url: "http://www.newblogger-tricks.com"
}
});
});;;;
     
</script>

For Facebook: Replace http://www.facebook.com/newbloggertrcks  with your Facebook Page.

For Twitter: Replace http://www.newblogger-tricks.com with your Website's URL or etc. 

For Google+: Replace http://www.newblogger-tricks.com with the URL of your website or post.

Replace Add_Hidden_Image_Here with the Image that you want to Hide.

Replace "Add Your Hidden Text Here" With the text that you want to hide from users.

Remember: Don't forgot to Add Facebook App ID otherwise the Facebook Like button will not appear properly. i.e. Replace 706100816073140 from above coding.