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.
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.
<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'>
<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 4. Delete all that code in step 3.
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!
