How To Install Social Content Locker in Blogger

on Rabu, 04 Desember 2013

Go To >> Template >> Edit HTML >> Proceed.

Search for just and above it paste the following CSS Coding.

<link href='' rel='stylesheet' type='text/css'/>

Go To >> New Post.
Select the HTML Tab from the blogger post editor and paste the following coding.

    <article id="default-usage">

    <div class="to-lock" style="display: none;">


    <!--Hidden Content Starts (You can Use HTML BELOW)-->

    <div style="text-align: center; margin-bottom: 20px;">

    <img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />


    <div style="text-align: justify">

    Add Your Hidden Text Here


    <!--Hidden Content Ends (You can Use HTML ABOVE)-->


    </div><div id="mblunlocker"> </div>

    <script type="text/javascript" src=""></script>


    jQuery(document).ready(function ($) {

    $("#default-usage .to-lock").socialLock({

    text: {

    header: "Share it To Unlock This Content",

    message: "Yes, this is Social Locker. Just try it, click on one of buttons."


    style: "ui-social-locker-secrets",

    buttons: {

    order: ["twitter", "facebook", "google"]


    // twitter options

    twitter: {

    url: "",

    text: "Upgrade your social buttons to get more social traffic!"


    // facebook options

    facebook: {

    url: "",

    appId: "1394797800765536"


    google: {

    url: ""






For Facebook: Replace with your Facebook Page.
For Twitter: Replace with your Website's URL or etc.
For Google+: Replace with the URL of your website or post.
Replace Add_Hidden_Image_Here with the Image that you want to Hide.
Replace "Add Your Hidden Text Here" With the text that you want to hide from users.

Remember: Don't forgot to Add Facebook App ID otherwise the Facebook Like button will not appear properly. i.e. Replace 1394797800765536 from above coding. 
© Geazzy Corner All Rights Reserved