How To Create a Social Content Locker in Blogger BlogSpot

How To Install Social Content Locker in Blogger

The Steps are extremely straightforward that even a small kid can follow it. There is no need of learning any Html coding because all we have to do is to copy paste the coding. Just follow the following instructions. 

• Go To Blogger.com >> Template >> Edit HTML >> Proceed.
• Search for </head> just and above it paste the following CSS Coding.

<link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/>

• After pasting the coding save the template and proceed to next step.

 

How To Add Social Content Locker in Blogger

Now whenever a person wants to add a Social content locker in his specific article, then he can follow the following instructions. (Remember: The same steps can also be used on Gadget Area and even in a template).  

• 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://dl.dropboxusercontent.com/u/137869302/lockers.js"></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://www.mybloggerlab.com",

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

},

// facebook options

facebook: {

url: "http://www.facebook.com/mybloggerlab",

appId: "418044881593120"

},

google: {

url: "http://www.mybloggerlab.com"

}

});

});;;;

        

</script>

Customization:

• For Facebook: Replace http://www.facebook.com/mybloggerlab with your Facebook Page.
• For Twitter: Replace http://www.mybloggerlab.com with your Website's URL or etc. 
• For Google+: Replace http://www.mybloggerlab.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 418044881593120 from above coding. 

Filed Under: اضافات البلوجر on الأربعاء، 5 فبراير 2014