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

Comments are an essential part of any blog as they provide readers with feedback about a post or blog. So it's important to devote some of your time to making this section more elegant, accessible, and organized.

In order to organize our comments we need to make each comment easily identifiable so we know where it started and where it ended, otherwise the letter will become confusing and our visitors could run away. Here are some ways to eliminate clutter by separating each comment.

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

The first way is the easiest: we separate our comments by adding a frame at the bottom of each one.

How to add a separation/boundary to Blogger comments

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

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

]]>

Step 3 Paste the following style:

- Use the comment string (possible answer):

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

- Use previous comment system (no reply option)

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

Note. Change the bold color value to change the edge color and increase/decrease the value by 1 to change the thickness.

Step 4 Memorize the pattern.

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

How to add a separator (image) between each comment in Blogger

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

]]>

Screenshot:

Step 2 Paste the following at the top:

- Use the comment string (possible answer):

.comment block {
Background: URL ( http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAC_0/UXbviThYl2w/s1600/74.gif );
background repeat: no repeat;
background position: middle below;
Pad-alt: 30px
top border: -10px;
}}
.comments .more {
top edge: 0px solid # 000;
}}

- Use the previous comment system (no reply function)

# comment block .comment-footer {
Background: URL ( http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAC_0/UXbviThYl2w/s1600/74.gif );
background repeat: no repeat;
background position: middle below;
Height: 50px;
}}

Note. The URL highlighted in blue is an image that you can change to your liking. Just remember that the height box should be set 30 pixels higher than the height of the image. For example, if the height of the image is 50 pixels, the value changed will be 80 pixels. This ensures that the image does not overlap the comment history. (increase/decrease padding for thread comments 30)

Step 3. Memorize the pattern.

But you can always have more style, e.g. B. Adding a background color and borders for each comment.

How to add a border and background color to a Blogger comment

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

]]>

Step 2 Paste the following at the top:

- Use the comment string (possible answer):

.comment block {
Background: #F9F9F9; /* background color */
border: 1px fixed #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 screen: 0 1px 2px rgba (0, 0, 0, .4);
-moz border radius: 10 px;
-Webkit border radius: 10 px;
border radius: 10px;
}}
.comments .comment-thread.inline-thread {
background color: #FAFAFA; /* background color behind replies */
left border: 4px dotted #E6E6E6; /* edge left of replies */
}}
.comment-content {
Fill: 2px 10px 10px 10px;
Color: #444444; /* Font color in comments */
}}
.date hour {
Font style: italics;
font size: 9px;
left margin: 2px;
}}
.comments .comments-content .user a {
Color: #1982D1; /* author name color */
Font size: 12px; /* author name size */
left fill: 10px;
font weight: thick;
Text design: no;
}}
.comments .comment .comment-actions a, .comments .comment .continue a {
Screen: integrated block;
border: 0 0 10px 10px;
fill: 0 15px;
Color: #B4B4B7;
text alignment: centered;
Text design: no;
Background: #F8F8FB;
border: 1 pixel solid # C2C2C5;
border radius: 4px;
Height: 20px;
line height: 20px;
font weight: normal;
pointer: pointer;
}}
.comments .more {
top edge: 0px solid # 000;
}}
.comments .comments-content .icon.blog-author {
Background image: no;
left margin: -10px;
}}
.comments .avatar-image-house {
border: 0px 0px 0px 0px;
fill: 0px 0px 0px 0px;
Width: 40px;
maximum height: 40px;
border: 1px solid #F2F2F2;
fill: 1px;
}}
.comments .avatar-image-container img {
border: 0px 0px 0px 0px;
fill: 0px 0px 0px 0px;
maximum width: 40px;
Height: 40px;
}}

Step 3. Think of the model.

- Use the previous comment system (no reply function):

Step 1. Find this line in your model:

Step 2. Then add the following code:

Step 3. Take a look below and you will see code and add it above: