How to add multiple author biography with picture in blogger/blogspot

By: nithin on 3:39 AM

   If you are hosting your blog/site in blogger there is no plugin which automatically display each author’s biography below their posts like in WordPress.Many bloggers who use blog spot manually add guest authors bio in each post and its a quite very difficult job. So to avoid that

here is a widget which allow you to show biography of  multiple guest authors .Each authors of a blog gets their own credits for their work.

FIRST STEP 

To keep your blog ready for guest posting you must need to invite guest blogger by email.

       For That You have to Do:

• Go to settings tab of your blog.
• click on permissions tab.
• click ADD AUTHORS and guest author's mail id.
• It will send an invitation to the guest author.

SECOND STEP

 

Adding About Me / Author’s Bio widget to blogspot or blogger

• Goto-->dashboard-Design > Edit HTML or Template > Edit HTML  it depends up on whether you’re using the new blogger layout or old blogger layout .

• Take a backup of your html template for as you can easly restore it in future.

•  Click on expand widget and Search for the below code. 

]]></b:skin>

• Replace the code with the code given below.

.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;
}

• Now the css  part is over so to work the blogger widget completely.

        Search for the code

<div class='post-footer-line post-footer-line-1'/>

• Just below that paste the following code

<!–BLOG ADMINISTRATOR WIDGET STARTS–>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot; author's name&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-100 photo' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZr5iM9_Cjkab5wGebEdPxRoAH8KWrF8MfYMdKC65pPTyS5nSr4kutixkjC34cKQArJvdrJjHztacM8biU5tJawUJL6hOYe0-2s7DTxKR9QEwelMmvoqn5EZgUk864_lJkbTwQWdmx7AY/s1600/computricks.net.jpeg' width='70'/>
<b>About Adminr</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Guest blogger's Bio<br/>
Follow Me on Twitter [@] <a href='http://twitter.com/computego'>computricks</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.computricks.net/2012/02/how-to-add-multiple-author-biography.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a>
</center></p></div></p>
</div>
</b:if>
</b:if><!–BLOG ADMINISTRATOR WIDGET ENDS–>

<!–GUEST WIDGET STARTS–>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Guest blogger's name&quot;'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZr5iM9_Cjkab5wGebEdPxRoAH8KWrF8MfYMdKC65pPTyS5nSr4kutixkjC34cKQArJvdrJjHztacM8biU5tJawUJL6hOYe0-2s7DTxKR9QEwelMmvoqn5EZgUk864_lJkbTwQWdmx7AY/s1600/computricks.net.jpeg' width='100'/>
<b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: rgb(0, 0, 0);'>Guest blogger's Bio<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/computego'>computricks</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.computricks.net/2012/02/how-to-add-multiple-author-biography.html' style='text-decoration:none;font-size:70%;'>Get this widget to your blog</a>
</center></p></div></p>
</div>
</b:if>
</b:if><!–GUEST BLOGGER WIDGET ENDS–>

>>>>Remember to replace Bio and name in the code with yours.

           If you like the post please share it to your friends.<<<<