Adding Avatar Thumbnail on Post Info

Adding Avatar Thumbnails on Post Info - Here's how to add avatar thumbnails to post Revoltify template info.

This avatar thumbnails will appear on the blog posting page, please follow the steps for implementation.

1. Open the Blogger Dashboard
2. Click Template and open Edit HTML
3. Apply the code below in the Item / Post special CSS

.post-info {background:transparent;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;text-align:left;padding:0;box-shadow:none;}
.post-info a {display:inline;background:transparent;color:#666;padding:4px 6px 4px 6px;transition:all .3s ease-out;}
.post-info a:hover {color:#e76e66;}
.author-info, .time-info, .comment-info, .label-info, .review-info {
margin-right:8px!important;display:inline-block;color:#666;padding:10px;}
.post-info .avatar-author {float:left;border:0;padding:0;width:38px;height:38px;box-shadow:none;}
.post-info {font-size:small;text-align:center;background:#69bedd;padding:0;}
.author-info, .time-info, .comment-info, .label-info, .review-info, .post-info a,.post-info a:hover {color:#fff;}

4. Then apply the code below just before </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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*)\//,'/s38$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
</b:if>

5. For application to Markup

Look for the code below

<b:includable id='post' var='post'>

Next look for the code below

<div class='post-info'>

Apply the code below right after the code above

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

Once applied, it will appear like this

<div class='post-info'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
</b:if>

6. Save the template and see the results.