Displaying a blogger’s photo beside each blog post’s title may be an attractive idea. By applying this tricks on your blogger blog, your blogger profile image will appear in your every post titles. You don’t have to upload any profile images seperately. Specially this idea is very useful for those blogs having multiple authors and contributors. This way we can recognize instantly who is the contributor of the particular blog post. This simple tips will allow you to distinguish the identity of different posts of different authors very easily.

Here is the step by step guide.

1. Go to Blogger Dashboard  >Template  >Edit HTML
2. Click anywhere on the HTML code area and press Ctrl+F and type ]]></b:skin>, then press Enter.
3.Just above this ]]></b:skin> , copy and paste the following code.

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

4.Copy and paste the following code just before </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>

5. Now find <b:if cond=’data:post.title’>, and copy and paste the following code just before this line.

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

Sometime there may be more than one <b:if cond=’data:post.title’>, in this case you should place the given code just before the right one. So preview your template before saving. If everything is okay and author image appeared on the titles, SAVE the template.
You are DONE.

image-on-title

About the author

Krishna Thapa

I am Krishna Thapa, I am from Nepal and live in Israel. I love to write blogs on Art, Information and Technology. Thank you for stopping by, keep visiting.