Social Content Locker In Blogger blogs



Lots of Blogspot blogger searching for social content locker for blogger, and i found it in working condition for this site
http://mostsharedposts.blogspot.com/2014/12/social-content-locker-for-blogger-blogspot.html

Follow these steps to enable social content locker in your blog. or visit site to see original content.



Note: backup your template before start!

Go to 'Template' and click 'Edit HTML
Search <head> tag and  add this line after <head> tag





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

   
Now search </head> tag

and past this code before </head> tag






<link href='https://sites.google.com/site/menightfury/home/social-locker/public/sociallocker_v1.6.0.css' rel='stylesheet'/>
<script src='https://sites.google.com/site/menightfury/home/social-locker/public/sociallockermin_v1.6.0.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:"https://www.facebook.com/www.mostsharedposts"},
    facebook: {url:"https://www.facebook.com/www.mostsharedposts"},
    google: {url:"https://plus.google.com/u/0/b/110589424466302901501/110589424466302901501"},

    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>
Change red links with your own social links.


Adding more social buttons


In this script, there are only 3 buttons
facebook like, tweet, and G+

you can add more button by adding code from below
There are seven buttons available for content locking.

    • "facebook-like" 
    • "facebook-share" 
    • "google-plus" 
    • "google-share" 
    • "twitter-tweet" 
    • "twitter-follow"    
    • "linkedin-share" 
    to add more buttons add code in this line from above code.
    buttons: {order:["facebook-like","twitter-tweet","google-plus"]},

    Writing a post


    In you blogger post html section add this code and replace green text with the text you want to hide:)
    wow its really simple!

    <article id="default-usage">
    <div class="to-lock" style="display:none;">
    Hello i am the hidden content
    </div>
    </article>

    SHARE

    About Nabeel Saleem

    Working in a company called ibnesinstudios, as a game level designer, love to make and play games! :)
    Also running a Virtual Reality Blog!

      Blogger Comment
      Facebook Comment

    2 comments:

    1. Did you know that that you can generate cash by locking special sections of your blog or site?
      All you need to do is to join AdscendMedia and implement their Content Locking tool.

      ReplyDelete