How To Create a Social Content Locker in Blogger 2016

Hey Whats up Guys! 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. For that reason, Today I gonna going to show yo How to create a  Social Content Locker in Blogger. 

Let Start it below:

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. See the Demo To get idea.

SHARE IT TO UNLOCK THIS CONTENT

Yes, this is Social Locker. Just try it, click on one of buttons.

Tweet

How to Install Social Content Locker:

Now Just follow the following steps to get started. 

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

How to Add Social Content Locker in Blogger?

1.Go to Blogger Dashboard and click on New Post.

2.Now click on HTML tab and paste the below 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>

<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://www.twitter.com/blogging111",

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

},

// facebook options

facebook: {

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

appId: "418044881593120"

},

google: {

url: "http://www.mybloggeingschool.blogspot.com"

}

});

});;;;

        

</script>

Must replace the below things:

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

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

For Google+: Replace http://www.mybloggingschool.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.

And That's All Done!!!!!!

I hope that after reading this article you easily Create a Social Content Locker in Blogger.If you like this article share it on social media to help other blogger friends.

Let me know you if you have any problem regarding to this article.If you have any problem you can ask me in comment box.Thanks for reading this article.Stay tuned for more lectures.