Lock Donload Link With Share To Unlock Widget in Blogger

This Social Locker (Share-To-Unlock) widget 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.

How To Add Social Content Locker in Blogger?

The Steps are extremely straightforward and easy that even a novice can do it. You musnt be a HTML guru or whatever because all we have to do is to copy paste the code into your blogger template editor. Follow the following instructions. 

• Go To Blogger.com >> Template >> Edit HTML.
• 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'/>

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

How To Add Social Content Locker in Blogger

Whenever you wants to add a Social Content locker in an article or post, just 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)-->

</article> 

</div><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://twitter.com/StefnSylvester",

text: "Upgrade your social buttons to get more social traffic!"

},

// facebook options

facebook: {

url: "http://www.facebook.com/XclusiveTech",

appId: "408184442589211"

},

google: {

url: "http://xclusivedroidapk.blogspot.com/"

}

});

});;;;

        

</script>

Customization

• For Facebook: Replace http://www.facebook.com/XclusiveTech with your Facebook Page.
• For Twitter: Replace http://www.twitter.com/StefnSylvester with your Website's URL or etc. 
• For Google+: Replace http://xclusivedroidapk.blogspot.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. 

Bravo!!!: 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)]