How To Create a Social Content Locker in Blogger BlogSpot

How many people are using Social networking websites to boost their Website’s Traffic? There are tons of professional Bloggers who entirely depends on the Social Traffic. However, it is extremely difficult to get social exposure quickly. Though, there are some widgets which help to increase social followers, but it is not enough. If we want to dominate the social web, then we have to make use of each and every opportunity that we have. For that reason, we have come up with one of the much anticipated Social Widget of all time, Social Content Locker. 

Do you use multiple social sharing widgets on each and every page of your site? However, still your social exposure is on the lower side. Actually, the problem is that, people love your content. Therefore, they don’t click the social buttons and instead Read and leave your website because they don’t care about your traffic or your website. Asking people to like, +1 or tweet to get access to your content is indeed an ideal way of forcing users to share it on the social web. 

Social Content Locker for Blogger Live Demo

Digital Hub Inc.

Social Locker consists of three social buttons and a locker displaying horizontally. The Social buttons consist of Facebook, Twitter and Google plus. Whenever, a person would either press Like, Tweet or Plus one button it would display the hidden content. This allows a person to get more real social followers. Feel Free to enjoy the Following Real time Demo. 

Live Demo

How To Install Social Content Locker in Blogger?

The Steps are extremely straightforward that even a small kid can follow it. There is no need of learning any Html coding because all we have to do is to copy paste the coding. Just follow the following instructions. 

• Go To Blogger.com >> Template >> Edit HTML >> Proceed.
• Search for </head> just and above it paste the following CSS Coding.

<link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/>

Recommended Post : How to create Responsive google adsense ads on your website 2013

• After pasting the coding save the template and proceed to next step.

How To Add Social Content Locker in Blogger

Now whenever a person wants to add a Social content locker in his specific article, then he can follow the following instructions. (Remember: The same steps can also be used on Gadget Area and even in a template).  

• Go To Blogger.com >> New Post.
• Select the HTML Tab from the blogger post editor and paste the following coding.

<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)-->
</div>

</article> 
<div id="mblunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.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.digitalhubinc.com/",
text: "Upgrade your social buttons to get more social traffic!"
},

// facebook options
facebook: {
url: "http://www.facebook.com/digitalhubinc",
appId: "408184442589211"
},

google: {
url: "http://www.digitalhubinc.com/"
}
});
});;;;
        
</script>

Customization

• For Facebook: Replace http://www.facebook.com/digitalhubinc with your Facebook Page.
• For Twitter: Replace http://www.digitalhubinc.com/ with your Website's URL or etc. 
• For Google+: Replace http://www.digitalhubinc.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 408184442589211 from above coding. 

All Done: That's All, we hope this widget would help everyone to magnetize more social followers on your website. Feel free to leave your comment.

Widget Created By : http://www.mybloggerlab.com/  

[ Syed Faizan Ali (Founder of MyBloggerLab)]