How to To Create Social Content Locker In Blogger BlogSpot



Hello and Welcome to GetWebInfo. Here on this post you can learn about that How to To Create Social Content Locker In Blogger BlogSpot. How many people are using social networking websites to boost their website's Traffic? There are tons of professional Bloggers who entirely depends on the Social Traffic. However, it is extremely difficult to get social exposure quickly. Though there are some widgets which help increase social followers but not enough. Do you use multiple social sharing widgets on each and every page of your site? However still your social exposure is on the lower side. Actually the problem is that people lover your content.





How to Install Content Locker Is 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. Now you can just follow these steps to install social widget locker in blogger.


Step 01: Go To Blogger.com > Template> Edit HTML> Proceed

Step 02: Search for </head> just and above it paste the following CSS coding\

<link href='http://mybloggerlab.com/StyleSheet/lockercss.css' rel='stylesheet' type='text/css'/>

Step 03: After pasting the coding save the template and proceed to next step

Now where you want to add a social content locker in his specific article then you can follow these steps to add Social Content Locker in Blogger Blog.

Step 04: Go to Blogger Layout

Step 05: 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="http://mybloggerlab.com/Scripts/mbllock.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.getwebinfo.com",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/getwebinfo",
appId: "418044881593120"
},
google: {
url: "http://www.getwebinfo.com"
}
});
});;;;
     
</script>

Customization of the Widget 


  • For Facebook Replace This URL with your own http://www.facebook.com/getwebinfo
  • For Twitter you can Change This URL with your own http://www.getwebinfo.com
  • For Google Plus you can Change this URL with your own http://www.getwebinfo.com
  • Do not forget to add your Facebook App ID Other wise the Faceook Like button will now work properly. Replace this App ID code 418044881593120
  • Replace Add_Hidden_Image_Here with your own Image that you want to Hide
  • Replace "Add Your Hidden Text Here" with the text that you want to hide from user 
I Hope this article is really helpful for you and if you have any problem about this article so please content us we can solve your problem as soon as possible.




No comments:

Post a Comment