How to Customize Blogger Comments By Adding a Background Color and Border

Comments are an important part of any blog because this is where readers express their opinions about posts or blogs, so it was important to take your time to make this section more elegant, accessible and presentable.

To organize our comments, we need to make each comment easily identifiable so we know where it starts and where it ends, otherwise it will turn into a pile of emails and our visitors may run away. Here are some ways to get organized by splitting each comment.

- Add separator to Blogger comments.
- Add separators to comments in Blogger.
- Fully customize your blogger comments by changing the background color and border.

The first method is the easiest: we divide the comments by adding a box under each one.

How to add a separator/border to a Blogger comment

Step 1 : To add a simple separator, go to " Template " > " Edit HTML " and click the arrow on the left. ...

Step 2. Click anywhere in the code area and use CTRL+F to find the following code snippet:

]]>

Step 3. Paste the following styles right above it:

- When we use a comment thread (with the possibility of a reply):

.comment-block {
border-bottom: 1px solid #000000 ;
}
.comments .continue {
border-top: 0px solid #000;
}

- If we use the previous comment system (no reply option)

#comments-block .comment-footer {
border-bottom: 1px solid #000000 ;
}

Note. To change the border color, change the color value to bold, and to change the thickness, increase/decrease the value by 1.

Step 4. Save the template.

Instead of a simple border, we can also add a border/image between our comments.

How to add a separator (image) between comments in Blogger

Step 1. Go to Template > Edit HTML and find (CTRL + F) the following code snippet:

]]>

Screenshot:

Step 2. Paste the following right above it:

- When we use a comment thread (with the possibility of a reply):

.comment-block {
background-image:url( http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAAC_0/UXbviThYl2w/s1600/74.gif );
background-repeat: no-repeat;
background position: center off;
padding-bottom: 30px ;
top margin: -10px;
}
.comments .continue {
border-top: 0px solid #000;
}

- If we use the previous comment system (no reply function)

#comments-block .comment-footer {
background-image:url( http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAAC_0/UXbviThYl2w/s1600/74.gif );
background-repeat: no-repeat;
background position: center off;
height: 50px;
}

Note. The url highlighted in blue is an image that you can edit as you see fit, just remember that in the height you need to set the image height to 30px higher, for example if the image height is 50px the value will be 80px. This is done so that the image does not overlap the date of the comment. (For comment threads, increase/decrease the indent value to 30)

Step 3. Save the template.

But you can still have multiple styles for each comment, such as adding a background color and border.

How to add border and background color to Blogger comments

Step 1 : Go to Template > Edit HTML and find the following code snippet:

]]>

Step 2. Paste the following right above it:

- When we use a comment thread (with the possibility of a reply):

.comment-block {
background: #F9F9F9; /* background color */
border: solid 1px #f1f1f1; /* Border style */
bottom-margin: 20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Response background color */
border-left: 4px with dots #E6E6E6; /* Left edge of response */
}
.comment-content {
indent: 2px 10px 10px 10px;
color: #444444; /* Font color in comments */
}
.datetime in {
font style: italic;
font-size: 9px;
left margin: 2px;
}
.comments .comments-content .user a {
color: #1982D1; /* author name color */
font size: 12px; /* Author name size */
indent left: 10px;
font-weight: bold;
text design: no;
}
.comments .comment .comment-action a, .comments .comment .continue a {
display: online lock;
margin: 0 0 10px 10px;
padding: 0 15px;
color scheme: #B4B4B7;
text alignment: centered;
text design: no;
background: #F8F8FB;
border: 1px solid #C2C2C5;
border-radius: 4px;
height: 20px;
row-height: 20px;
font-weight: normal;
pointer: pointer;
}
.comments .continue {
border-top: 0px solid #000;
}
.comments .comments-content .icon.blog-author {
background image: no;
left margin: -10px;
}
.comments .avatar-image-container{
margins: 0px 0px 0px 0px;
indent: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
indent: 1px;
}
.comments .avatar-image-container img{
margins: 0px 0px 0px 0px;
indent: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

Step 3. Save the template.

- If we use the comment system above (without the reply function):

Step 1. Find this line in the template:

Step 2. Then add the following code right below it:

Step 3. Look further down and you will see code and right above it add this: