How to display author image below post title beside Post information

How to display author image below post title beside Post information 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 authors 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 its better to display post title beside post information. The main trick of this tutorial that I will modify the AuthosVcard. 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 1Log in to your BloggerAccount and Go to yourBloggerDashboard Step 2Click on Now click on-Template-EditHTML- Unfold code Step 3Now Find this code]]/b:skin by PressingCtrl+F Step 4Now 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 5Search the below code by usingCtrl+F b:ifcond='data:blog.pageType == quot;static_pagequot;'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 doesnt 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 beforedata: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-1quot;'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-2quot;'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-3quot;'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 byAuthor-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. If you want to use forindividualauthor then delete all Author 2 and Author 3 codes.