Previously, I have posted a tutorial about how to add an author profile image just below post title for a single author blog. Today, I am going to show you how to add an author profile picture in a multi-author blog. This post is almost the same with that previous tutorial, the only difference is, we need another HTML code to make the profile pic of your co-members to appear just below your post title. See the screenshot below and the live demo here.
This is necessary if you are running a blog with team of few members (i.e., multi-author blog), then you may get confused about adding an author box for each author or contributor. Displaying the author profile image by adding the HTML code is a common practice followed by several bloggers. But it is a pretty irritating job to add an author profile pic every time when they post the article on your blog. So, if you are looking for a solution for it, then today you are at right place. You can add an author bio widget for each team member to your blog by adding HTML code just once in your template. Without so much word to say, Let's check out by following the simple steps below.
Also Check: How To Add Guest Author Box In Blogger
Step 1. Go to Blogger Dashboard >> Template >> Edit HTML (back- up your template, this is necessary for your reference)
Step 2. Find the code below but choose the second one.
Step 5. Next is find the code below but again please choose the second one.
1. Replace the blue bold text with your own image url. Click here on how to get the image url of your image.
2.To change your image size, just edit or replace 24 px
Step 7. Now, if you have another author(s) that contribute to your blog, simply add the code below just above <b:if cond='data:top.showAuthor'>
1. Replace jun-jun candol with the correct author profile of your co-member.
2. Change https://www.blogger.com/profile/17436144636923330521 with his author profile.
3. Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjepSawZ6klomevv6cfzcziZcal_bv5VOH_mOXvHR5XbVKiB-wKWyWNCO2xXrR4r3xBUBD5l34HI5dWEhfWKJxSkxfY3iVHwmGkDABYOw4i_rUhlxIT5Y3jVXuXsDLXAHOMatQisVEi7G/s1600/love.jpg with his image link respectively.
Hope you liked this complete tutorial on 'how to add multiple author profile below post title'. Let me know your valuable feedbacks about this guide and also share this article with your friends. For more updates, like us on Facebook and subscribe us. Thank You pal!
This is necessary if you are running a blog with team of few members (i.e., multi-author blog), then you may get confused about adding an author box for each author or contributor. Displaying the author profile image by adding the HTML code is a common practice followed by several bloggers. But it is a pretty irritating job to add an author profile pic every time when they post the article on your blog. So, if you are looking for a solution for it, then today you are at right place. You can add an author bio widget for each team member to your blog by adding HTML code just once in your template. Without so much word to say, Let's check out by following the simple steps below.
Also Check: How To Add Guest Author Box In Blogger
Step 2. Find the code below but choose the second one.
<span class='post-author vcard'>Step 3. Below that code in step 2 is a code which may look like this:
<b:if cond='data:top.showAuthor'>Step 4. Delete all that code in step 3.
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
Step 5. Next is find the code below but again please choose the second one.
.<div class='post-header-line-1'/>Step 6. Just below that code, paste the code below.
<span class='post-author vcard'>
<b:if cond='data:post.author == "AuthorName"'>
<span class='author'><a href='Author-Profile-URL'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYAS7NywmEOZ-z_8YX5eAZraE7H-b-_dXf837BD3KuczrnzHUP3EFTrXPYOMJpi0Fctw_oJA8XQTB-Gm87iVibwX2jVi91fvvy-JTR5F9b2ph4JpXJdI3mVFGeCxOk9SUBZbRvNnHeQnE/s1600/cerwen+profile+pic.png' style='margin-bottom: -3px; margin-right: 1px; padding: 2px; height: 24px; width: 24px; border:1px solid #d0d0d0; '/></a></span>
</b:if>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
Customization of the above code:
1. Replace the blue bold text with your own image url. Click here on how to get the image url of your image.
2.To change your image size, just edit or replace 24 px
Step 7. Now, if you have another author(s) that contribute to your blog, simply add the code below just above <b:if cond='data:top.showAuthor'>
<b:if cond='data:post.author == "junjun candol"'>
<span class='author'><a href='https://www.blogger.com/profile/17436144636923330521'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjepSawZ6klomevv6cfzcziZcal_bv5VOH_mOXvHR5XbVKiB-wKWyWNCO2xXrR4r3xBUBD5l34HI5dWEhfWKJxSkxfY3iVHwmGkDABYOw4i_rUhlxIT5Y3jVXuXsDLXAHOMatQisVEi7G/s1600/love.jpg' style='margin-bottom: -5px; margin-right: 3px; padding: 2px; height: 28px; width: 28px; border:1px solid #d0d0d0; '/></a></span>
</b:if>
Note:
1. Replace jun-jun candol with the correct author profile of your co-member.
2. Change https://www.blogger.com/profile/17436144636923330521 with his author profile.
3. Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjepSawZ6klomevv6cfzcziZcal_bv5VOH_mOXvHR5XbVKiB-wKWyWNCO2xXrR4r3xBUBD5l34HI5dWEhfWKJxSkxfY3iVHwmGkDABYOw4i_rUhlxIT5Y3jVXuXsDLXAHOMatQisVEi7G/s1600/love.jpg with his image link respectively.
Hope you liked this complete tutorial on 'how to add multiple author profile below post title'. Let me know your valuable feedbacks about this guide and also share this article with your friends. For more updates, like us on Facebook and subscribe us. Thank You pal!
Anny Solway 
