How to Add a Multi-Author Info Box in Blogger Posts

Do you want to add a Multi-Author Info box in Blogger posts? The author bio box allows you to display relevant information about the post author. Author boxes are great for connecting with your readers and providing a sense of credibility to your site. Today, in this tutorial we will show you how to add a multi-author info box in blogger posts.

Why You Need a Multi-Author Info Box In Blogger?

The author boxes are the best way to tell users that who is actually behind this content. It also helps in providing credibility and improves your site's authority as well. 

In the past, we have shown you how to add an author info box in blogger, but it does not work well if your site has multiple authors. Therefore, you need a Multi-author info box below each post.

The author box is the best way for readers to interact with authors. It also helps authors to gain reputation from users and also helps in achieving personal success.

Now let us take a look at how to easily add a multi-author info box in Blogger posts.

Adding Multi-Author Info Box in Blogger Posts

Most of the blog owners likes to have author information box at the end of their posts. Here's how you can easily display multi-author info box at the end of Blogger posts.

1. The very first thing you need to do is to activate "Show Author profile widget" from blogger dashboard. Go to Blogger >> Layout >> Blog Posts >> Edit and you will see a list of different options as it is shown in the screenshot below:
   
   
2. Now scroll down to "Show Author Profile below post" and tick the check box right next to it. Once you are done with making changes press "Save" button.
   
   If you are using Blogger's default templates that's it, you will now be able to see a multiple author info box below your posts. 
   
   However, for users who are using custom Blogger templates should also follow the below instructions to successfully add a multi-author info box.


3. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag and just above it paste the following CSS code:
   
   

   .author-profile-bottom .left {
   width:50%;
   font-family:Poppins, Roboto, Arial, sans-serif;
   letter-spacing:-1px;
   color:#111;
   float:left;
   }
   .author-profile-bottom a {
   text-decoration:none;
   color:#ff0036;
   }
   .author-profile-bottom .right {
   width:42%;
   font-family:roboto;
   font-size:15px;
   line-height:22px;
   color:#7d7d7d;
   float:right;
   }
   .author-profile-bottom {
   float:left;
   width:100%;
   background:#eee;
   margin:0 0 35px;
   padding:30px;
   }
   .author-profile-bottom .left li {
   display:block;
   width:auto;
   font-size:19px;
   line-height:21px;
   font-weight:600;
   margin-bottom:3px;
   }
   .author-profile-bottom .left img {
   float:left;
   margin-right:10px;
   width:70px;
   border-radius:50%;
   }
   * {
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   }



4. Now again in the Blogger template editor search for <div class='post-footer'> and just above it paste the following code.
   
   Make sure to add this code above each <div class='post-footer'> tag you find in your template.
   
   

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <b:if cond='data:post.authorAboutMe'>
           <div class='author-profile-bottom' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
               <div class='left'>
                   <b:if cond='data:post.authorPhoto.url'>
                       <img expr:src='data:post.authorPhoto.url' itemprop='image'/>
                   </b:if>
                   <li>Written by:</li>
                   <li>
                       <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
                           <span itemprop='name'><data:post.author/></span>
                       </a>
                   </li>
               </div>
               <div class='right'>
                   <span itemprop='description'><data:post.authorAboutMe/></span>
               </div>
           </div>
       </b:if>
   </b:if>



5. Once everything is done press "Save Template" to complete the process. 


6. This widget takes information from your Blogger Profile so it is important for you to completely setup your blogger profile. 
   
   Login to your blogger account and go to Edit Blogger Profile Page. You need to upload a proper profile photo, write a small introduction about yourself and make your profile visible to public. Once everything is done, press "Save" located at the bottom of the page. You can also learn how to edit a Blogger Profile.
   
   

You can check the demo of this widget here.

We hope this tutorial has helped you in learning how to add a multi-author info box below blogger posts. Apply this widget on your blog and let us know about the results in the comment section below.

If you liked this article, please share it on Facebook, Twitter of Google+.

Share this post