How to Add Social contain locker for Blogger

Hello everybody, This article  for you to how to Add Contain locker plugin in blog, this is a good way to promot your blog or web site, You can add this plugin in your blog easyli by following some of given steps. By utilizing this  plugin we can bolt any of the substance in our blog entry with social symbols. This plugin is fundamentally comprise of Jquery. the fundamental motivation behind this plugin is just substance locking with social catch. So here is the best approach to Add Social Content
Locked Widget In blogger blog.



Technique To Add Social Content Locker To Blogger


  • At first of open your blogger blog & then visit to template section. 

  •  Click on Edit HTML >> In template coding search with Ctrl+f  for </head> code. 
  •   After searching </head> code paste below given jQuery just above the code we had searched. If the same jQuery library is available there then don't need to paste jquery again.

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


  • After installing jquery now we need to add codes for Social content locker which are given below.
  • Copy the below given code and paste them just below </head> Which we had searched in previous step.

<link href='https://googledrive.com/host/0B_1mqJd2tC8qeDVzSnBJMDh5WUk' rel='stylesheet'/>



<script src='https://googledrive.com/host/0B_1mqJd2tC8qbGdmQzRZVGk3bXM' 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:"your_full_twitter_url_here"},

facebook: {url:"your_full_facebook_Page_url_here"},

google: {url:"your_full_google+_url_here"},



text: {

header: "Like us To Unlock This Content",

message: "This content is locked. Like us on Facebook, Twitter or Google plus to unlock it."

},



locker: {close: false, timer: 0,},



theme: "dandyish"



});

});

//]]>

</script>


Customizations For Social Content Locker



After Pasting all the above given codes now you need to do little bit customization Which are as following:-

  • Replace the codes by matching color codes given to text in coding and also in belowsettings.
  • To Change Order of Button Simple The Values With each other.
"facebook-like"
"facebook-share"
"google-plus"
"google-share"
"twitter-tweet"
"twitter-follow"
"linkedin-share"
  • Simple change the button and their order if you want.
  • Now Replace The URL With your own Yours
Replace this code "your_full_twitter_url_here" (For Twitter)
Replace this code"your_full_facebook_Page_url_here" (for Facebook)
Replace this code"your_full_google+_url_here" (fore Google+)
  • After Replacing URLs Next step is to replace text for heading and message which will appear on your social locker.
  • Further Step is To Change the Theme of Social Content Locker.
theme: "dandyish"
  • From the above codes replace the value for theme with below given codes.
"flat"
"glass"
"starter"
"secrets"
"dandyish"




How To Add Social Content Locker Into Blog Post


  • After adding and replacing values for all the above given codes successfully.
  • To add social locker within your blog post, copy below code and paste them intoHTML tab of blog post.


<article id="default-usage">

<div class="to-lock" style="display:none;">

- ADD YOUR CONTENT HERE -

</div>

</article>


  • Now Replace the  the - ADD YOUR CONTENT HERE - code with the text, URL, image, video or anything which you want to place behind the social locker. 
  • At last  Publish your article and see Social locker working live. If anyone want to access locked content He or she have to share on any of the listed network below accessing content.
If you face any kind of difficulties while implementing above given codes feel free to ask me in comment. Thanks a lot everybody.




    Previous
    Next Post »