Home / Blogger Widgets / Blogging / Free Social Content Locker for Blogger [FreeSV]

Free Social Content Locker for Blogger [FreeSV]

,
After using multiple sharing widget in your blogger, is your social exposure is on the lower side? Do you think that people read your content, but in spite of sharing or liking your content, they just read and leave? Do you have a feeling that they completely ignore whether your website has traffic or not. Well, in that case you have to drive your readers to like or share your page in order to discover your content. This is likely the best means to increase your social traffic, especially for those design sites that shares free resources.
Locking the entire page by some pop up probably the worst idea because this fails to showcase the importance of your content. That's why this locker is designed to lock a specific part of your page instead of the entire page. It can lock any part of your webpage and can be implemented infinite times on a single page. You can even change the appearance of this locker to your custom style.

Before you proceed to make any customization in your blogger template, it is recommended to backupyour blog in case something goes wrong.
Let's start. 
  1. Go to 'Template' and click 'Edit HTML'.
  2. Make sure whether jQuery library is already included in your blog. If not, search for ( Ctrl + f )<head> and write down the following line just below <head>.
    3.  
    <script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
 
     
  3. Now search for (Ctrl + f ) </head> and paste the following code before </head>.




     
    <link href='http://rawgit.com/menightfury/social-locker/master/style.css' rel='stylesheet'/>
<script src='http://rawgit.com/menightfury/social-locker/master/script.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:"http://twitter.com/world4usin"},
    facebook: {url:"https://www.facebook.com/world4us.in"},
    google: {url:"https://plus.google.com/+world4usin"},

    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>


    Customization Buttons
There are seven buttons available for content locking. These are, 
  • "facebook-like" 
  • "facebook-share" 
  • "google-plus" 
  • "google-share" 
  • "twitter-tweet" 
  • "twitter-follow"     and
  • "linkedin-share" 
You can apply any number of buttons for your site. You can even change the order of these buttons in theorder:[] option (index 8 of the code). Separate each button by a comma (,).
Remember, for every button you inserted, you have to supply a URL link of your social media page. However for similar types of buttons like "facebook-like" and "facebook-share" or "google-plus" and "google-share", only one link has to be provided. For instance, my facebook page url ishttps://www.facebook.com/world4us.in.nightfury which i can use for both "facebook-like" and "facebook-share" buttons (index 10, 11 and 12 of the code).
Text
This section consists of two sub-sections. These are "header" and "message"; "message" appears under the "header". You can modify the content of these two sub-sections of your own or you can leave these fields empty. Detailed description of "header" and "message" is depicted below (index 15 and 16 of the code).
  • header
  • message

Theme
This specifies the visual aspect of your locker. There are five predefined locker themes available. You can select any of the following styles (index 20 of the code).
  • secrets

  • dandyish

  • flat

  • glass

  • starter
However the style is "starter" by default, i.e. you can even leave this field empty.
Additional Customization
 Timer
A countdown timer will be displayed if you choose any integer value. For instance, if you want to close your social locker after 300secs, you can insert timer: 300 in your code. A 0 value of timer indicates infinite time (index 19 of the code).

Close
Change your code from close: false to close: true in order to display a close icon at the corner of your locker (index 19 of the code).
 




  • Now whenever you are interested to display social content locker in your blog post, wrap your code within this snippet of code.



    •  
    <article id="default-usage">
 <div class="to-lock" style="display:none;">

  -- Hidden Content Starts --

 </div>
</article>


    Credit
    This awesome widget is created by Onepress-media for Wordpress blog.

    Happy Blogging

    Free Social Content Locker for Blogger [FreeSV] Free Social Content Locker for Blogger [FreeSV] Reviewed by FreeSV on 7:48:00 PM Rating: 5

    No comments:

    Subscribe to: Post Comments ( Atom )
    Powered by Blogger.