A Flame Spreading Tips & Tricks

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

3 472

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.

How-To-Create-Social-Content-Locker-In-Blogger-blogspot-Blogs

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.

Method To Add “Social Content Locker” To Blogger

  • First of all, open your blogger/ blogspot blog and visit to template Section.
social content locker for blogger blog
  • 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.
 <script src=’http://code.jquery.com/jquery-1.10.2.min.js’ type=’text/javascript’/>
  • 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>
<em><link href=’https://googledrive.com/host/0B_1mqJd2tC8qeDVzSnBJMDh5WUk’ rel=’stylesheet’/></em><em><script src=’https://googledrive.com/host/0B_1mqJd2tC8qbGdmQzRZVGk3bXM’ type=’text/javascript’/></em>

<em><script type=’text/javascript’></em>
<em>//<![CDATA[</em>
<em>jQuery(document).ready(function ($) {</em>
<em>$(‘#default-usage .to-lock’).sociallocker({</em>

<em>buttons: {order:[“<b>facebook-like</b>”,”<b>twitter-tweet</b>”,”<b>google-plus</b>”]},</em>

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

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

<em>locker: {close: false, timer: 0,},</em>

<em>theme: “<b>dandyish</b>”</em>

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

[/php]

Customizations Of “Social Content Locker” Widget

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”

How To Add “Social Content Locker” Into Blog Post

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”><em><article id=”default-usage”></em>
<em><div class=”to-lock” style=”display:none;”></em>
<em><b>- ADD YOUR CONTENT HERE -</b></em>
<em></div></em>
<em></article></em></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.

3 Comments
  1. Muhammad Muneeb says

    Not Working Dude :/

  2. Ravindra says

    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

  3. hamza says

    Hello bro it is not working. Please update it.

Leave A Reply

Your email address will not be published.