How To Install Social Content Locker in Blogger

on Rabu, 04 Desember 2013

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

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

<link href='https://googledrive.com/host/0B-vz7n1QSdEfMDZiZXpOR1VCcWs' rel='stylesheet' type='text/css'/>


Go To Blogger.com >> 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>

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

    Add Your Hidden Text Here

    </div>

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

    </article>

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

    <script type="text/javascript" src="https://googledrive.com/host/0B-vz7n1QSdEfUUR4dVRTUkdSVTA"></script>

    <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: "http://geazzy-corner.blogspot.com/",

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

    },

    // facebook options

    facebook: {

    url: "https://www.facebook.com/GeazzyCorner",

    appId: "1394797800765536"

    },

    google: {

    url: "http://geazzy-corner.blogspot.com/"

    }

    });

    });;;;

    

    </script>


For Facebook: Replace https://www.facebook.com/GeazzyCorner with your Facebook Page.
For Twitter: Replace http://geazzy-corner.blogspot.com/ with your Website's URL or etc.
For Google+: Replace http://geazzy-corner.blogspot.com/ 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. 
sumber http://www.mybloggerlab.com
 
© Geazzy Corner All Rights Reserved