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!
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
No comments :
Post A Comment!
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV