Plugin: Social Locker for jQuery
Version: 1.3.0+

This article describes how to install Social Locker for jQuery on the Blogger platform.

Blogger doesn’t allow to upload files on its server. So at first you have to find an appropriate place where you could upload (host) files of Social Locker. One of possible ways is to use Dropbox or Google Drive.

I. Adding links to Social Locker scripts and styles into a current Blogger template.

1. Move to the Template settings of your blog:

2. Click the Edit HTML button:

3. Search for the starting <head> tag in the editor:

4. Add the links to the plugin files you uploaded earlier (for example on Dropbox or Google Drive) after the tag (click to zoom):

The same code as in the image:

<script src='http://example.com/path/to/files/js/libs/jquery.min.js'/>
<script src='http://example.com/path/to/files/js/jquery.op.sociallocker.min.js'/>
<link href='http://example.com/path/to/files/css/jquery.op.sociallocker.min.css' rel='stylesheet' type='text/css'/>

5. Open source code of the example “1-usage-example.html” in the archive you got from CodeCanyon.

6. Copy from there the <script> </script> tag and its content and insert it after the links you added above:

7. Search for the selector “#default-usage .to-lock” in the code you inserted:

8. And replace it with the selector “.to-lock”:

9. Edit options of the locker in the code you inserted (by following the documentation you got with the plugin) or leave them without any changes and edit them later.

10. Save the template.

II. Locking content in a Blogger post via the css class “to-lock”

1. Open a post where you would like to lock some content.

For example your post looks like this and you would like to lock a download link:

2. Switch to the html mode:

3. Wrap the download link by using a <div> </div> tag with a class “to-lock”:

4. Save post.

Now if you open your post in the view mode, you will see that the download link is locked.

Leave a Reply

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