Most probably many of we bloggers prefer to get something in return when we have worked for something extremely hard. Atleast not for money but for atleast that more people can find our way hardwork.
For all those blogger here is a Content Locker Widget cum Gadget For Blogger Websites which helps you to lock the content until the user has not clicked on desired buttons.
With this the websites will get more customer reach than that of usual.
Follow the following steps to install this free widget instantly in your blog/website
Let's start.
1. Go to 'Template' and click 'Edit HTML'.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript' />
3. Now search for </head> and paste the following code before </head>.
<link href='http://files-all-tech-corner.googlecode.com/svn/trunk/sociallocker.css' rel='stylesheet'/> <script src='http://files-all-tech-corner.googlecode.com/svn/trunk/sociallockermin.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/iammuji"},
facebook: {url:"https://www.facebook.com/bforblogger"},
google: {url:"https://plus.google.com/+Bforbloggerofficial"},
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>
Customization
Buttons There are seven buttons available for content locking. These are,
"facebook-like"
"facebook-share"
"google-plus"
"google-share"
"twitter-tweet"
"twitter-follow" and
"linkedin-share"
You can apply any number of buttons for your site. You can even change the order of these buttons in the
Remember, for every button you inserted, you have to supply a URL link of your social media page. However for similar types of buttons like "facebook-like" and "facebook-share" or "google-plus" and "google-share", only one link has to be provided. For instance, my facebook page url is https://www.facebook.com/bforblogger which I will use for both "facebook-like" and "facebook-share" buttons.
Theme This specifies the visual aspect of your locker. There are five predefined locker themes available. You can select any of the following styles (Line 20 of the code).
However the style is "Starter" by default, i.e. you can even leave this field empty.
Close Change your code from close: false to close: true in order to display a close icon at the corner of your locker (Line 19 of the code).
Now whenever you are interested to display social content locker in your blog post, wrap your code within this snippet of code.
I tried my best to keep things as uncomplicated as possible. If you still have any doubts hope you will use the comment box below.
order:[] option (index 8 of the code). Separate each button by a comma (,).Remember, for every button you inserted, you have to supply a URL link of your social media page. However for similar types of buttons like "facebook-like" and "facebook-share" or "google-plus" and "google-share", only one link has to be provided. For instance, my facebook page url is https://www.facebook.com/bforblogger which I will use for both "facebook-like" and "facebook-share" buttons.
Theme This specifies the visual aspect of your locker. There are five predefined locker themes available. You can select any of the following styles (Line 20 of the code).
 |
| secrets |
 |
| dandyish |
 |
| flat |
 |
| glass |
 |
| starter |
Additional Customization
Timer A countdown timer will be displayed if you choose any integer value. For instance, if you want to close your social locker after 300secs, you can insert timer: 300 in your code. A 0 value of timer indicates infinite time (Line 19 of the code).Close Change your code from close: false to close: true in order to display a close icon at the corner of your locker (Line 19 of the code).
Now whenever you are interested to display social content locker in your blog post, wrap your code within this snippet of code.
<article id="default-usage">
<div class="to-lock" style="display:none;">
-- Hidden Content Starts --
</div>
</article>
Credit
This awesome widget is created by Onepress-media for Wordpress blog.I tried my best to keep things as uncomplicated as possible. If you still have any doubts hope you will use the comment box below.
