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

A nice trick for your personal blog.Add photos Author Avatar Beside Every Post Title Of Blog Posts. This trick is extremely simple, just a few steps you can attach your logo image on the Title Blogger .

Step 1 - Insert CSS in the HTML of your website

First you go to the Blog Title → Template → Edit HTML. Press Ctrl + F. You find <b: skin> ... </ b: skin> insert the following code in the middle of it. Or search]]> </ b: skin> and insert the following code above]]> </ b: skin>. 

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

Step 2 - Insert Javascript in the HTML of your website

Find </ head> and insert the following code before 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>

Step 3 - Search <b: if cond = 'data: post.title'> then add given code above.

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. 

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

Now Click on Save Template button to save this template.You did successfully. Enjoy blogging.