1 Sept 2012
How To Make credit box for each author in a multi-author blog
Here is what we need to do :
1,First ,you find this line
<data:post.body/>
and then paste the following code right after the line above.<div style='clear:both'/>
<div id='creditbox'>
<!-- Author Bio info start-->
<b:if cond='data:blog.pageType == "item"'>
<!-- First Author Info -->
<b:if cond='data:post.author == "NAME OF FIRST AUTHOR"'>
<img class='authoravatar' height='39' src='IMAGE URL FOR FIRST AUTHOR' width='39'/>
<div class='postauthor'>
<h3><a href='FIRST AUTHOR'S URL'>NAME OF FIRST AUTHOR </a></h3>
<p> NOTES ABOUT FIRST AUTHOR </p>
</div>
<div style='clear:both'/>
</b:if>
<!-- Second Author Info -->
<b:if cond='data:post.author == "NAME OF SECOND AUTHOR"'>
<img class='authoravatar' height='39' src='IMAGE URL FOR SECOND AUTHOR' width='39'/>
<div class='postauthor'>
<h3><a href='SECOND AUTHOR'S URL'>NAME OF SECOND AUTHOR </a></h3>
<p> NOTES ABOUT SECOND AUTHOR </p>
</div>
<div style='clear:both'/>
</b:if>
.......................
</b:if>
<!-- Author Bio info End-->
</div>
<div style='clear:both'/>
Important Notes1- NAME OF FIRST AUTHOR : replace this with name of your first author . Name of author must be as exact as name showed in profile .
2- NAME OF second AUTHOR :replace this with name of your second author
3- IMAGE URL FOR FIRST AUTHOR :Replace this with the link to your first author avatar or image .
4- IMAGE URL FOR second AUTHOR :Replace this with the link to your first author avatar or image.
5- NOTES ABOUT FIRST AUTHOR : Replace this with author short bio ,profile ...
6- NOTES ABOUT second AUTHOR : Replace this with author short bio ,profile ...
7- FIRST AUTHOR'S URL :Replace this with link to author profile page or link to a social network account.
8- SECOND AUTHOR'S URL :Replace this with link to author profile page or link to a social network account.
In case of there are more than one <data:post.body/> in the search result ,you can paste this code right after all the results .
If you have more than two authors ,you can duplicate the code of first author's information or second author's information and then change the name,link,bio...
2. Add this CSS code before <body> to decorate the credit box :
<style>
#creditbox {
background: none repeat scroll 0 0 #EDEDED;
padding: 10px;
margin-top:10px;}
.authoravatar {float:left;margin-right:10px;padding:4px;background:#fff;border:1px solid #f0f0f0;}
.postauthor {float:left;}
</style>
fThis is an example .You can add more CSS tags to make the credit box display as you want .Here is my credit box in Simplex Celebrity template