Blogger contact form is very important to give your readers the opportunity to communicate with you. Adding a contact form to your Blogger blog is not so tough. There is a Blogger Contact Form widget available in the list of Blogger’s default widgets. But a few days ago, It was pretty tough because there was no such kind of widget available out there. Today we will learn how to add a stylish Blogger contact form in a static page?

How to create a social share content locker for your posts in blogger

at October 25, 2017

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.

You need to make sure that the Jquery Script is already added in your HTML or not.For this Purpose in HTML Section,Click CTRL + F to open the search bar and search for below HTML Script.If you find the below script in your HTML then no need of adding it again but if there is no such script then add it manually just below <head> or after it.

 <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..

Pages

New Design

Recent Post

8 Best stylish Contact Form For Blogger

How to create a social share content locker for your posts in blogger

Send Quick Massage