2U4JOY

<div id="chest"> <h2 class="content-hint">Show some hint about your secret content here</h2> Your precious content here.... </div> The second one will act as a “locker”, it’s another div that will float above the original content. You should put it in the footer.php of your theme to call it out anytime we need it. Below it’s my “locker”.

<div id="lock">
    <div class="lock_content">
        <p class="locker-title"><i class="fa fa-lock"></i> TREASURE CHEST <i class="fa fa-lock"></i></p>
        <p class="content-hint" style="">Show some hint about your precious content here</p>

        <!-- this part will show social sharing button, I use facebook, you can change it to whatever you like -->

        <div class="fb-like" data-href="" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true"></div><br /><br />

        <!-- this part will show the countdown -->

        <p>You can wait for <strong id="countbox"></strong> to get the hidden content, or just <strong><i class="fa fa-facebook-square"></i> share</strong> to see it now. Sharing is the key to succeed!</p>

        <p class="unlock-now"><i class="fa fa-key"></i> UNLOCK NOW! <i class="fa fa-key"></i></p>
    </div>
</div>