How to Show Author Image Beside Every Post Title Of Blog Posts

This time I am going to show you to add author image just beside the every post titles. If you have many author in your blogger or if a blogger has multiple author, this tips can be very useful to them to distinguish the identity of different posts of different author. One author blogs also can use this widget to make their blogger more genuine and reliable from the side of visitors.

I mean if you use this widget, your blogger seems more reliable and this can be a cause of increasing of visitors of your blog. This widget will display your blogger profile image in your every post titles.
Now lets go through the tutorials to add the widget manually.

First Start by Adding CSS to Make Some Style

• First go to blogger template->Edit Template
• Now find the code below. press CTRL + F and find

]]></b:skin>

• Just add the following code just before the above code.

.avatar-author{float:left;margin-right:9px;border-radius:45%;border:0;height:29px;width:29px;}

Second just add the given script just above the </head>

<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>

Third or at last find <b:if cond='data:post.title'>, then add given code above <b:if cond='data:post.title'>.

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

Note: You should note that there can be more than <b:if cond='data:post.title'>, so you should place this code just above the right code.  

Now Click on Save Template button to save this template.

You did successfully. Enjoy blogging.