Ultimate Guide:Customize Blogger Comment Section

Share on:

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

Ultimate Guide:Customize Blogger Comment Section

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


customize comments, blogger


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

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

]]></b:skin>

Ultimate Guide:Customize Blogger Comment Section


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

blogger comments, blogger tricks, blogger tutorials



Step 1.Go toTemplate>Edit HTMLand search (CTRL + F) for the following piece of code:

]]></b:skin>

Screenshot:
Ultimate Guide:Customize Blogger Comment Section


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

blogger tips, blogger tricks, gadgets


Step 1.Go toTemplate>Edit HTMLand 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 –Templateclick on theEdit HTMLbutton.

Ultimate Guide:Customize Blogger Comment Section


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.

Also Read:  How To Hide Blogger Post Images To Show Only Homepage

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 🙏

Leave a Comment