How To Create A Social Content Locker For Blogger Blogs

Do you want to skyrocket your social media page subcribers and followers like a bang in a short period of time? Yes, Nah!

By implementing the Social Content Locker widget in your blog, You can really increase your Social media page fans a lot.By using this widget, you can lock any content you wish like Links, Images, Videos and Texts with social icons in front.This widget uses basic jQuery elements and some Javascript.

Check: 3 Type Of Popular Post Widget With Icons For Blogger

There is more than 4 Style to choose for your widget and make it attractive for your needs and requirements.

Preview:

How and Why To Use This Widget?

As said earlier this is a Social content locker widget by which you can hide things that you like in your blog posts.Now if a visitor wanted to view the hidden content then he/she should hit any of the social icons given and do subscribe, follow or like the specific social media page selected.

By using this method you can really boost your Social media pages fans a lot.

How To Add This Widget?


Step 1: Go to Blogger Dashboard > Template > Edit HTML

Step 2: Now press CTRL+F to launch the search box, Type and find </head> tag

Step 3: Paste the below given jQuery code just above the </head> tag.If you have already installed this code on your template then skip this step.
 <script src=’http://code.jquery.com/jquery-1.10.2.min.js’ type=’text/javascript’/>

Step 4: Now again find </head> tag and paste the below given Social Content Locker code just above the </head> tag.
 
<link href=’https://googledrive.com/host/0B_1mqJd2tC8qeDVzSnBJMDh5WUk’ rel=’stylesheet’/>

<script src=’https://googledrive.com/host/0B_1mqJd2tC8qbGdmQzRZVGk3bXM’ type=’text/javascript’/>

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

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

twitter: {url:”
http://twitter.com/IpeeWorld“},
facebook: {url:”
https://www.facebook.com/Ipeeworld“},
google: {url:”
https://plus.google.com/+Ipeeworld“},

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>
Changes To Make:
After pasting the above-given code, Next step is to make some changes as your case.
Replace the codes as given below
  • To change the button order, change the value like below
  1. facebook-like
  2. facebook-share
  3. google-plus
  4. google-share
  5. twitter-tweet
  6. twitter-follow
  7. LinkedIn-share

  • Now replace the URL with yours
  1. http://twitter.com/Ipeeworld
  2. https://www.facebook.com/Ipeeworld
  3. https://plus.google.com/+Ipeeworld

  • Next is to replace the heading and description that should appear in the box.Edit it as per your choice
  • Now change the theme of Social Content Locker from given themes
Default theme: “dandyish”

  1. flat
  2. glass
  3. starter
  4. secrets
  5. dandyish
That’s it Now hit on the Save Template button and Save the changes.


How To Add Social Content Locker To Blog Post?

We have successfully installed the Widget layout to our template, Next is to add this widget to your blog post.

Step 1: Open the specific post you want to add Social locker widget

Step 2: Step 2:  Now change the post editor mode to HTML and Add the below-given code to where you want to add the widget.
<article id=”default-usage”>
<div class=”to-lock” style=”display:none;”>
ADD YOUR CONTENT HERE
</div>
</article>
Step 3: Now replace ADD YOUR CONTENT HERE with any thing of your choice like Link, Images, Videos or anything.

Step 4: Now publish your article.
Now if anyone want to access the hidden content from your blog, Then they should do any of the task mentioned in the widget.
Hope you find this article useful.
Do comment if you face any error while adding this code to your blog, Also drop your feedbacks too.

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

2 thoughts on “How To Create A Social Content Locker For Blogger Blogs

  1. Need your help!!!
    After i follow everything that you mentioned in your blog, but my blog still shows nothing. please show an example of inserting those code and how to add content into html tab.

Leave a Reply

Your email address will not be published. Required fields are marked *