How to Add Author Avatar Beside Post Title in Blogger

Today I am going to show you how you can add author image beside the title of every post of your blogger blog. This design looks really cool when there are more than one author in a blog. It helps you to distinguish between the authors of the post. The widget is fully automated so if you change your profile pic then the changes you want will take place.

To add this plugin to your blogger blog. Follow the below steps

Step 1 : Adding CSS

First log in to your Blogger dashboard

Then → Template → Edit HTML.

Press Ctrl + F. and find

    <b:skin>...</b:skin> if it is not expanded.

    Type ]]></b:skin> in search box and press enter key.

Add the below given code just above ]]></b:skin>

CSS Codes:

.avatar-author{float:left;margin-right:10px;border:0;border-radius:50%;padding:0;width:30px;height:30px}

Step 2 : Adding Script

Find </head> and add the below code just above </head>

CSS Codes:

<script> //<![CDATA[ function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')} //]]> </script>

Step 3 : Final Step

Finally search for <b:if cond='data:post.title'> and add the below code just above it.

Note : There may be more than 1 <b:if cond='data:post.title'> data card so be sure to add the below code above the correct data card.

CSS Codes:

<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&callback=av"'/>

After adding this code save the template. You are done now. Now you can see rounded author avatar beside every post title in your Blogger blog.