How to Create a Custom Style Comments System in Blogger

Socialize It →

Tweet

27

Advertisements

Blogger commenting system is certainly robust enough to be customized and used safely with your blog. In the past, we have provided you some highly customized commenting systems for Blogger, and this time we thought to come up with a tutorial that could teach some beginners about the basics of creating a custom commenting system for their blogger blog. In this article, will be using those default classes to show you how to create a Custom Style Commenting system in Blogger and few cool things you can do with it.

Note: Since, different blogger templates are coded by different designers. Therefore, we want you to first get rid of all the previous CSS coding that you are using from the styling of your comments.

How to Exactly Find Which CSS Class to Edit:

Before, we teaches you how to style your comments, it is essential to get few tips or tricks to see how you can exactly find that which CSS Class or ID You should be editing to get the job well-done. Google Chrome and Mozilla Firefox come with some bunch of handy tools for web developers. The tool “Inspect Element” is a magic wand for a developer. 

Simple Hover your mouse over any element on a web page, right click and select “Inspect Elements”. Now a new panel would appear at the bottom of your screen. It would be separated into two rows. In the first row, you will see the Source code and CSS coding in other. You can edit the CSS to test few things like Margin, padding, background color and etc. You can even add your custom CSS in a Certain Id. It is like your very own developing tool. Though, the moment you will refresh the page everything would be back to normal. To make permanent changes, you have to use the same CSS in the StyleSheet of your template.

Styling Post Author Avatar:

The avatar is a kind of image that represents your identity. However, sometimes a person might like to have rounded avatar rather than having a simple rectangular one. The implementation is pretty much like just can be done with CSS and all that you need is the following chunk of CSS coding. You can also add your own custom style

.comments .avatar-image-container, .comments .avatar-image-container img {

width: 48px;

max-width: 40px;

height: 40px;

max-height: 48px;

background: #FFF;

float: left;

border-radius: 50%;

-moz-border-radius: 50%;

margin: 0 10px 0 0;

}

#comments .avatar-image-container img {

border: 1px solid #ddd;

}

.comments .comment-thread.inline-thread .avatar-image-container, .comments .comment-thread.inline-thread .avatar-image-container img {

width: 36px;

max-width: 36px;

height: 36px;

max-height: 36px;

margin-left: 5px;

}

To stylize your avatar with round shape you can just use the following code, just paste it in the CSS coding of your template (TIP: Go to Blogger.com >> Template >> Edit HTML >> Search for Skin and above it paste the following code).

Styling Comment Body in Blogger:

Styling the comment body for the users as well as the author is something, that gives life to your system. It allows the things to work in a systematic manner. It holds everything together. For Example, a user left a comment since the body was not well-formed the text overflowed. Therefore, it is essential to give proper padding and margins so that everything looks neat and clean.

#comments { background-color: #fff; padding-top: 20px; border-top: 1px solid #ddd; }

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-left:60px;
width:490px;
}

.comments .comment-block,.comments .comment-thread.inline-thread .comment {
border:1px solid #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}

.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}

.thread-chrome.thread-expanded .comment-header {
width: 412px;
margin-left: 15px;
}
.comments .comments-content .comment {
width:100%;
line-height:1em;
font-size:13px;
margin:15px 0 0;
padding:0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
}
.thread-chrome.thread-expanded .comment-content {
width: 380px;
line-height: 22px;
overflow:hidden
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}

.item-control.blog-admin {
display: none;
}
.comments .comments-content .comment-replies {
margin-top:0;
}

.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}

.comments .comment-thread.inline-thread {
padding-left: 0px;
}

.comments .comment-thread.inline-thread .comment {
width:auto;
}

.comments .comment-thread.inline-thread .comment:after {
content:"";
position:absolute;
top:10px;
left:-20px;
border-top:1px solid #d2d2d2;
width:10px;
height:0;
}

.comments .comment-thread.inline-thread .comment .comment-block {
border:0;
background:transparent;
padding:0;
}

.comments .comment-thread.inline-thread .comment-block {
margin-left:48px;
}
.comments .continue {
border-top:0;
width:100%;
}

#comment-editor {
width:98%!important;
}

.comment-form {
width:100%;
max-width:100%;
}

Here is the example of a code that can be used. You can customize it according to your desire needs.

Styling Comment Author Name and Meta:

The Blogger platform has the robust functionalities that could help you in designing the comment author name as well as the Meta information. This allows the designers to customize the date, time and the name of the author. Here is a sample code that you can simply copy and paste into the StyleSheet of your template. 

You can also add your custom styles like can alter the fonts, color, size and anything that you like. Whatever you imagine can be applied to your design.

#comments h4 {

display:inline;

line-height:40px;

padding:10px;

}

.comments .continue a {

background:#0d86cc;

text-align:center;

padding:10px 0;

display:none;

}

#comments h4,.comments .continue a {

line-height: 30px;

margin: 0;

padding: 20px 0 14px 10px;

font-size: 18px!important;

text-transform: uppercase;

font-weight: 400!important;

color: #444;

}

.comments .user a {

color: #444!important;

font-size: 18px;

line-height: 25px;

text-transform: capitalize;

margin-top: 20px;

font-weight: 600;

padding-left: 15px;

}

.comments .comments-content .datetime {

cursor: pointer;

float: right;

padding-top: 6px;

padding-right: 20px;

}

.icon.user {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm-F6xcAPlp9BKW7zhtzqVuSE6AbAANfJdrlUEpiMKbA7pB349r1B3tYj2l_ITS6-OhMVZjx8KOa4ANW1hfWk_lzkkLmZZzVasi79uF9ErldVyY4p6FZtrbSa44oCmQuBk5Z0g5ceM8r3F/s1600/online.png) no-repeat;

height: 12px;

width: 16px;

display: inline-block;

margin: 0 0 -4px 6px;

}

.comments .comment-thread.inline-thread .user a {

font-size:13px;

margin: 0px;

padding: 0px;

}

Styling Comment “Reply” button in Blogger:

Almost all blogger templates have a reply button on comments. However, it only works with threaded system. Now a day, all the default blogger templates are connected with threaded comments. So here is the example of the CSS that you can directly copy paste in the StyleSheet of the template.

.comment-actions {

background: #f2f2f2;

padding: 8px;

margin-left: 435px;

border: 1px solid #ddd;

float: right;

margin-top: -30px;

margin-right: 5px;

}

.comment-thread a {

color: #777;

}

.comments .comment .comment-actions a:hover {

text-decoration: underline;

}

Styling Post Author Comments Different from others: 

Most often you have seen that the comment of the post author is highlighted with different backgrounds or a small tag like ‘Editor” or an additional badge is assigned to their name. This helps users to identify the real author.

This can be done with the help of .icon.blog-author that helps you to stylize the comments of the post author differently. Here is the example that you can directly copy and paste in your StyleSheet.  

.comments .comments-content .icon.blog-author {

display: inline-block;

height: 18px;

margin: 0 0 -4px 6px;

width: 18px;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgatAr8bBYVACHsnlFC6UP3k9t8RGMI95A5tnPJIkOiXZskHoEafMedEtxTv2RcJ4WxCi79VSzV3gLN-riN_7yrGIPKH_UC8KOrB8JY-UjfjUHByTluM5WlCKLHSCIxGBddGicgQk7IAY7C/s1600/Verificon.png);

}

We hope this tutorial has helped you in learning how to create a custom style commenting system in blogger. If you face any difficulty or has any suggestion for us then feel free to let us know by leaving a comment below.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).