Ultimate Guide:Customize Blogger Comment Section

Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS

Hello Friends,

Welcome to Techy Web Tech blog's another article.

If you are looking for Ultimate Guide:Customize Blogger Comment Section you are not alone.

At the end of the post your all queries will solve about Ultimate Guide:Customize Blogger Comment Section.

What if you not satisfy ?

Don't worry we are here for you..

Table of Contents [Hide]

Do You Want To Customize Your Blogger Blog Comment Section Professionally ?

In This Post I Have Guide You How You Can Customize Blogger Comment Section Easily By Some Codes Integration.

How To Add Seperate Border To Blogger Comment

Step 1. To add a simple separator go to Template > Edit HTML.

Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:

]]></b:skin>

Step 3. Paste the following style just above it:

.comment-block {
border-bottom: 1px solid #000000;
}

.comments .continue {
  border-top: 0px solid $(widget.alternate.text.color);
}

Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.

Step 4. Save the Template.

How To Add Image Between Each Comment In Blogger

Step 1. Go to Template > Edit HTML and search (CTRL + F) for the following piece of code:

]]></b:skin>

Screenshot:

Step 2. Paste the following just above it:

.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 $(widget.alternate.text.color);
}

Step 3. Save the Template.

How To Add Border And Background Color To Blogger Comment 

Step 1. Go to Template > Edit HTML and search for the following piece of code:

]]></b:skin>

Step 2. Paste the following just above it:

.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 $(widget.alternate.text.color);
}

.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;
}

Step 3. Save the Template.

How To Change Avatar Size In Blogger Comment

Step 1. Go to Dashboard - Template - click on the Edit HTML button.

Step 2. Find (CTRL + F) this code in your template:

]]></b:skin>

Step 3. Copy and paste the following codes just above it.

.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

Step 4. Save the Template.

How To Change Blogger Default Anonymous Avatar In Blogger With Image

1. Go to the theme in the blogger blog and Click edit html.

2. Paste the code below before the blog theme </body>

<script>
var oldSrc = ‘//img1.blogblog.com/img/blank.gif’; //Default blogger image link
var newSrc = ‘http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png’; 
$(‘img[src=”‘ + oldSrc + ‘”]’).attr(‘src’, newSrc);
</script>

4. Finally you save your theme.

If You Want To Add Your Custom Image In Blogger Comment Section Then replace the image URL with the URL of the image which you want To Show.

Bottom Line :

I Hope This Post Help You To Customize Blogger Blog Comment Section.

Impress By This Post ?

Then Show It By Sharing This Post.

Don't Forget To Follow On Social Networks.

Keep In Touch 🙏

Impress with Us?

Feel free to know more About us, contact us, or work with us.

You can find this article on bing or bing news.

What was the your openion, suggestion related this blog post ?

We will love to hear it in the comments.

Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS