Bootstrap Snippet social hidden content using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.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%);
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 
                }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"social hidden content"
Bootstrap 3.3.0 Snippet by thanhthanh

Related: See More

Questions / Comments:

"social hidden content" Bootstrap 3.3.0 Snippet by thanhthanh

Related: See More

Questions / Comments:

"social hidden content"
Bootstrap 3.3.0 Snippet by thanhthanh