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.
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:

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.

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; }

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>

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

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.


Thank you for using this code.


Have any questions? Feel free to ask me via the comments section! Remember to share this tutorial with others on Facebook, Twitter & Google Plus.