how to show share to unlock content in blogger blog

share to unlock content is the best plugin. maybe you have seen this plugin in many WordPress websites. they use it for increasing numbers of sharing their content on social sites. as we know many people read our posts but only few press the share button. but with this plugin, we can hide our specific contents.
and the message visitor will see on those contents is the share to unlock. share to unlock plugin is now available for blogger blogs. yes, now you can use this plugin on your blogger blogs. in this post, I am going to show you how to show share to unlock content in blogger blog.

add the share to unlock content in blogger blog

1. go to the blogger.com and log in your account.
2. now select your blog where you want to add this plugin.
3. from the blog, dashboard click on template option. 
4. now from the next page click on edit HTML button. 
   
5. you will see your template code click anywhere on the code. and search </head> by press ctrl+f. after finding the </head> paste the following code just before it. 

   

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

6. now search the </body> and paste the following code just before it.

   <style>
   .secret {
    text-align:center;
    display:none
   }
   .secret-share {
       padding: 20px;
       text-align: center;
       border: 3px solid #ddd;
       background: #f8f8f8;
   }
   a.download-btn {
       text-transform: uppercase;
       font-size: 22px;
       background: #7b7b7b;
       padding: 10px 20px;
       display: inline-block;
       border: 1px solid #000000;
       text-decoration: none;
       color: #fff;
   }
   .secret-share .fb-like {
    margin-top: 0;
    top: -7px;
    position: relative;}
   .secret-share .twitter-share-button {
       margin-right: 25px;
   }
   </style>
   <script type='text/javascript'>
   //<![CDATA[
   /* Facebook */
   (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
   window.fbAsyncInit = function() {
       // init the FB JS SDK
       FB.init({
         status     : true,                          
         xfbml      : true                            
       });
       FB.Event.subscribe('edge.create', function(href, widget) {
           $.event.trigger({
               type: "pageShared",
               url: href
           });
       });
   };
   /* Twitter */
     window.twttr = (function (d,s,id) {
     var t, js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
     js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
     return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
   }(document, "script", "twitter-wjs"));
   twttr.ready(function (twttr) {
       twttr.events.bind('tweet', function (event) {
           $.event.trigger({
               type: "pageShared",
               url: event.target.baseURI
           });
       });
   });
   /* Google Plus */
   (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
   function plusOned(obj){
       console.log(obj);
       $.event.trigger({
           type: "pageShared",
           url: obj.href
       });
   }
   /* Listen for the pageShared event */
   $(document).on('pageShared',function(e){
       if(e.url == window.location.href){
           $(".secret").show();
           $(".secret-share").hide();
       }
   });
   //]]>
   </script>  

7. now click on save template button.
8. now go to the posts and edit your desired post where you want to hide the contents. and paste the following code in HTML editor.

   <div class="secret">
   YOUR CONTENT THAT YOU WANT TO HIDE..................</div>
   <div class="secret-share">
   <p>share on Facebook / Twitter / Google to unlock hidden content.</p>
   <span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="helponblogging.blogspot.com" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>

in the above code just replace YOUR CONTENT THAT YOU WANT TO HIDE......... with your contents. that's it the work is done. now whenever you want to hide your contents you can use the above script.
thanks for reading my this post. keep visiting for more useful posts. if you have any question about this post you can ask me by dropping your comments below.