Create Social Content Locker (Share To Unlock) In Blogger

In today's post I am going to share a tricky trick that will help blogger users to hide their content and it will be only visible after a user shares that content. Yes, I know you are shocked but it is possible. This is very simple trick and requires just nothing except some straightforward easy scripts. Let us talk about look, features and uses first. When you add this to specific post for particular content or the download links it will look like following and when visitor shares to unlock it will disappear and will be replaced with the hidden content.

Features:

1) A very simple but attractive look.

2) Easy to access and no confusion for a visitor.

3) Twitter, Facebook and Google Plus buttons added.

4) You can add more buttons means easy to customize.

5) It will help you to increase your social enhancement.

Uses:

1) The main use of this plugin is to hide any type of content in your post.

2) Most of bloggers use it to lock the download links.

3) To increase social appearance in targeted users as content will be shared by a person who works in the same field.

How To Install Social Content Locker:

1) Log in to blogger and go to the template.

2) Edit HTML>> press CTRL+F to search the following code:

</head>

3) Above </head>  paste the following script:

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

4) Save the template now.

How To Hide Content With Social  Content Locker:

Follow these steps to lock the particular content in a post.

1) Go to Blogger and create a new post.

2) Select HTML tab in the post editor and paste the following code:

<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/TricksDroid",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/TricksDroid",
appId: "408184445628791"
},
google: {
url: "http://plus.google.com/+TricksDroidPage"
}
});
});;;;
       
</script>

Customization: 

For Facebook: Replace http://www.facebook.com/TricksDroid with your Facebook Page.

For Twitter: Replace http://www.twitter.com/TricksDroid with your Website's URL or etc. 

For Google +: Replace http://plus.google.com/+TricksDroidPage with the URL of your website or post.

Replace 408184445628791 with your Facebook app id.

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.

3) Publish your post now. That's it :) :)

Final Words:

You have successfully locked the content you want very easily. But here is a free advice from me that do not lock the content from the every post you publish because this may bring adverse effects and disadvantages like you can loose your daily visitors. Hope you enjoyed the post and will help you to increase your social appearance. I have not locked this post because I know you will share it without any force from me :p Thanks for sharing. Keep visiting, Good Day :)

Content Worth A Share ?

• Facebook
• Twitter
• Google+
• Pinterest
• StumbleUpon
• Dig
• LinkedIn

Written by Unknown

Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)