Improve your blogger comment section to create more inter-action

Now that Blogger have finally included an inline comment form placement aside from the pop up and full page, we can start making it more attractive and inter-active -- If you have not switched to inline comment system of bloggers you can read my post Still Using Bloggers Pop-Up Comment System? and make sure to get back to this post to improve your comment section's design.Why do we need to improve our comment section?
Comment is a big part of our blogging, i take comment as a reward or my hard work. The comment section also need to be inter-active as much as we can so that our readers can easily follow a discussion, answer some questions etc....

I assume you have switched to the inline comment already next is we need to change the comment code to highlight the authors comment, i found a very well done tutorial at amanda's how to highlight author comments, this is what we need to do first as part of improving your comment section.

Now to improve the look of your comment section follow this simple steps.

• Go to your Dashboard, Layout, Edit HTML (make sure to save a copy of your template)
• Ctrl+F then type .author-comments { this will bring you to its code.
  

.author-comments {
background: #FFF3DF;
border: 3px solid #CCB999;
padding: 5px;
margin:0 0 10px;
}

You can change the color to whatever you like using the hex code to distinguish your comment among the rest.

Next is we need to put a border and improve the rest of the comment section aswell, therefore we need to add this code for the general comments.

.general-comments {
background: #FFF3DF;
border:3px solid #CCB999;
margin:0 0 10px;
padding:10px;
}

then save...then look at your comment section if it separate you comment and if it looks better then before -- Of course there are other ways to improve this section, that is why i included the showcases of comment section to inspire you and let that artistic side of you to come out. Please, if you have done something great in your comment section please let me know and show it off :D

One thing before i end this post, why not add an icon beside your comment count,here's how to do it.
Ctrl+F type #comments h4 {
You will get to this code below highlight the whole code and replace them.

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

replace them with this code:

#comments h4 {
background:transparent url(http://i337.photobucket.com/albums/n368/thebuzznutter/24-comment-square-important.png) no-repeat scroll 0 0;
color:#555555;
font-size:20px;
height:29px !important;
margin:0;
padding:8px 0 0 30px;
}

then save...you can replace the icon with any comment icon that suites your template.

I hope you have fun with this tutorial, there are many ways to make our blog more attractive and interactive it all just up to us.