Blogger Platform Blogging Tutorials

How to Add Multiple Author Bio Box in your Blogger Blog

Written by Iftekhar Ahmed
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.

How to Add Multiple Author Bio Box in your Blogger Blog

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 
How to Enable Author Box in Default Blogger Templates

 

 
  • Click on “Blog Posts” and a new window will open.
  • Tick the option “Show Author Profile Below the post” and save the changes
How to Enable Author Box in Default Blogger Templates
  • 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://lh6.googleusercontent.com/-hk6kY4ALS9U/UpW1rENwFhI/AAAAAAAAANM/FRF1nCfJgmc/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>

Steps to Add Multiple Author Bio Box in your Blogger Blog
  • Replace Iftekhar Ahmed by your Name. Replace the Text in Blue with your Author Bio and replace the Text in Green by Author image.
 

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.
How to Add Multiple Author Bio Box in your Blogger Blog
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.
Get More Secret Guides & Offers

Get More Secret Guides & Offers

Subscribe now and start getting premium tricks and guides related. 

You have Successfully Subscribed!

About the author

Iftekhar Ahmed

Iftekhar Ahmed is the owner of iftiSEO.com and writes on various topics like Online Earning, SEO, Blogging etc. He has worked on many blogs and also works as an SEO Analyst.

14 Comments

  • Greetings, I was testing this code, but I got an error: “Open quote is expected for attribute “cond” associated with an element type “b:if”

    Since I understand nothing about codes, do you have any idea of whats going on?

    I got this error on the second code, placed above

    Thank you!

    • hello, please can any one help me. I have been struggling with this. I have inserted several codes yet my blog hasn’t been effective and i have a couple of guest writers, i want to bring on board. Pls help with your facebook details, lets work this out via a chat. Will appreciate

  • Boss can i send my code to you, I’m a bit confused. As I have posted a couple of codes and dont know what to edit or see the whole part of my codes that has it
    =============================================================================
    check your facebook for it

  • To add to your very informative post. some customized blog template already have author info. so you must tweak the template html to achieve a good result.
    to do this,
    1. simply find this code in the html:
    (using control + f )
    2. check if you can find a “class” or “id” that point that it is a author info. (just do a simple check to be sure – you will find the author details there)
    3. now simply replace all the code in between
    and the next with Iftekhars second code.
    4. now change things to what you want.

Leave a Comment