How To Add Social Content Locker In Blogger Blog

Today Skilztools will share this Interesting and Must Have Widget in Blogger for Bloggers so we can easily increase our followers, your tweets, your shares and Facebook Page Likes

Why You Need It?

The Reason we Need this widget is that we make posts and many useful tricks for free and people who visit our blog post do not like or recommend our post or page.This is totally unfair for bloggers.We are helping them and they do not even like our pages.So it is now our main need in hour to have such a widget or script so that people like us our pages and so that increase our exposure on social networks too.You may Have tried many Widgets on the Internet but all in vein and with no fruits.So This method will surely work for you just Follow us.

What Will We Do?

We will add a Jquery Script so that people who want to see our post or our content which we have made with our precious time.We will Add a Content Locker in which our Social Bookmarks will be added that are Facebook,   Twitter   and   Google+ Pages.

Method:

1First of all please take Full Template Backup so that if anything Happened Wrong,You will be able to revert all changes to Zero from where you started this method.But i am sure that it will work for you.


2Now Go to Your Blogger, Log in and Move on to Template Section and Click on Template and then on Edit HTML. Like in Picture Below.

3Now this is the Part of Trick.You need to make sure that the Jquery Script is already added in your HTML or not.For this Purpose in HTML Section,Click   CTRL + F   to open the search bar and search for below HTML Script.If you find the below script in your HTML then no need of adding it again but if there is no such script then add it manually just below </head>

 <script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/> 

Like us To Unlock This Content

This content is locked. Like us on Twitter, Facebook or Google plus to unlock it.

share

tweet

error

error

+1 us

4Now search for </head> in your HTML and Paste the code  above it

<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script.js' 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/ifeskilz_"},
facebook: {url:"http://facebook.com/skilztools"},
google: {url:"https://plus.google.com/u/0/+IfedIfeskilz"},

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

    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>

5Now whenever you want to Hide some Content, either images,videos or article, Just paste the below HTML code in your HTML section of Post as described in the Video and Replace it with -Your Content- 

<article id="default-usage">
 <div class="to-lock" style="display:none;">

  -- Your Content which you want to Lock or Hide --

 </div>
</article>

Customizations For Social Content Locker

After Pasting all the above given codes now you need to do little bit customization Which are as following:-

• Replace the codes by matching color codes given to text in coding and also in below settings.
• To Change Order of Button Simple The Values With each other.

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

• Simple change the button and their order if you want.
• Now Replace The URL With your own Yours

http://twitter.com/ifeskilz_
http://facebook.com/skilztools
https://plus.google.com/u/0/+IfedIfeskilz

• After Replacing URLs Next step is to replace text for heading and message which will appear on your social locker.
• Further Step is To Change the Theme of Social Content Locker.

theme: “dandyish“

• From the above codes replace the value for theme with below given codes.

“flat”
“glass”
“starter”

“secrets”
“dandyish”

How To Add Social Content Locker I Blog Post.

• After adding and replacing values for all the above given codes successfully.

Note:If you like or Unlock the Locker Once,It will not appear for you on that page again within some time so Don't worry if it is not appearing again for you, it will be there for every new Comer.

Feel free to ask question If you are finding it difficult to implement the social content locker on your blog.