Article | Separator Line between Each Comment

If you have noticed by now, the readers' comments after each Blogger post come one after the other without a line separating each comment. If your post has numerous comments, it is difficult even for readers to locate their own comments. A solution to this is to add a divider or a separator line after each comment so that readers can easily see where the comment starts and ends. We had explained in our article Author Comments - Different Styles how blog owners can make their own comments different and stand out from the rest. Here, we shall let you know how to insert a divider or underline after each comment to separate the various comments.



Login and go to Template -> Edit HTML. Scroll through the template to locate this:-

#comments-block .comment-footer {

In templates other than the Minima template, you may see this instead:-

.comment-footer {

Insert under that the following line:-

border-bottom:1px dotted $bordercolor;

This adds a thin line at the bottom of each comment. You can have a thicker line with a different color. Just change the above code to this:-

border-bottom:2px solid #736AFF;

For more variations and ideas on how to customize this separator line, take a look at Add or Remove Borders in CSS Templates.



Finally, if the line is too close to the end of the comments, you can add a little spacing between the comments and the separator line. Either insert this extra padding code, or if it already exists, adjust the values. Save the template, click any article to view the comments and go back to change the padding values if necessary.

padding:0 0 1px 0;

The first value is for the top spacing, the second is for the right, the third is for the bottom, and the fourth is for the left. In our example, we have added a 1px spacing at the bottom of the comments footer.

Loading...