How To Add Multiple Author Box/Bio In Blogger

If you own a multi author blog, then you might be wondering a possible way where by you can add author boxes for each of those contributes. One of the manual ways that we often use is to add author box HTML in Blogger post editor each time that we write a post.

That can be pretty irritating for the author. So today, we'll see how we can add multiple author boxes only once, and each time a particular author writes a post, his author bio would be shown up automatically below their post. This works like a charm!

This tutorial is just meant for Blogger users as WordPress has various plugins to deal with author boxes.

Before we start off, you may like to read the previous post that I shared for adding a single author box in Blogger:

Step #1 Add The Author-Box CSS

This is the same CSS (design) of the author box that i shared previously that i mentioned above. You can use any stylization for your author box. What matters is the HTML and conditional tags for the multiple author boxes.

Go to Blogger Edit HTML option and search for the following code:

]]></b:skin>

Now just above the mentioned code, add the following code:

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
ul li {
list-style: none outside none;float:right;
}

Step #2 Add The Author Box HTML

Now search for : (Note that we are searching for the following code so that we can place our author box in a desired position)

Now, once you find the above code, place the following HTML below it.

<b:if cond='data:blog.pageType == "item"'>
<--- BeH Author Box 1 --->
<b:if cond='data:post.author == "Author1Name"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Author#1 Image' width='70'/><table><tr><td><b>About Author </b></td><td>

</td></tr></table><br/>
Author#1 Description<br/></p>
</div>

<--- BeH Author Box 2 --->
<b:if cond='data:post.author == "Author2 Name"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Author#2 Image' width='70'/><table><tr><td><b>About Author </b></td><td>

</td></tr></table><br/>
Author#2 Description
<br/></p>
</div></b:if>

I have highlighted the important lines that you got to edit. DONT forget to replace the Author1Name with the 1st authors name.

Note that the author's name that you would use here in the code MUST be same as the orignal account name. The characters are case sensitive so if a minor mistake is made, the author box wont appear for that particular author.

The above code is shown for 2 authors. You can duplicate the code for each author and use it for as many authors as you wish. You just have to add the following code each time for every new author.

<--- BeH Author Box NEW! ---><b:if cond='data:post.author == "Author3Name"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='Author#3 Image' width='70'/><table><tr><td><b>About Author </b></td><td>

</td></tr></table><br/>
Author#3 Description
<br/></p>
</div></b:if>

Save.

Thats it!

I hope that was helpful. In case of any problems, don't forget to leave out a comment below.