How To Make Multiple Author Bio Box For Blogger

Views:

Friend, This is a helping post for blogs that with multiple owners. I shared a widget generator for single author. Now i share a simple code to add multiple author box to your blogger. It shows all authors profile and details in one widget. It is very stylish and professional widget .You can add it to your blogger it help to make a public attention about contributors of your blog. You can place this widget below your all posts. If you want to add this to your blog Keep follow this post and install this widget to your blog.

Go to your Blogger account.

Then select Template and click on Edit.

Find(CTRL+F) ]]></b:skin> tag.

Just copy below code and paste it above ]]></b:skin> tag.

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}
ul li {
list-style: none outside none;float:right;
}

Then Find (CTRL+F) <div class='post-footer-line post-footer-line-1'/> tag

Just copy below code and paste it below <div class='post-footer-line post-footer-line-1'/> tag.

<b:if cond='data:blog.pageType == "item"'>
<--- BeH Author Box 1 --->
<b:if cond='data:post.author == "Author1Name"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src=' Author#1 Image ' width='70'/><table><tr><td><b>About Author </b></td><td>

<ul>
<li>
<a target="_blank" rel="nofollow" href="Author#1 Facebook Page link ">
<img class="facebook" width="16px" height="16px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-Q2i15rbYCLp0ZWrkmy_tVOMbjaW6ZE6Pwf2xFBsrfStHbNtyuEf9m97yoo4-mI3uLgJ1CiceNHuyR5k1VdMNwXYApWxxsQzLAEY4sakKuPbn5PdP8tzcgNLDhPaNg6MU8y2D6ZyPB4/s1600/facebook.png" alt="Be our fan on facebook!">
</a>
</li>
<li>
<a target="_blank" rel="nofollow" href="Author#1 Twitter Profile Link">
<img class="facebook" width="16px" height="16px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-tIwZs53RQknLyeDU2VAjWPGtiGswRdjygJ3mkgmQAw8qNOM-D4PkwmcpuoQzycmNNKQhJTJKSNdmN2H8ZXiY908ClvLSD0NIqd8jF9VgVx6lqOH-Uu5ZdRD-Lm6L_HmGgdODfn_9JE/s1600/icon_twitter_bird_16px.png " alt="Be our fan on Twitter!">
</a>
</li>
<li>
<a target="_blank" rel="author" href="Author#1 Google+ Profile Link">
<img class="facebook" width="16px" height="16px" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSblMIYycnrg2v1YjCMjgH0ojAeBmELPCELqauHA5lgMhGoFg3fBYeqaPjZF3y8o3R9jvzjqrg7wPfMRapHw4juxMmsAOCWOPVF79r7Dpnhay3ZFU4WNONebp6MtbPS0cK-29MuEZilCU/s1600/googleplus_16x16.png" alt="Be our fan on Google+!">
</a>
</li></ul>

</td></tr></table><br/>
Author#1 Description
<br/></p>
</div>

<--- BeH Author Box 2 --->
<b:if cond='data:post.author == "Author2 Name"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src=' Author#2 Image ' width='70'/><table><tr><td><b>About Author </b></td><td>

<ul>
<li>
<a target="_blank" rel="nofollow" href="Author#2 Facebook Page link">
<img class="facebook" width="16px" height="16px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-Q2i15rbYCLp0ZWrkmy_tVOMbjaW6ZE6Pwf2xFBsrfStHbNtyuEf9m97yoo4-mI3uLgJ1CiceNHuyR5k1VdMNwXYApWxxsQzLAEY4sakKuPbn5PdP8tzcgNLDhPaNg6MU8y2D6ZyPB4/s1600/facebook.png" alt="Be our fan on facebook!">
</a>
</li>
<li>
<a target="_blank" rel="nofollow" href="Author#2 Twitter Profile Link">
<img class="facebook" width="16px" height="16px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-tIwZs53RQknLyeDU2VAjWPGtiGswRdjygJ3mkgmQAw8qNOM-D4PkwmcpuoQzycmNNKQhJTJKSNdmN2H8ZXiY908ClvLSD0NIqd8jF9VgVx6lqOH-Uu5ZdRD-Lm6L_HmGgdODfn_9JE/s1600/icon_twitter_bird_16px.png " alt="Be our fan on Twitter!">
</a>
</li>
<li>
<a target="_blank" rel="author" href="Author#1 Google+ Profile Link">
<img class="facebook" width="16px" height="16px" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSblMIYycnrg2v1YjCMjgH0ojAeBmELPCELqauHA5lgMhGoFg3fBYeqaPjZF3y8o3R9jvzjqrg7wPfMRapHw4juxMmsAOCWOPVF79r7Dpnhay3ZFU4WNONebp6MtbPS0cK-29MuEZilCU/s1600/googleplus_16x16.png" alt="Be our fan on Google+!">
</a>
</li></ul>

</td></tr></table><br/>
Author#2 Description
<br/></p>
</div>
</b:if>

Change RED color with Your Name ,Social Sharing Links and Author Description

Save your Template

Above code contain only two author codes. If you want to add more authors, just copy and add it with above code.

<--- EX Author Box NEW! --->

<b:if cond='data:post.author == "Author3Name"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src=' Author#3 Image ' width='70'/><table><tr><td><b>About Author </b></td><td>
<ul>
<li>
<a target="_blank" rel="nofollow" href="Author#3 Facebook Page link">
<img class="facebook" width="16px" height="16px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS-Q2i15rbYCLp0ZWrkmy_tVOMbjaW6ZE6Pwf2xFBsrfStHbNtyuEf9m97yoo4-mI3uLgJ1CiceNHuyR5k1VdMNwXYApWxxsQzLAEY4sakKuPbn5PdP8tzcgNLDhPaNg6MU8y2D6ZyPB4/s1600/facebook.png" alt="Be our fan on facebook!">
</a>
</li>
<li>
<a target="_blank" rel="nofollow" href="Author#3 Twitter Profile Link">
<img class="facebook" width="16px" height="16px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-tIwZs53RQknLyeDU2VAjWPGtiGswRdjygJ3mkgmQAw8qNOM-D4PkwmcpuoQzycmNNKQhJTJKSNdmN2H8ZXiY908ClvLSD0NIqd8jF9VgVx6lqOH-Uu5ZdRD-Lm6L_HmGgdODfn_9JE/s1600/icon_twitter_bird_16px.png " alt="Be our fan on Twitter!">
</a>
</li>
<li>
<a target="_blank" rel="author" href="Author#1 Google+ Profile Link">
<img class="facebook" width="16px" height="16px" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSblMIYycnrg2v1YjCMjgH0ojAeBmELPCELqauHA5lgMhGoFg3fBYeqaPjZF3y8o3R9jvzjqrg7wPfMRapHw4juxMmsAOCWOPVF79r7Dpnhay3ZFU4WNONebp6MtbPS0cK-29MuEZilCU/s1600/googleplus_16x16.png" alt="Be our fan on Google+!">
</a>
</li></ul>
</td></tr></table><br/>
Author#3 Description
<br/></p>
</div></b:if>