Download Social Locker!
Social Locker is a set of social buttons and a locker in one bottle. It allows you to lock a part of content on a web page until a user clicks one of the social buttons (Facebook Like, Tweet Button, Google +1) and help you to get more likes/tweets/+1s, traffic and customers!
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:
<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.
0 comments:
Post a Comment