How to Customize Blogger Comments

Spread the love

Comment is a most important element of a blog. By comment section your blog readers can express their emotions towards your blog. Using comment your blog reader can tell you their problems and they can give a small review of your blog post. You can maintain a connection with your blog visitor by comments and reply. So comments are very important for a blog post. A good comment   section can give your visitor a strong community feeling. So you need to customize your comment section according to your Blog layout. But there aren’t so many options to customize comments in Blogger.  By customizing your comment section you can give your comments a new look and you can make your blog more professional. A stylish comment system will inspire your visitors to leave a comment on your post

If you want to customize your blogger comments system and look then this tutorial is made for you. In this tutorial, you will get some tricks to customize your comment system and look. By lesson  this you will learn:

[wpsm_titlebox title=”Customize Blogger Comments” style=”4″][wpsm_toplist][/wpsm_titlebox]

So what are you waiting for? Let’s start our tutorial.

How to Add a Separator to Blogger Comments

Step 1.  At first go to Blogger Dashboard. After that click on Template >> Edit HTML.

How to Customize Blogger Comments

Step 2. Now click anywhere inside the HTML box and press CTRL + F key. Than a search box will appear in the HTML box. The search box will appear on the top right side of HTML box.

How to Customize Blogger Comments

Step 3. After that , you have to type or copy and paste this tag in the search box to find this tag. Then hit Enter.

The code have given here:

[wpsm_codebox style=”1″]]]></b:skin>[/wpsm_codebox]

Step 4. If you find this code in the HTML box then you have to copy and paste this code just above the tag.

The code have given here:

[wpsm_codebox style=”1″] .comment-block {
border-bottom: 1px solid #000000;
}
.comments .continue {
border-top: 0px solid #000;
}[/wpsm_codebox]

Step 5. Now save the template. Just it.

Note: To change the color of separator you have to replace the “#000000” with your color hex code( #000000 is hex code of Black color)

You can get your favorite color’s  hex code here.

After applying this code without any customization your comment should look like this:

How to Customize Blogger Comments

How to add a Divider Image Below Comments in Blogger

You  can use any image of animated image(GIF) here. Just like this :

How to Customize Blogger Comments

For this you have to follow some steps. Just follow those simple steps:

Step 1. Now from the Blogger Dashboard go to Template >> Edit HTML.

Step 2. Than Search(CTRL+F) this tag inside the HTML box.

The tag have given here:

[wpsm_codebox style=”1″]]]></b:skin>[/wpsm_codebox]

Step 3. After that if you have found the code then simply copy and best this code just before the tag.

The code have given here:
[wpsm_codebox style=”1″] .comment-block {
background-image:url(http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAC_0/UXbviThYl2w/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid #000;
}
[/wpsm_codebox]

Step 4. Just save the template by clicking save.

Note: You can replace the image or GIF by replacing the blue URL with your image or GIF URL.

You can find some beautiful divider  images here.

How to Change Blogger Comment Box Style, Background Color,Text Color and Border Color

You can change you comment box style compliantly. You can also change the background color, text color and the border also.

After applying this method  your blogger comment box should look like this:

How to Customize Blogger Comments

To make your Blogger comment box like this and for applying customization on this comment box, you have to follow those steps:

Step 1. First of all go the Template >> Edit HTML from Blogger Dashboard.

Step 2. Than search(CTRL+F) for this tag in the HTML box.

The tag have given here:

[wpsm_codebox style=”1″]]]></b:skin>[/wpsm_codebox]

Step 3. After that if got that tag, than just copy and paste this code above the tag that you have founded now.

The code have have given here:

[wpsm_codebox style=”1″] .comment-block {
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Border 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;
}
.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 in Comments */
}
.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}
.comments .comments-content .user a{
color:#1982D1; /* Author’s name color */
font-size: 12px; /* Author’s name 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 solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px solid #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 solid #F2F2F2;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}
[/wpsm_codebox]

Note: If you want to change the color of comment box then just replace the hex color code with your favorite color code in  /* Background Color */ .

  • To change the boarder color of your comment box just simply change the color code #f1f1f1 in /* Border style */
  • You can change the text color of comment by changing the color code in /* Font Color in Comments */
  • Author’s name and color can be changing the value of color code and frond size in /* Author’s name color */ and /* Author’s name size */.
  • To modify the The reply box  by changing the value of  background-color and border-left of /* Background color behind the replies */ and  /* Border on the left side of replies */.

Thank you for being with us. Thank you for your pittance!

If you face any problem about this post or need any help please comment here or contact us and send your questions and problems.

bnewtech Editorial Staff

Editorial Staff at Bnewtech is a team of reviews and tutorial writing experts led by BTS. Page maintained by BTS.


Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.