NOW-Hollywood - Celebraties Bio/Movies/Gossip

Oct 17, 2008

How To Modify The Comment Form

by Admin 0 comments



Share this post:
Design Float | StumbleUpon | Reddit

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.

comments

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

expand-template

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



Comments :

1

to “











on  

























 

 









10. Save Template

11. Finish and see the result.

The code above is not an absolute code. If you are familiar with CSS, you will be able to do any creation. Especially, at the width of the comment form because you have to match the width of comment form with the width of your template.

To change the width of the comment form above, you only need to change the value of its width, example; width: 548px is changed into 500px or the value which matches with your template.

Well, that’s the short tutorial that you have been looking for months. Hopefully it can recover your annoying so far.

Good luck!


Related Posts



Subscribe Feeds RSS in your preferred RSS reader
Comments 0 comments

Admin(kk group)
Student, Web-Developer, FSD-PAKISTAN
getfreefiles@gmail.com

Subscribe feeds via e-mail
Subscribe in your preferred RSS reader

Subscribe feeds rss Recent Entries

Sponsored Links

Advertise on this site Sponsored links

Categories

Etiquetas

Are you looking for a job?

Post a job and reach web professionals everywhere.

My Photos on flickr

Subscribe feeds rss Recent Comments

Technorati

Technorati
GFF's authority on technorati
Add to Technorati Favorites