Create a Social Content Locker In Blogger

SOCIALIZE IT →

Now a days almost every internet user is using social networking sites like Facebook, Twitter for connecting to world. Web master are also helped from social networking sites to build their site's audience, spreading their site and sending hot updates to their visitors. There are thousands of ways by which we can get traffic from social networking sites and also increase our social followers. So, Today here I'm going to share a social content locker widget that will help you to get more traffic and followers from social sites.

Social Content Locker Widget

This is an awesome social content locker widget that helps you to increase your social followers and drive more traffic from social sites. Basically, This widget locks the content and the user will have to click on any social button for unlock the content and then the content will be unlocked from locker. You can place this widget in blog posts and also in HTML/JavaScript Gadget. This widget has smartness and is dashing that will make your site more professional and specially it has a hover effect on buttons that really looks like a real locker. This widget consists of three social buttons which are Facebook Page like button, Tweet button and plus one button. You can have a demo of this widget by clicking the below button.

LIVE DEMO

Install Social Content Locker In Blogger

You can create this social locker widget in your blog easily by just following the simple steps. First step is to installing this widget in your and then we'll add this widget into your blog. So let's install this widget in your blogger blog.

Go To Blogger >> Template >> Edit HTML
Search For </head> and above it, paste the following code.

<link href='http://mybloggerlab.com/StyleSheet/locker.css' rel='stylesheet' type='text/css'/>

Click Save Template and let's jump to next step.

Add Social Content Locker In Blogger

Go To Blogger >> New Post >> Edit HTML
Copy The Following Code and Paste It In HTML Tab

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



<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>



</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/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.MyTechCafe.com",
text: "Upgrade your social buttons to get more social traffic!"
},

// facebook options
facebook: {
url: "http://www.facebook.com/MyTechCafe",
appId: "418044881593120"
},

google: {
url: "http://www.mytechcafe.com"
}
});
});;;;

</script>

Customization

Replace Add_Hideen_Image_Here With Your Your Image Link That You Want To Lock
Replace Add_Your Hidden_Text_Here With Your Text That You Want To Lock
Replace http://www.MyTechCafe.com With Your Blog Link
Replace http://www.facebook.com/MyTechCafe With Your Facebook Page Link
Replace http://www.mytechcafe.com With Your Blog Link.
Mission Complete !

Last Words

So friends, This was our great social content locker which will help you to easily increase your social followers and will also drive more traffic from social sites. I've tried my best to teach you that how can we install this content locker and even if you are facing any problem then let me know in comments.

Credits

Actually, This is a great plugin which is developed by codecanyon.net for WordPress sites and thanks to Syed Faizan Ali from MyBloggerLab.com who converted this great thing for blogger blogs.

29 April, 2013