How To Customize Blogger Comments Yesteryear Adding A Background Coloring In Addition To Border

The comments are an essential constituent of whatever spider web log equally inwards them readers limited their opinions well-nigh a post service or a blog, so it is of import to pass a fiddling of our fourth dimension to brand this constituent looking to a greater extent than stylish, accessible together with neat.

To set our comments inwards order, nosotros should brand each comment slowly to identify, so that we'll know from where it begins together with to where it ends, otherwise it becomes a jumble of letters together with our visitors could run away. Here are roughly methods to brand roughly fellowship 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 together with Border

The start 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 uncomplicated separator expire to Template > Edit HTML together with click on the minor arrow on the left of <b:skin>...</b:skin>

Step 2. Click anywhere within the code surface area together with search using CTRL + F keys, for the next slice of code:

]]></b:skin>

Step 3. Paste the next fashion simply higher upwardly it:

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

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

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

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

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

Step 4. Save the Template.

Instead of a uncomplicated border, nosotros tin hand the axe too 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 together with search (CTRL + F) for the next slice of code:

]]></b:skin>

Screenshot:

Step 2. Paste the next simply higher upwardly it:

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

.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF5b9UY7CrfttuBJcc_qWTcC8mor4vW4vv_7k0nxmgHq1G8PzcEmYM5aIh-4YAzS1WAznIScAq34pJcoQmaYtcDLfEIBxIpNfDXiisyFh54yRBG_ags3zeL-TEZtG2GmFKeYH-MbnrLOBM/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px company #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/AVvXsEiF5b9UY7CrfttuBJcc_qWTcC8mor4vW4vv_7k0nxmgHq1G8PzcEmYM5aIh-4YAzS1WAznIScAq34pJcoQmaYtcDLfEIBxIpNfDXiisyFh54yRBG_ags3zeL-TEZtG2GmFKeYH-MbnrLOBM/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Note: The URL that is inwards bluish represents the icon that y'all tin hand the axe alter equally y'all like, simply retrieve that at the pinnacle must gear upwardly the pinnacle of an icon alongside 30px more, for instance, if the image's pinnacle is 50px together with so the value volition survive 80px. This is for making certain that the icon won't overlap the appointment of comments. (for threaded comments, increase/decrease the padding thirty value)

Step 3. Save the Template.

But y'all tin hand the axe all the same accept to a greater extent than styles for each comment, for instance adding a background color together with a border.

How to Add H5N1 Border together with H5N1 Background Color To Blogger Comments

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

]]></b:skin>

Step 2. Paste the next simply higher upwardly it:

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

.comment-block {
background:#F9F9F9; /* Background Color */
border: 1px company #f1f1f1; /* Border fashion */
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 cite color */
font-size: 12px; /* Author's cite 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 company #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px company #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 company #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 draw of piece of job 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 fiddling farther downward together with you'll run across the </b:loop> code together with simply higher upwardly it, add together this:

</div>

Step 4. Now discovery this:

]]></b:skin>

Step 5. And simply higher upwardly of it, add together this CSS code:

.comments-new{
background:#F9F9F9; /* Background Color */
border: 1px company #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 alongside CSS)

In either case, y'all tin hand the axe alter the background color, border, etc.. inwards parts alongside annotations inwards green.

Step 6. Save the Template.

If y'all postulate to a greater extent than help, instruct out a comment below.

Share this post