31 October 2014

, , ,

How to Lock Your Content with Social Content Locker in Blogger Blog

How to Add Social Content Locker in Blogger Blog

Social Content Locker

As many Blogger want to Lock Their Content with Social Media Buttons for Increasing Their Social Media likes/Followers But many of bloggers Don,t Know how to lock So Today in this tutorial i will tell you how to lock your Content with Social content Locker in blogger blog

How to Lock Your Content with Social Content Locker in Blogger Blog


Step (1) Go to Blogger.com and then Go to your Blog Dashboard

Step (2) Then Click on Template and then click on Edit Html


Step (3) Press Ctrl+f  and then Find this tag </head> and then Paste the Below Code just above </head> this tag

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>

Step (4) Then again Search for this tag </head> and paste the Below Code Just above this tag </head>

------------------------------------------------------------------------------------------
<link href='https://7475c86c7b904ff243d5e5053fa73033884596a6.googledrive.com/host/0B9yW-IonjS65T0N0V1ltazF6SEE' rel='stylesheet'/>

<script src='https://0fbf35074d8fc72d66d79874501738c32737dc58.googledrive.com/host/0B9yW-IonjS65UGFwbWpxUlc5MFk' 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://www.twitter.com"},

facebook: {url:"https://www.facebook.com"},

google: {url:"https://plus.google.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 Just Replace Orange Color links with your Social Media Links

Step (5) Then click on Save

Step (6) Now Whenever you want to show this Locker in any of your Blog Post or page Just add this Code in your Blog post Edit Html Editor.

<article id="default-usage">
<div class="to-lock" style="display:none;">
-- ADD YOUR CONTENT HERE --
</div>
</article>

 Then Replace (Add Your Content Here) with your Content you want to Lock


Locker Live Example:-






If you have any Question you can Ask in Comments i will Happy to answer Your Questions.

Thanks



0 comments:

Post a Comment

Give your Thoughts about this Post in Comments.

Top Ad 728x90