Author Avatar Beside Every Post Tittle

A

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

How to show Author Avatar Beside Every Post Tittle

Step 1 – Insert CSS in the HTML of your website

First you go to the Blog TitleTemplate 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.

About the author

domdom rung

Add comment

By domdom rung

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives