Google

1
This Social Locker (Share-To-Unlock) widget consists of three social buttons and a locker displaying horizontally. The Social buttons consist of Facebook, Twitter and Google plus. Whenever, a person would either press Like, Tweet or Plus one button it would display the hidden content. This allows a person to get more real social followers.

How To Add Social Content Locker in Blogger?


The Steps are extremely straightforward and easy that even a novice can do it. You musnt be a HTML guru or whatever because all we have to do is to copy paste the code into your blogger template editor. Follow the following instructions. 

  • Go To Blogger.com >> Template >> Edit HTML.
  • 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

Whenever you wants to add a Social Content locker in an article or post, just 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://twitter.com/StefnSylvester",
text: "Upgrade your social buttons to get more social traffic!"
},

// facebook options
facebook: {
url: "http://www.facebook.com/XclusiveTech",
appId: "408184442589211"
},

google: {
url: "http://xclusivedroidapk.blogspot.com/"
}
});
});;;;
        
</script>


Customization

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

Bravo!!!: That's All, we hope this widget would help everyone to magnetize more social followers on your website. Feel free to leave your comment.



Widget Created By : http://www.mybloggerlab.com/  
Syed Faizan Ali (Founder of MyBloggerLab)]

Post a Comment

  1. This can be one particular of the most beneficial blogs We’ve ever arrive across on this subject. Actually Wonderful. I’m also a specialist in this topic therefore I can understand your hard work.
    website design

    ReplyDelete

 
Top