How To Create Social Content Locker In Blogger



Go To Blogger Setting And Click Theme Option

Click Gear Setting Icon And Click Edit HTML

Now Press Ctrl+f And Search ''jquery'' Without Quote .If  ''jquery'' Code Not Available Then Copy Below Code And Paste Blow <head> tag

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

Now Search </head> And Copy Below Code And Paste Above or Below </head> Tag.

<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style-ver2.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script-ver2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({

    buttons: {order:["facebook-like","twitter-tweet"]},

    twitter: {url:"https://twitter.com/tamilblogger360"},
    facebook: {url:"https://www.facebook.com/tamilbloggers360/"},

    text: {
      header: "Like us To Unlock This Content",
      message: "This content is locked. Like us on Twitter, Facebook to unlock it"
    },

    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>

3rd HTML code Inside The Post

<article class="socialLocker">
 <div class="to-lock" style="display:none;">
-- Your Content --
</div>
</article>


Don't Forget To Replace Your Facebook And Twitter   

Page Link

Mention In Red Colour






Post a Comment

0 Comments