thn google
+13,700
twitter big logo icone 5336 48
1,755
Advertisers Tag Here
Join over 45,931 Daily Readers, Users, Subscribers
..who get notifications via Emails !
Jobs

1 Sept 2012

How To Make credit box for each author in a multi-author blog


Do You have a blog with many authors who contribute content ,and you want to show their short bio in credit box at the end of each post . This idea was in Wordpress for a long time ,but not in Blogger...But Not Its here.

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 Notes
1- 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