About

Labels

slider

Recent

Navigation

Add flat design comment policy box before comment box in Blogger using jQuery

Add flat design comment policy box before comment box in Blogger using jQuery

In one of my previous post that was "6 Blogger features you might be missing to use", I mentioned that, I will give a tutorial on how to add a comment policy box beside comments. However, if you simply want to simply add comment policy without customization you can read the post I mentioned above. Well, back on our post, comment policy gives a reason to moderator to remove or delete comments while it give boundaries to commentator to give a decent comment. Comments with unwanted links that do not evaluate the discussion are biggest spam. But you should never forget that commenting is the worst way to get back-links.So lets make a boundary for our commentators:

DEMO

See the Pen Comment Policy Box by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
Well, I've already mentioned that we are going to use jQuery so if haven't linked jQuery yet copy and paste the following code just after <head>.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'/>
Now find </head> in your template and paste the following code just before it.
<script>
$(function(){
var commentContent="All the comments are moderated, all the comments with links or any other kind of spam will be directly deleted via our moderators."; //Change the content under quotes with your desire comment policy.
$('.comments').prepend('<div class="comment-policy"><h2>Comment Policy</h2><div class="comment-policy-inner">'+commentContent+'</div></div>');
  $('.comment-policy>h2').click(function(){
    $('.comment-policy-inner').slideToggle();
  });
});
</script>
Replace the content (under quotes) with your desire comment policy and do not remove quotes, otherwise it won't work.

Now lets add style, for that find //]]></b:skin> and paste the following code just above it.
.comment-policy h2{
  font:400 25px "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color:#333;
  background:#ddd;
  box-shadow:0 1px 1px rgba(0,0,0,0.3);
  margin:10px 0 0 0;
  padding:10px;
}
.comment-policy-inner{
  display:none;
  background:#333;
  color:#fff;
  font:400 15px "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  padding:15px;
}

Note 

The jQuery written in a way that it will work only in official Blogger comment system, if you have any other it might be a problem. You can comment us for more details.
Share
Banner

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: