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 . I tried several times ,but none of them work . Thanks to comment of ابن الملكـة
He gave me a code that work in a comment ,and now I want to share this code here .Both of me and ابن الملكـة hope this code helpful to you all ,and make Blogger to be the best of blogging platform .
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'/>
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>
This is an example .You can add more CSS tags to make the credit box display as you want .
He gave me a code that work in a comment ,and now I want to share this code here .Both of me and ابن الملكـة hope this code helpful to you all ,and make Blogger to be the best of blogging platform .
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'/>
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>
This is an example .You can add more CSS tags to make the credit box display as you want .
0 comments:
Post a Comment