How To Customize Blogger Comments Past Times Adding A Background Coloring Together With Border

The comments are an essential component of whatever weblog equally inwards them readers limited their opinions most a transportation or a blog, hence it is of import to pass a piddling of our fourth dimension to brand this component looking to a greater extent than stylish, accessible as well as neat.

To lay our comments inwards order, nosotros should brand each comment slow to identify, so that we'll know from where it begins as well as to where it ends, otherwise it becomes a jumble of letters as well as our visitors could run away. Here are about methods to brand about social club past times separating each comment.

- Add a Separator To Blogger Comments
- Add a Divider Below Comments inwards Blogger
- Fully Customize Your Blogger Comments By Changing The Background Color as well as Border

The offset method is the easiest: we'll separate our comments past times adding a border below each of them.

How to Add a Separator/Border To Blogger Comments

Step 1. To add together a elementary separator expire to Template > Edit HTML as well as click on the small-scale arrow on the left of <b:skin>...</b:skin>

Step 2. Click anywhere within the code expanse as well as search using CTRL + F keys, for the next slice of code:

]]></b:skin>

Step 3. Paste the next mode simply inwards a higher house it:

- If nosotros are using threaded comments (with the respond option):

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

- If nosotros are using previous commenting organization (with no respond option)

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

Note: To alter the border's color, supercede the bolded color value as well as to alter its thickness, increase/decrease the 1 value.

Step 4. Save the Template.

Instead of a elementary border, nosotros tin transportation away likewise add together a divider/image betwixt our comments.

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

Step 1. Go to Template > Edit HTML as well as search (CTRL + F) for the next slice of code:

]]></b:skin>

Screenshot:

Step 2. Paste the next simply inwards a higher house it:

- If nosotros are using threaded comments (with the respond option):

.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwNpKKUTNUwlOA_Upx-pUihJPOWnFHRbMrGSlzvK8-Yo8o2UPfCX2eqTHAlMVCLgmHGnTvm-IUd5Mfjs_OfGtICMLqCiuPgrG1vIvgUGaPPB3QQZqzD_DrCmtzpgDd-sOfW2YdoS07h6I9/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px venture #000;
}

- If nosotros are using previous commenting organization (with no respond function)

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwNpKKUTNUwlOA_Upx-pUihJPOWnFHRbMrGSlzvK8-Yo8o2UPfCX2eqTHAlMVCLgmHGnTvm-IUd5Mfjs_OfGtICMLqCiuPgrG1vIvgUGaPPB3QQZqzD_DrCmtzpgDd-sOfW2YdoS07h6I9/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Note: The URL that is inwards blueish represents the ikon that you lot tin transportation away alter equally you lot like, simply recollect that at the superlative must railroad train the superlative of an ikon amongst 30px more, for instance, if the image's superlative is 50px so the value volition endure 80px. This is for making certain that the ikon won't overlap the appointment of comments. (for threaded comments, increase/decrease the padding xxx value)

Step 3. Save the Template.

But you lot tin transportation away however convey to a greater extent than styles for each comment, for instance adding a background color as well as a border.

How to Add Influenza A virus subtype H5N1 Border as well as Influenza A virus subtype H5N1 Background Color To Blogger Comments

Step 1. Go to Template > Edit HTML as well as search for the next slice of code:

]]></b:skin>

Step 2. Paste the next simply inwards a higher house it:

- If nosotros are using threaded comments (with the respond option):

.comment-block {
background:#F9F9F9; /* Background Color */
border: 1px venture #f1f1f1; /* Border mode */
margin-bottom: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; /* Background color behind the replies */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}
.comment-content {
padding:2px 10px 10px 10px;
color:#444444; /* Font Color inwards Comments */
}
.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}
.comments .comments-content .user a{
color:#1982D1; /* Author's mention color */
font-size: 12px; /* Author's mention size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px venture #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px venture #000;
}
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}
.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px venture #F2F2F2;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

Step 3. Save the Template.

- If nosotros are using previous commenting organization (with no respond function):

Step 1. Search for this business inwards your template:

<b:loop values='data:post.comments' var='comment'>

Step 2. Then, add together the next code simply below of it:

<div class='comments-new'>

Step 3. Look a piddling farther downward as well as you'll come across the </b:loop> code as well as simply inwards a higher house it, add together this:

</div>

Step 4. Now discovery this:

]]></b:skin>

Step 5. And simply inwards a higher house of it, add together this CSS code:

.comments-new{
background:#F9F9F9; /* Background Color */
border: 1px venture #f1f1f1; /* Bprder Style */
margin-bottom: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;
}
.comment-body {
color:#444444; /* Font Color inwards Comments */
padding:10px;
}
.comments-new a {
padding-left: 5px; /* Link color */
color: #4A9BD8;
}
.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
.comments .avatar-image-container {
overflow: visible;
}

(The rounded edges volition non piece of job inwards Internet Explorer amongst CSS)

In either case, you lot tin transportation away alter the background color, border, etc.. inwards parts amongst annotations inwards green.

Step 6. Save the Template.

If you lot ask to a greater extent than help, exit a comment below.