Home
Blogger

How to display author image below post title beside Post information

How to display author image below post title beside Post information
Author images

Author image build credibility of Blog as well as it create an impression among readers that who is the blog owner. Earlier we have found to display author image beside the Post title but this was only for single author blog. But there is a problem for multiple author’s blog to display multiple author image in respective blog post. I am going to share today how to display author image below post title beside Post information for individual author as well as for multiple authors. Suppose If I have made a post then my image will show beside the post information and when my co-author will publish a post then his picture will display beside post information. The benefits of this trick a visitors can easily identify who has written the post without entering into the post. I have choose to display multiple author image below post title beside Post information because if your blog having bigger post title then it will look odd because longer post title always go take 2 lines. So it’s better to display post title beside post information.

The main trick of this tutorial that I will modify the Autho’sVcard. Vcard means where post information display below post title. So I will tweak this Vcard and make compatible for multiple authors. Even if your blog has more than 2 authors you can easily make it work.
So to do this just follow the below steps-


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find this code ]]></b:skin> by Pressing  Ctrl + F

Step 4 Now Copy the below code and paste it above/before ]]></b:skin>

.BSpost-author-1 { background:url(Author 1 Image URL) no-repeat;
font: normal 12px Arial, Georgia, Verdana;
line-height:2em;
Padding-left:16px;
margin: 0 0 8px;
padding: 3px 0pt 20px 33px;
padding-top:13px;
}
.BSpost-author-2 {
background:url( font: normal 12px Arial, Georgia, Verdana; line-height:2em; Padding-left:16px; margin: 0 0 8px; padding: 3px 0pt 20px 33px; padding-top:13px; } .BSpost-author-2 { background:url(Author 2 Image URL) no-repeat;
font: normal 12px Arial, Georgia, Verdana;
line-height:2em;
Padding-left:16px;
margin: 0 0 8px;
padding: 3px 0pt 20px 33px;
padding-top:13px;
} font: normal 12px Arial, Georgia, Verdana; line-height:2em; Padding-left:16px; margin: 0 0 8px; padding: 3px 0pt 20px 33px; padding-top:13px; }

If you have 3 author then add an extra code like below –

.BSpost-author-3 { background:url(Author 3 Image URL) no-repeat;
font: normal 12px Arial, Georgia, Verdana;
line-height:2em;
Padding-left:16px;
margin: 0 0 8px;
padding: 3px 0pt 20px 33px;
padding-top:13px;
} font: normal 12px Arial, Georgia, Verdana; line-height:2em; Padding-left:16px; margin: 0 0 8px; padding: 3px 0pt 20px 33px; padding-top:13px; }

Step 5 Search the below code by using  Ctrl + F

<b:ifcond='data:blog.pageType == &quot;static_page&quot;'><b:else/><span class='post-author vcard'>
  <b:ifcond='data:top.showAuthor'>
  <data:top.authorLabel/>
  <span class='fn'><data:post.author/></span> on <data:post.timestamp/>
  </b:if>
  </span>
</b:if>

Hint 1- Just concentrate on this code that we are looking for Authors Vcard and the code may vary templates to templates. Even if the above code doesn’t match then simply find
author vcard or timestamp this will help you to find the code

Hint 2- Second option to find this code try to find <data:post.body/>because this codewill always be before <data:post.body/>

Step 6  After identifying the code just replace the above code by below code block.

<b:ifcond='data:post.author == &quot;Author-Name-1&quot;'><span class='BSpost-author-1'>
</span>
</b:if>
<b:ifcond='data:post.author == &quot; </span> </b:if> <b:ifcond='data:post.author == &quot;Author-Name-2&quot;'><span class='BSpost-author-2'>
</span>
</b:if>
<b:ifcond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span> on <data:post.dateHeader/>
</b:if> </span> </b:if> <b:ifcond='data:top.showAuthor'> <data:top.authorLabel/> <span class='fn'><data:post.author/></span> on <data:post.dateHeader/> </b:if>

For 3rd author add below code above <b:ifcond='data:top.showAuthor'> this code
<b:ifcond='data:post.author == &quot;Author-Name-3&quot;'><span class='BSpost-author-3'>
</span>
</b:if>
 </span> </b:if>

Customization

  • Replace (Author 1 Image URL, Author 2 Image URL, Author 3 Image URL) with Authors images
  • Change post author name 1 by Author-Name-1, Author-Name-2 and Author-Name-3

Note:

  • Use 30 X 30 pixel image for displaying it below every post title.
  • You must insert the main-author and co-authors names exactly on registered in blog Authors,  otherwise this code will not work.
Multiple author image

  • If you want to use for individual author then delete all Author 2 and Author 3 codes. 

7 comments

  1. I can't find the code of Step 5 bro..
    • I just checked ur site and I have found the code...search this code 'post-author vcard' only then for for the tutorial.
    • Thanks alot..
  2. ]]> cant find in my htm lcode .... i think its not supported in my website
  3. Is it possible to have an author image without code modification by using plugins etc. if you please tell me in detail. thanks in advance
    • Hi Irfan actually this is possible in WordPress not in BlogSpot.
  4. Bro Not Working For Me Tell Me Please What Can I Do...
Go Up