How To Change Avatar Size In Blogger Comments

This simple trick will help you to modify the avatars size in Blogger comments. For changing the style and size of avatars, we have to add some CSS codes in our Blogger template. So, lets begin:

Step 1.

Go to Dashboard - Template - click on the Edit HTML button - Proceed

...now select Expand Widget Template (I recommend to make a backup first)

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

]]></b:skin>

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

[Works in Blogger threaded comment system]

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

[for old blogger commenting system]

.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_xrFqKCWamVEZ7G957FeaPKpkulbMdgfKsOA4uqk-1weGMijng_qHwlvrT7VmPgk7ksRkor9Vlo3Cz0T23rq8KqFB6udYQLMi8gWqqwLq7JvwvSQEi33FtrHwYk3m4W1B3JRblk_SAHg/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}

Note: If you want bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URL address in blue with your own. (works only for previous commenting system)

Step 4. Save the Template.

Now view your blog to see the results. Hope you enjoy!

Read More..

How to change Blogger Post A Comment Message

In this tutorial i will show you how to replace the Post A Comment text that appears above the comment form with an image. Also, I will make available to you a few cool images or you can add your own image if you like... so lets get started.

How to replace Post a Comment with an image

To replace  "Post A Comment" message in your Blogger / Blogspot blog follow the next steps:

Step 1. Log in to Blogger, go to your Blogger Dashboard >> Design >> Edit HTML

Step 2. Tick the "Expand Widget Templates" checkbox.

Step 3. Now search (CTRL + F) for the code marked in red:

<a expr:href=data:post.addCommentUrl expr:onclick=data:post.addCommentOnclick>
<data:postCommentMsg/></a>

...and for this one too:

<h4 id=comment-post-message><data:postCommentMsg/></h4>

Step 4. Replace <data:postCommentMsg/> with one of the below images codes:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivHQJiijAjvhg4hjd6Iwg1svDiHTT6F53b-WA8GDJS796kUhnmwXvY22S3Dsf8AL7LhDYOevHcxOKp6ALkNQw26aRMkA_CiMsCWSCpd2_lh4lg3TwuhhrvyiTiIBX-DGacUgbBzohNf00/s1600/leave+a+comment.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbO5huXcNQ8iALFrxIkovU-R-lxUch_eDl7-o5ESeqhsig6oe79sRZB5_qxpw9GiNrvHwlV62XKb8WamsPugb1hu24NPCPaxRlNi6Otnq3p8G55ztBLJUaTyMtJq6NppUDQsW-tKJ9ywQ/s1600/Post+a+comment+blogger.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxL4IbwMEAaIWlfqIp1vqiu7jHGd1gaN95uYxZMW1w9_rAV3srL8_PowX7j-FqNCAh4PgoztkD0ZlpEKPWcjPfg5ACF60wgiDYTfq6OdgGKrux7Q6lSSuZ_DrHpXL2BrfQ8by-Rp4mzwl/s1600/animated+comment+arrow.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuYx5EMei6FmhVT-BAhcI3zeJaz39qqinLq2QMkDfRhdjNEPlLXePgJV52gJC6divDEN58Ih-Dz6rWUXmtp-ZAD9zfW1-UTALirtw-eJGoQ7px8WyXlwKIPW8VyTXqVcj7Tr7GKCrcqoE-/s1600/leave+a+comment2.png" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo3AZ6qRuYCRsVhWaPPBWuHxr1XJjiqMcY_poDgmD1aivLBckyr78szia2ebtHQ1L2-9svMS-ZMqyl3bKJvreeOvHRHzYCIj4HXlJhNp4pQ4BrQ0RzXQVcW4cR-nyat7AHWrEZDRlCBTkW/s1600/comment.gif" />

You can use your own image instead. Just upload your image on Blogger, switch to Edit HTML tab, copy the image code and replace <data:postCommentMsg/> with your code.

UPDATE! Step 5. The first steps will replace the text only when there are no comments available. To show the image each time new comments are added, we should add the code of the image we want to appear after the 4th of the below code (search 4 times for it):

<p><data:blogCommentMessage/></p>

Step 6. Save Your Template.

Thats it! I hope you like your new comment form !

Read More..