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

Do y'all desire to add together a Multi-Author Info box inwards Blogger posts? The writer bio box allows y'all to display relevant information almost the post author. Author boxes are non bad for connecting alongside your readers in addition to providing a feel of credibility to your site. Today, inwards this tutorial nosotros volition demonstrate y'all 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 agency to say users that who is genuinely behind this content. It likewise helps inwards providing credibility in addition to improves your site's authorisation equally well. 

In the past, nosotros get got shown y'all how to add together an writer information box inwards blogger, but it does non locomote good if your site has multiple authors. Therefore, y'all take away a Multi-author information box below each post.

The writer box is the best agency for readers to interact alongside authors. It likewise helps authors to attain reputation from users in addition to likewise helps inwards achieving personal success.

Now permit us accept a expect 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 spider web log owners likes to get got writer information box at the cease of their posts. Here's how y'all tin easily display multi-author information box at the cease of Blogger posts.

1. The real kickoff affair y'all take away to create is to activate "Show Author profile widget" from blogger dashboard. Go to Blogger >> Layout >> Blog Posts >> Edit and y'all volition encounter 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 cheque box correct side yesteryear side to it. Once y'all are done alongside making changes press "Save" button.
   
   If y'all are using Blogger's default templates that's it, y'all volition at i time last able to encounter a multiple writer information box below your posts. 
   
   However, for users who are using custom Blogger templates should likewise 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 but 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 but 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 y'all discovery 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 hence it is of import for y'all to completely setup your blogger profile. 
   
   Login to your blogger job organization human relationship in addition to acquire to how to edit a Blogger Profile.
   
   

You tin cheque the demo of this widget here.

We promise this tutorial has helped y'all inwards learning how to add together a multi-author information box below blogger posts. Apply this widget on your spider web log in addition to permit us know almost the results inwards the comment department below.

If y'all liked this article, delight percentage it on Facebook, Twitter of Google+.

Baca Juga