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

Share this

Related Posts

Previous
Next Post »

4 comments

comments
July 22, 2016 at 5:49 AM delete

I am unable see the first screenshot of your post. Anyways the post was very informative one
Web Design Company in Bangalore | Website Development Services in Bangalore

Reply
avatar
February 25, 2017 at 7:48 PM delete

WHATS YOUR FCKING PROBLEM WITH THIS FCKING SHIT AGRESSIVE ADS

WHAT A LAME FCKING LAME

Reply
avatar
March 1, 2017 at 2:36 AM delete

Thanks for the excellent blog post! I actually experienced studying it. You’ll be an excellent writer. I love to post a comment that "The content of your post is miraculous ". This information is stunning. I would like to suggest your blog in my friend’s circle. So, please keep on update like this post.
Engineering Colleges, Mechanical Engineering Colleges in Chennai

Reply
avatar