How to Create a Custom Style Comments System in Blogger

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(http://4.bp.blogspot.com/-IWb4aHUGy9Y/UbCY5Le708I/AAAAAAAABWs/7quaLpItlhM/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(http://3.bp.blogspot.com/-oXtMYI4_PL4/UbCYKeISeSI/AAAAAAAABWk/Zx8WKou8CkU/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

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

Comment With:
OR
Choose Wisely!

28 comments

June 8, 2013 at 6:19 PM

hello brother,
i from indonesia, i want ask you some question:
1) what's different with threaded wordpress look comment for blogger??
2) that's like your blog comment or not?
3) can you make demo for this tutorial?
regards,
Angwyn (http://ah-shared.blogspot.com)

June 8, 2013 at 8:45 PM

Wow, nice tutorial, thank you for sharing it with us !

June 8, 2013 at 10:58 PM

thanks for a nice info!

i have some questions and hope you would solve this.

1. I dont want to use my google profile name in my blog and still want to have different or unique comment style for author, i use openid to comment as author.

2. any other way to do this?

Editorial Team MOD
June 9, 2013 at 12:37 AM

1. Both commenting system is quite same. The difference is of apperance, the person who can comment. Like on Blogger, you cannot comment with a WP Account and similarly on WP you cannot comment with a Blogger account.

2. This one is not like our commenting system. Though, its really much similar to us.

3. Here is the demo http://pakimagtheme.blogspot.com/2013/06/the-beautiful-karachi-in-night.html

Editorial Team MOD
June 9, 2013 at 12:38 AM

Well this is something that looks impossible to me. You cannot connect your OPEN ID Profile as an admin. The blogger dynamics doesn't allows us to do that.

June 9, 2013 at 11:59 PM

Thank You So much! I always wanted to have that Admin tag besides my name ;)
Thanks for this useful post. We certainly need to make a lot of customizations in our blogger html to compete against wordpress :)

June 10, 2013 at 6:47 AM

thanks for your reply!

any other way to achieve the same like using custom name instead of blogger account name???

Editorial Team MOD
June 10, 2013 at 7:33 AM

We can but all the people who will comment with an OPEN ID. It would also show them as Admin. So its not really what we can do anything with.

June 15, 2013 at 8:47 AM

please put the demo link on post

Editorial Team MOD
June 16, 2013 at 2:52 AM

Its a Guide, there is no demo available.

July 5, 2013 at 12:54 AM

Assalamaulaikum
can you give me the trick to make after user click reply button, the comment form will be under the reply like your blog please. thank you.

Editorial Team MOD
July 5, 2013 at 2:43 AM

Walikum Asalam!

We are using custom scripts, we might share it very soon!

July 23, 2013 at 8:06 AM

Thank's Its UseFull :D

September 8, 2013 at 12:24 PM

Bro is There any solution to get this same CSS in wordpress .... please bro give me Im Waiting ....

Editorial Team MOD
September 8, 2013 at 4:52 PM

Check this out

http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-comment-form/

September 16, 2013 at 10:13 AM

Hello, i posted all the above codes into my blog via custom CSS and it didnt work, am I doing something wrong?

Editorial Team MOD
September 20, 2013 at 12:15 AM

This is just a guide to create your own Comment System by studying and making changes

October 3, 2013 at 2:20 PM

Hi, Thanks for the tips.

I have a little problem with this code in my blog, especially when I use the tag .item-control.blog-admin {display: none;}.

It makes the comment trash icons disappear. It is ok for me.

But the question is, using that tag, the quickedit button in my posts also disappears, And I need it a lot.

Please, is there a way to get rid of the trash comment icon without losing the quickedit?

Thanks again.

October 11, 2013 at 10:50 AM

Hi, I have a problem with the comment section.
As i want to remove Comment (like it shows 3 comments: , 7 comments etc.)
i want to remove comment (comments:) but not number of comment (3 or 7).

Editorial Team MOD
October 14, 2013 at 5:02 PM

I couldn't understand what you mean?

Editorial Team MOD
October 14, 2013 at 5:35 PM

Can you please provide your blog URL so we can provide the solution

November 3, 2013 at 12:11 AM

my blog has multiple author, how to show the icon for blog admin because .icon.blog-author only show for post author?

Editorial Team MOD
November 3, 2013 at 3:58 AM

That's a bit tricky thing because blogger doesn't have Admin condition tags. What it has its for author and that goes to the guy who has written this post.

If we come up with something like this, we will surely push a tutorial on it.

January 17, 2015 at 12:16 PM

I'd like to try it bro'.. and I let you know after.

January 30, 2015 at 1:50 PM

Very helpful. Thank you so so much. You simply rock! I learnt a lot from this.
Respect!

February 22, 2016 at 6:26 PM

How change anonymous avatar?

June 2, 2016 at 3:56 PM

Thank you so much

July 4, 2016 at 7:27 AM

i have don all these but nothing happend

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.