How To Add Social Content Locker In Blogger Blog (Working)

Blogger is a renowned and biggest free blogging platform. Blogger have heaps of elements which assist us with developing and make a stunning website. Doubtlessly couple of years back their was part of contrast in the middle of WordPress and blogger. As we can utilize WordPress as self facilitated so it was more adaptable on the grounds that numerous plugins are accessible in business sector. Be that as it may, Now Blogger acquaint numerous components which help with configuration an astounding web journal. Blogger is a piece of Google Inc. So every one of the websites are facilitated on Google servers. So we don’t have direct access to database. That is the reason which can do real changes in our online journal. We can plan our website in blogger as we need to do We can outline SEO cordial, responsive and distinctive format outlines. I officially recorded numerous best responsive blogger templates.

So today i am going to present another development gadget for blogspot clients that is Social Content Locked Widget. By utilizing this widget we can bolt any of the substance in our blog entry with social symbols. This plugin is essentially comprise of Jquery. There are a wide range of styles accessible for this widget. We can change symbols, style as we need to do. In any case, the fundamental reason for this plugin is just substance locking with social catch. So here is the best approach to Add Social Content Locked Widget In blogger blog.

First of all, open your blogger/ blogspot blog and visit to template Section.

Click on Edit HTML, In template coding search with Ctrl+f for </head> code.
After searching </head> code, paste the jQuery just above the code (given below). If the same jQuery library is available there, do not need to paste jQuery once again.

After installing jQuery, we need to add codes for ‘Social content locker’ which are shown below.
Copy the below given code and paste above the </head> Which we had searched in last step.

[php]</div>
<link href=’https://googledrive.com/host/0B_1mqJd2tC8qeDVzSnBJMDh5WUk’ rel=’stylesheet’/><script src=’https://googledrive.com/host/0B_1mqJd2tC8qbGdmQzRZVGk3bXM’ type=’text/javascript’/>

buttons: {order:[“facebook-like”,”twitter-tweet”,”google-plus”]},

twitter: {url:”http://twitter.com/geeksflame”},
facebook: {url:”https://www.facebook.com/varundeep.singh75”},
google: {url:”https://plus.google.com/+geeksflameblog”},

text: {
header: “Like us To Unlock This Content”,
message: “This content is locked. Like us on Facebook, Twitter or Google plus to unlock it.”
},

locker: {close: false, timer: 0,},

theme: “dandyish”

});
});
//]]>
</script>

[/php]

After Pasting the above given code, you need to do a little bit customization, which are as follows:-

Replace the codes by matching color codes given to text in coding and also in below settings.
To Change the Order of Button, sort the values by your own.

“facebook-like”
“facebook-share”
“google-plus”
“google-share”
“twitter-tweet”
“twitter-follow”
“linkedin-share”

Simply change the button and their order if you want.
Now Replace The URL With your own URLs

http://twitter.com/geeksflame
https://www.facebook.com/varundeep.singh75
https://plus.google.com/+VarundeepSinghReal

After Replacing URLs, you have to replace the text for heading and the message which will appear on your social locker.
Then you can also Change the Theme of Social Content Locker Widget.

Current theme – “dandyish“

Some other themes are as follow:

“glass”

“flat”

“secrets”
“starter”

“dandyish”

To add social locker within your blog post, simply copy the code given below and paste it into HTML tab of your blog’s post in Edit Post section.

[php]</div>
<div class=”coding”><article id=”default-usage”>
<div class=”to-lock” style=”display:none;”>
- ADD YOUR CONTENT HERE -
</div>
</article></div>
<div class=”coding”>[/php]

Then Replace the – ADD YOUR CONTENT HERE – code with the text, URL, video, image or anything what you want to add behind the social locker.
Now Publish your post and see Social locker working live. If anybody wants to access locked content, He/she have to share the article on any of the listed social networks.

I hope you enjoy this article. If you are facing any kind of difficulty while usiong above given codes feel free to ask me in comment.

4 comments

Muhammad Muneeb says:
April 12, 2017 at 10:53 pm
Not Working Dude :/
Ravindra says:
July 25, 2017 at 7:32 am
Not Working I want to add a Video in Blogger Post, to access the Content, Visitor should watch minimum amount of Video.
Please help me how to Lock the Content, the above method is not working
hamza says:
November 25, 2017 at 1:24 pm
Hello bro it is not working. Please update it.
kuldeep says:
March 18, 2018 at 1:07 am
can u pls send me its html code. methord ..{.blogger}