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

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

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

The writer boxes are the best means to say users that who is genuinely behind this content. It equally good helps inwards providing credibility in addition to improves your site's potency equally well. 

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

The writer box is the best means for readers to interact amongst authors. It equally good helps authors to attain reputation from users in addition to equally good helps inwards achieving personal success.

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

Adding Multi-Author Info Box inwards Blogger Posts

Most of the weblog owners likes to direct keep writer information box at the destination of their posts. Here's how yous tin forcefulness out easily display multi-author information box at the destination of Blogger posts.

1. The real showtime affair yous involve to produce is to activate "Show Author profile widget" from blogger dashboard. Go to Blogger >> Layout >> Blog Posts >> Edit and yous volition run into a listing of dissimilar options equally it is shown inwards the screenshot below:
   
   
2. Now scroll downwards to "Show Author Profile below post" in addition to tick the banking firm agree box correct side past times side to it. Once yous are done amongst making changes press "Save" button.
   
   If yous are using Blogger's default templates that's it, yous volition straightaway endure able to run into a multiple writer information box below your posts. 
   
   However, for users who are using custom Blogger templates should equally good 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 to a higher house 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 again inwards the Blogger template editor search for <div class='post-footer'> in addition to simply to a higher house it glue the next code.
   
   Make certain to add together this code to a higher house each <div class='post-footer'> tag yous honour inwards 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 thence it is of import for yous to completely setup your blogger profile. 
   
   Login to your blogger employment concern human relationship in addition to become to how to edit a Blogger Profile.
   
   

You tin forcefulness out banking firm agree the demo of this widget here.

We promise this tutorial has helped yous inwards 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 near the results inwards the comment department below.

If yous liked this article, delight portion it on Facebook, Twitter of Google+.