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>