How to Add Multiple Author Bio Box in your Blogger Blog

Are you struggling to add an Author box on your blogger blog? Well, I have got many requests from blogger platform bloggers about the problems they are facing in adding a working and a good looking author box. So instead of answering them through mails, I have come up with this tutorial which will help you add an author bio box below your blog posts.This isn’t a simple code, this thing works for multiple author blogs as well. It means that if you have multiple authors writing content on your blog, then this widget/code will display their author box automatically in their posts. It means the author will not have to add his/her code manually into their html section of the blog post.

Also Read: How to Add Social Content Locker in Blogger

So in this post I have posted 2 different tutorials for you. 

1. How to Enable Author Box in Default Blogger Templates
2. How to add Author Box in Custom Blogger Template

How to Enable Author Box in Default Blogger Template

If you use the default blogger templates then you can simply show your author box by following the given steps:

• Open up your blogger dashboard and Go to Layout Section 

• Click on “Blog Posts” and a new window will open.
• Tick the option “Show Author Profile Below the post” and save the changes

• Voila!! Your author profile will get displayed.

Steps to Add Multiple Author Bio Box in your Blogger Blog

Most of us use customized blogger templates and in that case the above tutorial or method does not work. So if you are using a customized template follow this tutorial and get your work done. If you want a more customised box google for different boxes and use this tutorial to add it on your blog.

• Open up your blogger dashboard, go to Template Section and Click Edit HTML.
• Search for ]]></b:skin>  and paste the given code above ]]></b:skin> . 

/***** www.iftiseo.com author box starts *****/

.tbs-author-box {

background: #F7F7F7;

margin: 20px 0 40px 0;

padding: 10px;

border: 1px solid #E6E6E6;

overflow: auto;

}

.tbs-author-box p {

margin: 0;

padding: 0;

}

.tbs-author-box img {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 4px;

border: 1px solid #E6E6E6;

}

/***** www.iftiseo.com author box ends *****/

• Now Press CTRL+F and search for <data:post.body/> 
• Paste the following code below it as shown in the picture.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:if cond=’data:post.author == &quot;Iftekhar Ahmed&quot;’>
<div class=’tbs-author-box’>
<p>
<img alt=” class=’avatar avatar-60 photo’ height=’100′ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ASICyUkUHpY2kDT9o8L3E2oWWGxb2dDy_Gu3DlOfqeq_PqxjJLS2cYqlPDPOkDYBHG1IcgxExwClBd1Yiq77H8A-8LD_JaS0GD_nwyemCMxPP3rU003iHHZkdOJ6p4r97mf4swQXggCZ/w509-h512/988354_213183655529152_1643599311_n.jpg’ width=’110’/><b>About Author</b><br/>
Iftekhar Ahmed is an 19 year old enterprenuer who writes on various topics like Online Earning, SEO, Blogging and a lot more. He has worked on many blogs and also works as an SEO Analyst. Apart from blogging he is also pursuing a degree in Computer Science Engineering <br/></p>
</div></b:if>
</b:if>

• Replace Iftekhar Ahmed by your Name. Replace the Text in Blue with your Author Bio and replace the Text in Green by Author image.

---

SEE ALSO

• Howto change the Scrollbar of your Blogpage
• Howto add menu with sub-menu in blog (with on hover mouse effect)
• HowTo Add Messenger Icon Your Website/Blog For Live Chat
• Howto replace free template footer with your own
• Howto activate auto scrolling recent post in your blogger page
• Howto search for information on the internet?

---

How to Show Author Bio Box for different Authors

If we have a multiple author blogger blog or if we allow other bloggers to do guest post on our blog, So in such cases the guest blogger/author would like to get his Bio box displayed in place of your’s. So this code will allow you to do so. To add author boxes for different authors just add the same code given above. All you need to edit will be his name, Bio and his image link.

You can see the above image, I have added the same code again for my guest blogger Yashraj Kakkad.

Common Problems You May Face

1. Author Box doesn’t show after adding the code below <data:post.body/>.

When you search for <data:post.body/>  you will find it many times depending upon your template. So you have to check adding the author box code below every instance of <data:post.body/>.

For example in iftiSEO ELICE Template it works with the first instance itself. 

2. Author Box not displayed even after adding the code below every <data:post.body/>

This thing happens if you misspell your name with the name by which you are registered as an author. Open your blogger dashboard and click on settings and go to basic settings. Make sure the Author name matches with the name that you add in the author box. See the snap below for more.

iftiSEO authors

Final Words

I hope this complete tutorial will solve your problem of adding author box in your blogs. If you still face any issue, leave a comment below and I will solve your problem.