How To Add Multiple Author Bio Widget For Blogger Blog

Many readers asked me "How to add Author box for multiple author blogger blog" So I designed this widget. This widget is for Blogger users only as WordPress has various plugins to deal with author boxes. If you own a multi author blog, then you might be wondering a possible way to add author boxes for each of those contributes. There a few old ways that to add author box. One is a manual way to add author box HTML code in Blogger post editor each time that we write a post. That can be irritating for the author and we have an another way that I previously published in this blog to Add author information box below post to Blogger blog But this old version can be done only for single author blog.
So today, we'll see how to add multiple author boxes only once, and each time a particular author writes a post, his author bio would be shown up automatically below their post. This Sounds better Right!

Live Demo :-

Live Demo

How To Add Multiple Author's Bio Widget For Blogger :-

Adding author bio widget can be done by two simple steps. Following are the two simple steps.

Adding CSS Part Of The Author Bio Widget :-

1. Go to Design > Edit HTML  (New interface: Template > Edit HTML).
2. Now search for ]]></b:skin>
3. Above that place the css code given below
   
   .btnt-about-author-containter{  background: #eee; border-bottom: 1px solid #ddd; color: #111 !important; border-radius: 10px 10px 10px 10px; margin-bottom: 24px; padding: 16px; font-family: Georgia,"Times New Roman",Times,serif; font-size: 18px; font-style: italic; line-height: 26px; text-align: center;  display: inline-block;  }
   .btnt-about-author-containter p{  margin:0;  padding:0; margin: 0 0 10px;  }
   .btnt-about-author-containter .btnt-heading {  margin:0;  padding:0;  font-size:23px; }
   .btnt-about-author-pic{  background: #eee;  border: 1px solid #e7e7e7;  float: left;  height: 100px;  width: 100px;  padding: 4px;  margin-right: 5px;  }
   .btnt-about-author-pic img{  width: 100px;  padding: 0;  }
4. Now save your template.

Adding HTML Part Of The Author's Bio Widget

1. Expand your template, that is, make sure you have a tick mark in box next to "Expand Widget Template". Now, search using "CTRL+F" for <div class='post-footer-line post-footer-line-1'/>
2. Copy the code below. Now paste the code just below the line you searched in step:1
   <!--BLOG ADMINISTRATOR WIDGET STARTS-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:if cond='data:post.author == &quot;ADMIN&quot;'>
   <div class='btnt-about-author-containter'><div class='btnt-about-author-pic'><img alt='' class='avatar avatar-100 photo' height='100' src='http://i1203.photobucket.com/albums/bb382/chandeep10/blogger-logo.png' width='100'/></div><div class='btnt-about-author-text'><div class='btnt-heading'>About the Author</div>
   <p>ADMIN-AUTHOR-BIO You can follow him on <a href='YOUR-TWITTER-URL'>Twitter</a>, <a href='YOUR-FACEBOOK-URL'>Facebook</a> or <a href='YOUR-GOOGLE-PLUS-URL?rel=author'>Google+</a></p>
   <div style='text-align: right; line-height: 0;'>
   <a href='http://www.blogtipsntricks.com/' style='text-decoration: none; color: #BBBBBB; font-size: 50%;'>[Get this widget]</a></div></div></div>
   </b:if></b:if>
   <!--BLOG ADMINISTRATOR WIDGET ENDS-->
   
   
   <!--GUEST BLOGGER WIDGET STARTS-->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <b:if cond='data:post.author == &quot;GUEST-AUTHOR-NAME&quot;'>
   <div class='btnt-about-author-containter'><div class='btnt-about-author-pic'><img alt='' class='avatar avatar-100 photo' height='100' src='http://i1203.photobucket.com/albums/bb382/chandeep10/guest-author-img.gif' width='100'/></div><div class='btnt-about-author-text'><div class='btnt-heading'>About the Author</div>
   <p>GUEST-AUTHOR-BIO</p>
   <div style='text-align: right; line-height: 0;'>
   <a href='http://www.blogtipsntricks.com/' style='text-decoration: none; color: #BBBBBB; font-size: 50%;'>[Get this widget]</a></div></div></div>
   </b:if></b:if>
   <!--GUEST BLOGGER WIDGET ENDS-->
3. Replace the Highlighted code above as shown below.
   
   • ADMIN - Replace this with Your name (i.e. Chan Deep for blogtipsntricks.com admin). 
   • GUEST-AUTHOR-NAME - Replace this with Guest author of your blog.
   • YOUR-TWITTER-URL - Replace this with your twitter profile url.
   • YOUR-FACEBOOK-URL - Replace this with your facebook fan page url.
   • YOUR-GOOGLE-PLUS-URL - Replace this with your google plus profile url.
   • ADMIN-AUTHOR-BIO - Replace this with your author bio.
   • GUEST-AUTHOR-BIO - Replace this with your guest author's bio.
4. That's it!!! Save your template. View the widget on your post pages.

Note:- You should repeat the code for guest author each time you get a new author for your blog. The number of guest author bio widget you have in your template depends on the number of guest authors you have.

If you have any problem with this widget feel free to use the comment box and if it works for you, Please take 5 seconds to share it. :)