by

Author Avatar Beside Every Post Tittle

image_pdfimage_print

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.

image_pdfimage_print

Leave a Reply

Your email address will not be published. Required fields are marked *