Adding a Background Color and Border to blogger comments

The commentary are an essential part of any blog as in them compendiums express their opinions about a post or a blog, therefore it's important to spend a little of our time to make this part looking further swish, accessible and neat.

To put our commentary in order, we should make each comment easy to identify, so that we'll know from where it begins and to where it ends, else it becomes a jumble of letters and our callers could run down. Then are some styles to make some order by separating each comment.

- Add a Separator To Blogger Commentary

- Add a Divider Below Commentary in Blogger

- Completely Customize Your Blogger Commentary By Changing The Background Color and Border

The first system is the easiest we'll separate our commentary by adding a border below each of them.

How to Add a Division/ Border To Blogger Commentary

Step 1. To add a simple separator go to Template > Edit HTML and click on the small arrow on the left of <b:skin>...</b:skin>

Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:

]]></b:skin>

 

Step 3. Paste the following style just above it: - If we are using threaded comments (with the reply option):

.comment-block {

border-bottom: 1px solid #000000;

}

.comments .continue {

  border-top: 0px solid #000;

}

- If we are using previous commenting system (with no reply option)

#comments-block .comment-footer {

border-bottom:1px solid #000000;

}

Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.

Step 4. Save the Template.

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

How to Add a Divider (Image) Between Each Comment in Blogger

Step 1. Go to Theme > Click on Edit HTML and search (CTRL + F) for the following piece of code: ]]></b:skin>

]]></b:skin>

 

Step 2. Paste the following just above it: - If we are using threaded comments (with the reply option):

.comment-block {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJveklU-RxomCtaKrbqXiJqmIdCOcltx0O0wD1G4fJ6QJfhr8K_afC0Knsv47HiFOxYAum63VBmF1Ggwwb8oifSGr7S8AflSO1YftsBR7qiUf9f2SpgQ3pxBoGVPU_9ls-XVyJ9aq5s4Sk/s1600/74.gif);

background-repeat:no-repeat;

background-position:center bottom;

padding-bottom:30px;

margin-top: -10px;

}

.comments .continue {

border-top: 0px solid #000;

}

- If we are using previous commenting system (with no reply function)

#comments-block .comment-footer {

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJveklU-RxomCtaKrbqXiJqmIdCOcltx0O0wD1G4fJ6QJfhr8K_afC0Knsv47HiFOxYAum63VBmF1Ggwwb8oifSGr7S8AflSO1YftsBR7qiUf9f2SpgQ3pxBoGVPU_9ls-XVyJ9aq5s4Sk/s1600/74.gif);

background-repeat:no-repeat;

background-position:center bottom;

height: 50px;

}

Note: The URL that is in blue represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date of comments. (for threaded comments, increase/decrease the padding 30 value)

Step 3. Save the Template.

But you can still have more styles for each comment, for example adding a background color and a border.

Share on Google Plus

About KhmerueTeams Official

Welcome to KhmerueTeams Officials Blogger. I am Mr. Chhuye The Admin of this blogger. If you have quetion contact me : +855968555664 / +855976235033 or watch my video on ​

YOUTUBE HERE