After reading some messages in shoutbox, inbox and e-mails, I can say that many readers like the comment form that Kang Rohman uses in this blog.

As usual, if many readers like something from Kang Rohman’s posting, there will be many questions from the readers. The questions are all about the tutorial on how to make the comment form above. Well, in order to fulfill what the readers want, I made this special tutorial on how to make the comment form.

Remember that every code in the template is different one another but they could be the same. If this tutorial is different with the code of your template, I just say “I am sorry” and it means that you are not lucky. As an example, I use the code of Minima template.

Ok…Readers, let’s go directly to the tutorial,

1. Log in into blogger with your ID

2. Click Layout

3. Click Edit HTML

4. Click Download full template. Please back up the template first (important).

5. Give a check in Expand Template Widget

6. Wait for a few second until the process is complete

7. Find the following CSS code:

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

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

8. Erase the code above and change with the code below

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

#bg_commentblock {
width: 548px;
background: #ffffff;
float: left;
padding:20px;
margin:0 0 10px 0;
border:1px solid #C0C0C0;
}

#commentblock {
width: 510px;
background: #E8E8E8;
text-align:left;
padding: 20px 20px 10px 20px;
margin: 10px 0px 0px 0px;
border-top: 2px solid #333333;
border-bottom: 1px solid #333333;
}
#commentblock ol {
list-style-type: square;
margin: 0px 0px 0px 10px;
padding: 0px 0px 10px 0px;
}
.commentdate {
font-size: 12px;
padding-left: 0px;
}
#commentlist li p {
margin-bottom: 8px;
line-height: 20px;
padding: 0px;
}

.commentname {
color: #333333;
margin: 0px;
padding: 5px 5px 5px 0px;
}

.commentinfo{
clear: both;
}

.commenttext {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left;
}

.commenttext-admin {
clear: both;
margin: 3px 0px 10px 0px;
padding: 20px 10px 5px 10px;
width: 490px;
background: #FFFFFF url(http://lh4.ggpht.com/kangrohman/SMZb-VqQlYI/AAAAAAAAAOM/RpT6fNN3M88/commentgray_thumb%5B1%5D.gif?imgmax=800) no-repeat top left;
}

9. Find the following codes:

1:

:

 

 

 

 

 

 

10. Erase the code above and change with the code below