SocialLocker Maker Tool
close
SocialLocker Maker Tool

SocialLocker Maker Tool

×Info
Specify a CSS selector which matches the content you wish to lock.
×Info
Type a header which attracts attention or calls to action. You can leave this field empty.
×Info
Type a message which will appear under the header. HTML tags allowed.
×Info
Select the most suitable theme.
×Info
Choose the way how your locker should lock the content. The blurring mode works in all browsers except IE 10-11 (In IE 10-11, the transparency mode will be applied).
×Info
A position where the locker has to appear.
×Info
You can change the overlap intensity for the blurring mode.
×Info
Sets a countdown interval for the locker.
×Info
Shows the Close Icon at the corner.
×Info
If set On, the plugin will generate events for the Google Analytics when the content is unlocked.
Note: before enabling this feature, please make sure that your website contains the Google Analytics tracker code.
×Info
If on, the locker will appear always even if it was already unlocked.
Social Buttons
×Info
Select the language that will be used for the social buttons in Social Lockers (refresh the page to view changes for the Like and Google buttons).
×Info
If on, social buttons are loaded only at the moment when the locker gets visible on the screen (for better performance).
×Info
Display counters for social buttons (Tweet Button doesn't have counters).
This is the generated code which you have customized now you can copy it and use it. To use this code follow the steps provided below and do as it is said.

1. Include jQuery and the plugin files in to your page

Copy the code below and paste if just before </head> .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/softwebtuts/softwebtuts.com@10ea051e82047ef873bbf98b14ab90da6770e803/jquery.ui.highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/softwebtuts/softwebtuts.com@10ea051e82047ef873bbf98b14ab90da6770e803/pandalocker.2.1.0.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/softwebtuts/softwebtuts.com@7fbb7d9fca798da4baef2aeca3d35f30c2c5145e/pandalocker.2.1.0.min.css"/>
<script>//<![CDATA[
$(document).ready(function () {var credit = "<br/><a id='mycontentcredits' href='http://www.softwebtuts.com/' title='Softweb Tuts' ref='dofollow' terget='_blank'>Created From www.softwebtuts.com</a>";$(".onp-sl-message, .to-lock").append(credit);});
//]]></script>

2. Generate And Paste Locker Code

Then paste the locker code (after the code above and before the tag </head>). Don't forget to apply the CSS selector you set (by default, the CSS class 'to-lock') to content you wish to lock.

3. How to lock content ?

Copy the following code and replace Place Your Content Here with your content which you want to lock and replace YourClassSelector with your class.

<article id="default-usage">
<div class="YourClassSelector" style="display:none;">
Place Your Content Here
</div></article>

If You have any difficulty while making sociallocker watch this video below or contact me i am here to help you.


These are some required articles that might help you to do different things that i have done and shown in the above video.

More Options
Creating Facebook App
Getting Google Client ID
Using Events
Using Ajax
Troubleshooting


Disqus Codes

No comments

Notifications

Disqus Logo