Adding Social Content Locker in Blogger

Hi guys, today I am bringing you the most fantastic Widget which helps to increase our Blogs traffic By Sharing. It Is Called Social Content Locker which helps to share our blog to unlock the content. You may have seen related to this content locker in different surveying sites where we must share the page to view hidden text, downloads and much more.
So, lets add this special widget in our blog.

Follow My Steps to add it in your blog;

  • Open your blog account
  • Go To Blogger Dashboard
  • Select Your Blog and click On Layout
  • Click On Template and select Edit HTML 
  • Search For This Code </head>
  • paste the below code just below the code
<link href='https://drive.google.com/file/d/0B6h45U6VDP-abXFiYWZPZlVoeTA' rel='stylesheet' type='text/css'/>

  • Now, save your template
Now, let's add this in our desired post. Follow my steps to show it in our specified posts;

  • Click On The Blog post where you want to add this
  • Click On Edit post
  • Select HTML in place Of Compose button
  • Paste The Code There

<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>
Add Your Hidden Text Here
<div style="text-align: justify"> </div> <!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="nbtunlocker"> </div>
<script type="text/javascript" src="https://drive.google.com/file/d/0B6h45U6VDP-acDRPeDFFeXRCRE0"></script>
<script> jQuery(document).ready(function ($) { $("#default-usage .to-lock").socialLock({ text: { message: "Yes, this is Social Locker. Just try it, click on one of buttons." header: "Share it To Unlock This Content", }, style: "ui-social-locker-secrets", buttons: { order: ["twitter", "facebook", "google"] },
url: "http://www.twitter.com/bloggersmasher",
// twitter options twitter: { text: "Upgrade your social buttons to get more social traffic!" url: "http://www.facebook.com/bloggersmasher", }, // facebook options facebook: { appId: "408184442589211" url: "bloggersmasher.blogspot.com" }, google: { } });
});;;;
</script>
  • Now, Change The Following Highlighted Lines:
Change Add_Hidden_Image_Here with Your Hidden Image
Change Add Your Hidden Text Here with your hidden Text
Change bloggersmasher with your Twitter Username
Change bloggersmasher with your Facebook page Link
Change bloggersmasher.blogspot.com with Your Google plus Username

  • At Last, publish The post
Now, we've successfully added social content locker in our blog. If You Have any kind of problems, you can comment and I shall Help You. 
Happy Blogging!!!
Regards,
Nischal Khanal