How to Add Multiple Authors Bio Widget Below Posts in Blogger?

Hello Everyone After The request from Bloggers to Add Authors info Box under Every post We have created this Responsive multiple Authors info Box. with this widget you can Show the Author Name and Short Info about him and this Social profiles with his image on the top Left. This Multiple Authors info box is highly responsive and can be customized according to your Blog or Site Template. And for live demo you can see below our post because what we use we share. 

What is Multiple Authors info (Co-Authors) Widget?

Multiple Authors info (Co-Authors) Widget displays your Site Authors Info Below Every Post to Showcase Them and to improve site credibility as visitors will come to know who wrote this or that post and can ask questions to them. Now a days most popular sites or blogs have multiple authors to write regularly and constantly. this will improve the blog Search engine Ranking. 

Why To Use Multiple Authors info (Co-Authors) for posts in Blogger?

This widget is recommended to all blogs or sites which have multiple Authors To Manage the site. Multiple Authors info box is responsive and very beautiful so to Showcase your Authors & writers in a beautiful and SEO Optimized Way this widget is useful. This improve the credibility of the site and increase the interaction between authors and users.    

Steps To How to insert Multiple Authors info (Co-Authors) for posts in Blogger:

STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.

STEP 3: Click On Edit HTML.

STEP 4:  Now Search for (Search by Pressing CTRL + F) 

 <data:post.body/>

You Will Find This Code 3 Times or more in your Template So Refer 2nd or 3rd Time.

STEP 5:  Copy This Below Code After <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;your-Author-name&quot;'>

<div class='tw_boxWrap' id='tw_boxWrap'>
<div class='tw_authorBoxInner'>
<div class='tw_authorPic tw_authorColumn' id='tw_authorPic'>
  <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><img src='https://lh3.googleusercontent.com/-BpZjBIgXSvg/AAAAAAAAAAI/AAAAAAAALvg/ee94CjURaAA/s120-c/photo.jpg'/></span>
                      </a>

</div>

<div class='tw_authorColumn' id='tw_authorProfiles'>

<div class='tw_author_name'>
<h2><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a></h2>
<small id='tw_editorPic'><i aria-hidden='true' class='fa fa-user'/>
 Editor</small>
</div>

<div class='social_profiles'>
<a href='author-google-plus-profile-link'><i aria-hidden='true' class='fa fa-google-plus'/>
 Add To Circle </a>
<a href='author-FaceBook-profile-link'><i aria-hidden='true' class='fa fa-facebook-official'/>
 Like Us</a>
<a href='author-twitter-profile-link'> <i aria-hidden='true' class='fa fa-twitter'/> Tweet Us</a>
</div>
<div class='tw_border'/>
<div class='tw_authorBio'>
<p>
Hello MD M Nauman is a passionate Web Designer and write Reviews on Games and Software. He love blogging, Designing Blogger templates, Web Developing.
</p>
</div>


</div>

<div style='clear:both'/>

</div>
</div>

</b:if>
</b:if>

Now In Final Part We Will Add CSS in the Template.  

STEP 1:  Now Search for (Search by Pressing CTRL + F)

]]></b:skin>

 STEP 2:  Copy This Below Code Just Before ]]></b:skin>

/*  Widget By www.trendingwidgets.com */ .tw_boxWrap {width: 100%; border: 4px solid black; padding: 10px; margin:0 auto; border-radius: 10px; position: relative; background:rgba(210, 122, 222, 0.4);}

.tw_boxWrap:hover{
  background:rgba(210, 122, 222, 0.1);
}

.tw_boxWrap a:hover{
  text-transform: uppercase;
}

.tw_authorPic img {
  
  max-width: 100%; max-height: 100%;height:100%;

}

.tw_authorPic { width: 15%; height: 120px; border:5px solid black; border-radius: 10px;}

.tw_authorColumn {
  float: left;
}



#tw_authorProfiles {
  width: 82%;
  padding-left: 10px;
}

.social_profiles {
  margin: 5px 0px 0px 0px;
  text-align: right;
}


.tw_author_name {
  text-align: center!important;
}

.tw_author_name h2 a {
  color: #000;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
  text-decoration:none;
  font-family: Georgia, serif;
}

#tw_editorPic {
  position: absolute; left: 87px; top:10px; background: #000; color: #fff; padding: 5px; width: 80px; margin:10px 0px 10px 10px; border-radius: 3px; font-weight: bold; font-size: 100%; box-shadow: -2px 0px 0px 0px black;
}

.tw_author_name h2 {

border:none;

}

.social_profiles a {
  font-size: 110%;
  margin: 0px 5px;
  text-decoration: none;
  font-weight: bold;
  color: black;
}

.social_profiles .fa-facebook-official{
  color: blue;
}

.social_profiles .fa-google-plus {
  color: red;
}
.social_profiles .fa-twitter {
  color: lightskyblue
}

.tw_border {
  width: 100%;
  padding:0px;
  margin:5px 0px 5px 0px;
  height: 2px;
background: purple;
  
}

.tw_authorBio p {
  font-size: 110%;
  text-transform: capitalize;
}

That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

Customization:

• The Yellow Highlighted Text is Responsible for Name of the author. Replace the Text and write your Author name exactly same as what it will appear In his Email account.

• The Green Highlighted Text is Responsible For your Author profile Picture. Replace the Green highlighted image link with your author Image link.

• The Orange Highlighted Text is Responsible For Social Profiles Like Facebook, Google-Plus and Twitter. So Replace the Orange highlighted text with your authors profiles Links.

• The Red Highlighted Text is Responsible For Short description or Information About your Author. So Replace The Red Highlighted text with your own information.

STEP 6:  All Done Save the Template and Check it in your site.

That's It Thanks For Following our Tutorial '' How to insert Multiple Authors info (Co-Authors) for posts in Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.