How To Add Together A Multi-Author Information Box Inwards Blogger Posts

Do you lot desire to add together a Multi-Author Info box inward Blogger posts? The writer bio box allows you lot to display relevant information almost the post author. Author boxes are keen for connecting amongst your readers in addition to providing a feel of credibility to your site. Today, inward this tutorial nosotros volition present you lot how to add together a multi-author information box inward blogger posts.

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

The writer boxes are the best agency to say users that who is genuinely behind this content. It too helps inward providing credibility in addition to improves your site's authorization every bit well. 

In the past, nosotros direct keep shown you lot how to add together an writer information box inward blogger, but it does non operate good if your site has multiple authors. Therefore, you lot necessitate a Multi-author information box below each post.

The writer box is the best agency for readers to interact amongst authors. It too helps authors to reach reputation from users in addition to too helps inward achieving personal success.

Now allow us direct keep a await at how to easily add together a multi-author information box inward Blogger posts.

Adding Multi-Author Info Box inward Blogger Posts

Most of the weblog owners likes to direct keep writer information box at the cease of their posts. Here's how you lot tin easily display multi-author information box at the cease of Blogger posts.

1. The rattling start affair you lot necessitate to create is to activate "Show Author profile widget" from blogger dashboard. Go to Blogger >> Layout >> Blog Posts >> Edit and you lot volition run into a listing of dissimilar options every bit it is shown inward the screenshot below:
   
   
2. Now scroll downwards to "Show Author Profile below post" in addition to tick the depository fiscal establishment lucifer box correct side yesteryear side to it. Once you lot are done amongst making changes press "Save" button.
   
   If you lot are using Blogger's default templates that's it, you lot volition instantly hold upwards able to run into a multiple writer information box below your posts. 
   
   However, for users who are using custom Blogger templates should too follow the below instructions to successfully add together a multi-author information box.


3. Go to Blogger >> Template >> Edit HTML >> Search for ]]></b:skin> tag in addition to simply higher upwards it glue the next 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 i time to a greater extent than inward the Blogger template editor search for <div class='post-footer'> in addition to simply higher upwards it glue the next code.
   
   Make certain to add together this code higher upwards each <div class='post-footer'> tag you lot detect inward 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 consummate the process. 


6. This widget takes information from your Blogger Profile in addition to thus it is of import for you lot to completely setup your blogger profile. 
   
   Login to your blogger concern human relationship in addition to acquire to how to edit a Blogger Profile.
   
   

You tin depository fiscal establishment lucifer the demo of this widget here.

We promise this tutorial has helped you lot inward learning how to add together a multi-author information box below blogger posts. Apply this widget on your weblog in addition to allow us know almost the results inward the comment department below.

If you lot liked this article, delight percentage it on Facebook, Twitter of Google+.