How to create a social share content locker for your posts in blogger
Creating a social content locker for your blog makes it easier for your post to go viral on social media.visitors will share your content before they can read or download.
First of all please take Full Template Backup so that if anything Happened Wrong,You will be able to revert all changes to Zero from where you started this method.But i am sure that it will work for you.
Now Go to Your Blogger, Log in and Move on to Template Section and Click on Template and then on Edit HTML. Like in Picture Below.
<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
Now search for </head> in your HTML and before or above it, Paste the below code
<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
$('#default-usage .to-lock').sociallocker({
buttons: {order:["facebook-like","twitter-tweet","google-plus"]},
twitter: {url:"http://twitter.com/PKHelper18"},
facebook: {
like:{
url:"https://www.facebook.com/PKHelper18"
},
share:{
appId:1644466799163691,
url:"http://www.pkhelper.com/"
},
},
google: {url:"http://www.pkhelper.com/"},
text: {
header: "Like us To Unlock This Content",
message: "This content is locked. Like us on Twitter, Facebook or Google plus to unlock it."
},
locker: {close: false, timer: 0,},
theme: "secrets"
});
});
//]]>
</script>
Now whenever you want to Hide some Content, either images,videos or article, Just paste the below HTML code in your HTML section of Post as described in the Video and Replace it with -Your Content-
<article id="default-usage">
<div class="to-lock" style="display:none;">
-- Your Content which you want to Lock or Hide --
</div>
</article>
Comment and share this post if it helped you..