Saturday

How To Add Social Content Locker To Blog post In Blogger

Published: July 16, 2016

I am introducing to you today how you can lock any content be it text, video, URL, image etc in your blog post with any social icon.For now i’m using three important social networks which are Facebook, Twitter  and Google plus.

There consists of so many series of social content locker available.
The basis of this plugin consists of Jquery and the main function of this plugin is content locking with different social buttons.

All  bloggers want a lot of views to their published post, so, they always tell their readers to always "share" after reading right? ..but that fact is that not all that will do that...only few people will take their time to share/like a post they read. Now, to force them to get your post shared/liked ,what you will do is to put what is called a "Social Content Locker" in an important part of the article so that when they read the article to that point, they will see something such as; "This content is locked, click any share/like botton to view all post" . If truly your article is very interesting to them ..they will click on the botton. In-other words, you increase traffics to your blog.

Now let us go into the practical part straight-way, follow me carefully:

STEP 1 : 
  •  Goto your Blogger dashboard.
  • Click on template >> click on Edit HTML.
STEP 2 : 
  • Click any part of the code box and search for </head> using Ctrl + F.
  • After searching,paste the below jquery just above </head> .
<script src=’http://code.jquery.com/jquery-1.10.2.min.js’ type=’text/javascript’/>
NB : If you found this same code there, no need of putting it again.

STEP 3 :
  • Now you will copy the code below and paste it below </head> you've searched for previously.
<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:”http://twitter.com/damytechs“},
facebook: {url:”https://www.facebook.com/damytechs“},
google: {url:”https://plus.google.com“},
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>
Note :You should change the highlighted Url,s with your own links.

HOW IT WORKS: 

  • When you are done with adding and replacing values for all codes above. Now, to add social locker in your blog post, just copy and paste them into the HTML tab of that particular post.

  • Replace -ADD YOUR TEXT HERE- with your video, text or image you want to lock.
  •  Finally publish your post and see it working.
HOPE IT HELPED A LOT, THEN DONT FORGET TO SHARE & DROP YOUR COMMENTS!!!!!

Categories:
Share This
Damytechs

0 comment: