How To Add Social Content Locker With Timer In Blogger Blog Post

No matter how high the number of viewers in a website or blog is. But the viewers do not follow your social platform as much as the viewers come to read the article in your blog.

And if you are making an article on such a topic. In which there is a download link or any special coding that the audience needs. So they come to your website only to download the same special download link or coding. And do not spend much time on your website which is why the website doesn't rank quickly.

So today I will tell you a widget named "Social Content Locker With Timer". With the help of which you can lock the download link or coding or any special content of any of your articles. That lock will open only when that viewer will follow one of your social platforms or wait for as long as you want on your website.

How To Add Social Content Locker With Timer In Blog Post

  • Go To Blogger >> Select Theme >> Select Edit HTML.
  • Click anywhere inside the code area and press Ctrl + F keys to open the search box.
  • Now, Search for </head> tag and paste below code just above of this tag.

<script src='' type='text/javascript'/>
  <link href='' rel='stylesheet'/>
<script src='' type='text/javascript'/>
<script type='text/javascript'>
  $('.socialLocker .to-lock').sociallocker({
    buttons: {order:["facebook-like","twitter-follow"]},
    twitter: {url:""},
    facebook: {url:""},    
    text: {
      header: "This content is locked!",
      message: "Please support us, use one of the buttons below to unlock the content."
    locker: {close: false, timer: 0,},
    theme: "secrets"

  • Replace it USERNAME1 with your Facebook Username.
  • Replace it USERNAME2 with your Twitter Username.
  • Replace it 0 with your waiting time (in second).
  • Click Save Theme.
  • Open Blogger Dashboard And Open The Post In Which You Want To Add Social Content Locker.
  • Now Go To HTML >> And in the post where you want to add the Social Content Locker, paste the code below.

<article class="socialLocker">
 <div class="to-lock" style="display:none;">
  -- Your Content --

  • Replace it   -- Your Content -- with your download link or coding or any special content.
  • before publish your post see a preview of your blog post.
  • If preview is correct then simply publish it.

2 Comment