Display Author Box For Multiple Authors In Blogger ~ The Next Generation Blog

Home » blogger_tricks » Display Author Box For Multiple Authors In Blogger

Display Author Box For Multiple Authors In Blogger

In my previous post, I told you the way to display Author Box below each blog post. Now, expanding that tutorial, I am going to tell you how can you display different author boxes for different authors. If you are running your blog with a team of few members, then it will be very useful to you. You can show the Author Box of the related person of the team who wrote the blog post for your blog. The best thing of this tutorial is that you don't need to add the code manually for each posts to display the author names, it will appear automatically if any author will publish his/her post. So, let's start:
> Login to your blogger account.
> Go to Template > Edit HTML > Proceed > Expand Widget Templates.
> Now press ctrl+F keys and find the code ]]></b:skin> in your template.
> Just above the ]]></b:skin>, paste the code given below:

/*****************************************
Author Box By: www.ashutoshthehacker.blogspot.com
******************************************/
.Ashutosh-TNG-PostAuthor {
font-size:12px;
margin:0 auto;
padding:10px;
width:auto;
text-shadow:1px 0 0 #fff;
background:#F7F7F7;
border-radius:5px;
border: 1px #BBBBBB solid;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
min-height:170px;
}
.Ashutosh-TNG {
padding:10px 10px 0 0;
margin:0;
font-size:12px;
float:left;
width:110px;
text-align:center;
}
.Ashutosh-TNG img {
border:2px solid #888;
background-color: #FFFFFF;
padding:2px;
margin:0px 5px 0px 5px;
opacity: 0.5;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.Ashutosh-TNG:hover img {
border:2px solid #ccc;
cursor:pointer;
opacity: 1;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
.Ashutosh-TNG-text {
float:right;
width: 80%;
font:14px Trebuchet MS,sans-serif;
text-align:justify;
color:#111;
margin:0;
padding:0 0 0 10px;
border-left:1px #c4c4c4 solid;
}
.Ashutosh-TNG-footer{
padding:10px 0;
font:bold 12px Trebuchet MS;
}

> Now find the code <data:post.body/> in your blog template.
> Now just after <data:post.body/>, paste the following code:

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "Admin Name"'>
<div class='Ashutosh-TNG-PostAuthor'>
<div class='Ashutosh-TNG'>
<img height='100' src='Admin Image URL' width='100'/> <span style='font-family: Trebuchet MS,sans-serif;'><b>Admin</b></span></div>
<div class='Ashutosh-TNG-text'>
<span style='font-size: large;'><b><span style='font-family: Trebuchet MS,sans-serif;'>About the Admin</span></b></span>
<br/>
<br/>
<div style='font-family: Trebuchet MS,sans-serif;'>
Admin Bio/Description here!
<div class='Ashutosh-TNG-footer'>
<div style='float:left;text-align:left;'>
Join Me On: <a href='Admin Facebook URL' rel='nofollow'>Facebook</a> | <a href='Admin Twitter URL' rel='nofollow'>Twitter</a> | <a href='Admin G+ URL' rel='nofollow'>Google Plus</a></div>
<div style='float:right;text-align:right;'>
<a href='Admin About Page URL' target='_blank'>Read More >></a></div>
</div></div></div></div>
</b:if>


<b:if cond='data:post.author == "Author Name"'>
<div class='Ashutosh-TNG-PostAuthor'>
<div class='Ashutosh-TNG'>
<img height='100' src='Author Image URL' width='100'/> <span style='font-family: Trebuchet MS,sans-serif;'><b>Author</b></span></div>
<div class='Ashutosh-TNG-text'>
<span style='font-size: large;'><b><span style='font-family: Trebuchet MS,sans-serif;'>About the Author</span></b></span>
<br/>
<br/>
<div style='font-family: Trebuchet MS,sans-serif;'>
Author Bio/Description here!
<div class='Ashutosh-TNG-footer'>
<div style='float:left;text-align:left;'>
Join Me On: <a href='Author Facebook URL' rel='nofollow'>Facebook</a> | <a href='Author Twitter URL' rel='nofollow'>Twitter</a> | <a href='Author G+ URL' rel='nofollow'>Google Plus</a></div>
<div style='float:right;text-align:right;'>
<a href='Author About Page URL' target='_blank'>Read More >></a></div>
</div></div></div></div>
</b:if>

</b:if>

> Replace all the highlighted text with your text.
> The most important thing is the Admin Name and Author Name. You must change it carefully. This name must be the same name which appears when the Author publish a post in the blog. You can check the names by going Blogger Dashboard > Settings > Basic > Permissions > Blog Authors section. See the screenshot below:

The above code is shown for 2 authors, 1 for Admin and 1 for Author. You can duplicate the code for each author and use it for as many authors as you wish. You just have to add the following code each time for every new author. The number of Author Box widget you have in your template depends on the number of authors you have.
Keep visiting for more tips and tricks. Subscribe to my latest updates by using the subscription form below.