Subscribe Here RSS or Email

8/5/08

Improve your blogger comment section to create more inter-action

4 comments Buzz Here
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.

Related Posts by Categories



4 comments:

NathanKP said... at 29/10/08 08:27

Excellent advice. I think that I'll check through my code and see it this is something I may want to implement.

NathanKP - Inkweaver Review

Mikael said... at 17/11/08 07:15

This is great, but how can I make my "Add Comment Here" text bigger so it gets noticed?

Iris said... at 17/11/08 10:36

Hi! Mikael,

Go to your dashboard - layout - Edit HTML (Make sure you save your template, just incase you make mistake) then hit Ctrl+F then type .comment-link then add this CSS font-size:120%;

You can adjust the size if you want.

I hope this answer to your question. Good Luck!

Post a Comment

I really love to read your thoughts, Reminder though that I Moderate my blog, If your intention is only to spam think twice.

For those that will comment because you want to share your thoughts i really appreciate your time. "Dofollow" Rules.

 

  © Blogger template 'tbn' by thebuzznutter 2008

Bring me to TOP