13 February 2013

Show Comment Message Before Blogger Comment Box


Show Comment Message Before Blogger Comment Box
We again came with a template hack for the blogger comment section.Comment system is the most important part of any blog as it do help to make direct contact between blog owner and reader.You all may saw some message before comment box of some blog,which may say the rule of commenting system on that blog,even this blog have to.But after introducing the blogger threaded comment system some problem being arrived on it,it showing the message after comment box instead of showing before the comment box.After searching So much we just luckily  found a solution from exeideas.Here we're going to share this with some steps.

 Must Read : Highlighted Blogger Author Comment System

Add Comment Message

  • Log onto your Blogger Dashboard->settings->posts and comments->comment form message
  • Edit it and add your message what you want to show your visitor

Show Comment Message Before Comment Box

  • Log onto Blogger Dashboard->Template=>Edit html=>Expand Widget Template
  • Search(ctrl+f)  for 

<b:includable id='threaded-comment-form' var='post'>

  • After finding this search for <b:else/> and add the following code after it

<div id='threaded-comment-form'>
  • Then find </b:if>  and add </div>  before it 
  • Now find 

document.getElementById(domId).insertBefore(replybox, null);

  • Replace it with

document.getElementById (domId). insertBefore (document.getElementById ('threaded-comment-form'), null);

  • Now save the template and you're done.For your reference check the below screenshots
Before Adding

After Adding

Add CSS to Comment Message

    Now it's time to add some CSS to make this message looks good
    • Log onto Blogger Dashboard=>Edit html=>Expand Widget Template Box
    • Search for "]]></b:skin>" and before it paste the following code

    #threaded-comment-form, .comment-form {background:#f9fafb;width:auto;padding-top:5px;padding-bottom:5px;padding-left:10px;padding-right:5px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #e6e6e6;color:#000;text-align:left;line-height:25px;margin-bottom:5px;width:100%;max-width:100%;}
    • save and done.

    Add Image or HTML/JavaScript on Comment Message

    You wanna add something more to make your blog's comment message more beautiful?So here we go

    • Log onto Blogger Dashboard=>Template=>Edit HTML=>Expand Widget Template Box
    • Search(ctrl+f) for


    • After finding the above code in 4 place add your desired image/html/java script before it
    • save template and you're done

    Leave your comment below if facing any problem regarding this.Don't foget to subscribe us for more such upcoming posts.

    Articles You May Like

    6 comments: Leave Your Comments

    1. Thanks for the tip. This is very useful :)

    2. In Blogger Settings>Posts and Comments>
      There is also an option to add rules and admin Message.

      1. Yes,you are right but using that option the message will show below comment box,not before comment box.Using this tutorial you can fix that bug.