How To Add Multiple Author Box/Bio In Blogger

multiple author boxes 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:


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)

<div class='post-footer-line post-footer-line-1'/>

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


 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<--- BeH Author Box 1 ---> 
<b:if cond='data:post.author == &quot;Author1Name&quot;'>
<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>

<ul>
<li>
<a target="_blank" rel="nofollow" href="Author#1 Facebook Page link">
<img class="facebook" width="16px" height="16px" src="http://4.bp.blogspot.com/-_GnxSs9R6m4/TiJ-zpgw6vI/AAAAAAAAAoA/7kzbtmR2XMA/s1600/facebook.png" alt="Be our fan on facebook!">
</a>
</li>
<li>
<a target="_blank" rel="nofollow" href="Author#1 Twitter Profile Link">
<img class="facebook" width="16px" height="16px" src="http://4.bp.blogspot.com/-yE7vjZp0c38/TtM75QArAvI/AAAAAAAABl0/Le8Wyy00yIE/s1600/icon_twitter_bird_16px.png " alt="Be our fan on Twitter!">
</a>
</li>
<li>
<a target="_blank" rel="author" href="Author#1 Google+ Profile Link">
<img class="facebook" width="16px" height="16px" src=" http://2.bp.blogspot.com/-vnr_ilCdWF8/TtM745mfbgI/AAAAAAAABlw/aN9xw3nxIH8/s1600/googleplus_16x16.png" alt="Be our fan on Google+!">
</a>
</li></ul>

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

<--- BeH Author Box 2 ---> 
<b:if cond='data:post.author == &quot;Author2 Name&quot;'>
<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>

<ul>
<li>
<a target="_blank" rel="nofollow" href="Author#2 Facebook Page link">
<img class="facebook" width="16px" height="16px" src="http://4.bp.blogspot.com/-_GnxSs9R6m4/TiJ-zpgw6vI/AAAAAAAAAoA/7kzbtmR2XMA/s1600/facebook.png" alt="Be our fan on facebook!">
</a>
</li>
<li>
<a target="_blank" rel="nofollow" href="Author#2 Twitter Profile Link">
<img class="facebook" width="16px" height="16px" src="http://4.bp.blogspot.com/-yE7vjZp0c38/TtM75QArAvI/AAAAAAAABl0/Le8Wyy00yIE/s1600/icon_twitter_bird_16px.png " alt="Be our fan on Twitter!">
</a>
</li>
<li>
<a target="_blank" rel="author" href="Author#1 Google+ Profile Link">
<img class="facebook" width="16px" height="16px" src=" http://2.bp.blogspot.com/-vnr_ilCdWF8/TtM745mfbgI/AAAAAAAABlw/aN9xw3nxIH8/s1600/googleplus_16x16.png" alt="Be our fan on Google+!">
</a>
</li></ul>

</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 == &quot;Author3Name&quot;'>
<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>

<ul>
<li>
<a target="_blank" rel="nofollow" href="Author#3 Facebook Page link">
<img class="facebook" width="16px" height="16px" src="http://4.bp.blogspot.com/-_GnxSs9R6m4/TiJ-zpgw6vI/AAAAAAAAAoA/7kzbtmR2XMA/s1600/facebook.png" alt="Be our fan on facebook!">
</a>
</li>
<li>
<a target="_blank" rel="nofollow" href="Author#3 Twitter Profile Link">
<img class="facebook" width="16px" height="16px" src="http://4.bp.blogspot.com/-yE7vjZp0c38/TtM75QArAvI/AAAAAAAABl0/Le8Wyy00yIE/s1600/icon_twitter_bird_16px.png " alt="Be our fan on Twitter!">
</a>
</li>
<li>
<a target="_blank" rel="author" href="Author#1 Google+ Profile Link">
<img class="facebook" width="16px" height="16px" src=" http://2.bp.blogspot.com/-vnr_ilCdWF8/TtM745mfbgI/AAAAAAAABlw/aN9xw3nxIH8/s1600/googleplus_16x16.png" alt="Be our fan on Google+!">
</a>
</li></ul>

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

Thats it! Hope that was helpful. In case of any problems, dont forget to leave out a comment below. 

COMMENTS

BLOGGER: 8
Loading...
.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: How To Add Multiple Author Box/Bio In Blogger
How To Add Multiple Author Box/Bio In Blogger
http://3.bp.blogspot.com/-mcr3p3LrUdo/T5LfaOCdlII/AAAAAAAADWc/gmPBfbhKU54/s320/authors.jpg
http://3.bp.blogspot.com/-mcr3p3LrUdo/T5LfaOCdlII/AAAAAAAADWc/gmPBfbhKU54/s72-c/authors.jpg
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/04/how-to-add-multiple-author-boxbio-in.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/04/how-to-add-multiple-author-boxbio-in.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade