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

<p><data:blogCommentMessage/></p>

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

 Must Read : Number Comment System Blogger

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