How To Add Multiple Author Profile Image Below Post Title In Blogger

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.

<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 == &quot;AuthorName&quot;'>
<span class='author'><a href='Author-Profile-URL'><img src='http://4.bp.blogspot.com/-s7omNra0EFc/Ur2GWB60gYI/AAAAAAAAB9E/To8_ASb-O1A/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 == &quot;junjun candol&quot;'>
<span class='author'><a href='https://www.blogger.com/profile/17436144636923330521'><img src='http://4.bp.blogspot.com/-q7Jq_uoMdl0/U2D63r9h87I/AAAAAAAACKQ/PSwgg5lFNeg/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 http://4.bp.blogspot.com/-q7Jq_uoMdl0/U2D63r9h87I/AAAAAAAACKQ/PSwgg5lFNeg/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!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook