"social hidden content"
Bootstrap 3.3.0 Snippet by thanhthanh

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="http://demo.phpgang.com/social-locker-jquery/social-locker.js"></script> <script type="text/javascript"> </script> <style type="text/css"> </style> <div id="lock-my-div" style="display: none;"> <p> <!-- YOUR CONTENT GOES HERE --> </p> </div>
.jo-sociallocker.jo-sociallocker-msie { background-color: hsl(200, 65%, 91%); border-color: hsl(190, 65%, 84%); color: hsl(200, 50%, 45%); } .jo-sociallocker { background-color: hsl(50, 81%, 94%); border: 1px solid hsl(39, 83%, 91%); -moz-border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px; margin-bottom: 20px; padding: 8px 35px 8px 14px; -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 hsla(0, 100%, 100%, 0.5); width:60%; margin-left: auto; margin-right: auto; } .jo-sociallocker-button{ float: left; margin-left: 10px; } .jo-sociallocker-after-text{ margin-bottom: 20px; } .jo-sociallocker-buttons{ height:35px; } .jo-sociallocker-strong{ font-size: 30px; color: hsl(0, 0%, 0%); }
jQuery.noConflict(); jQuery(document).ready(function ($) { $("#lock-my-div").sociallocker({ text: { header: "The content is locked!", // replace content with this heading message: "Please support us, click like button below to unlock the content." // hidden content message }, theme: "starter", // Theme locker: { close: false, timer: 0 }, buttons: { // Buttons you want to show on box order: ["facebook-like", "twitter-tweet", "twitter-follow", "google-plus", "linkedin-share"] }, facebook: { appId: "2068418453432508", like: { title: "Like us", url: "https://www.facebook.com/9H9Gang" // link to like in Facebook button } }, twitter: { tweet: { title: "Tweet", text: "PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos.", // tweet text url: "http://www.phpgang.com/" //tweet link }, follow: { title: "Follow us", url: "http://twitter.com/phpgang" // Twitter profile to follow } }, google: { plus: { title: "Plus +1", url: "http://www.phpgang.com/" // Google plus link for +1 } }, linkedin: { url: "http://www.phpgang.com/", // LinkedIn url to share share: { title: "Share" } } }); });

Related: See More


Questions / Comments: