Adding Author Bio Widget to Blogger

Preview of the widget

Whenever we talk about writing a blog, the first thing you should add is Author Bio. For some blogging platforms like Wordpress you are allowed to add the Author bio plugin in many different styles with your picture.

When I start writing my Brochure design blog on blogger, I searched a lot for the author bio widget. But unluckily I found not a single widget that let me show my Author Bio for my blog. So I thought that I have to add this on my blog through my own code.

As you can see that I have added my bio to my blog. I want to tell you that how I did this?

1. Go to Blog > Template > Edit HTML .

2. Now on the top there will be a check box “expand widget template”. You need to check it to see the whole code of the template.

3. Now search for <div class='post-footer-line post-footer-line-1'>

4. You found it? Now you are required to add the following code just after that. 

<style type='text/css'>
#author-info {
    background-color: #FAFAFA;
    border: 1px solid #F3F3F3;
    margin: 10px 0;
    padding: 10px 10px 10px;
    height:155px;
}
#author-info h4 {
    font-size: 1.2em;
    margin: 0 0 10px;
}
#author-info img {
    float: left;
    margin: 0 15px 8px 0;
}
</style>  


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Mary&quot;'>
<div id='postauthor'>
<div id='author-info'>

<h4>About the Author</h4>

<img alt='Author' src='Adeel.jpg' title='title'/><b>Author Name</b>Author Bio
</div>
<div id='author-connect'>        
</div></div>
</b:if>
</b:if>

5. You are done. Preview the blog now.

6. In this way you can  add multiple authors in single blog.

Posted in: blogger