author info widget for blogger

We all had seen author info widget below each post on WordPress blogs, but actually its not much seen in Blogger.There are endless possibilities to makes your Blogger blog look like a WordPress blog. So to make that note true, today I am going to teach you how to add author info widget, below every blog post.

Step 1: Login to your Blogger dashboard and navigate to Layout > Edit HTML and check the box of expand widget templates. Now search for the code  ]]></b:skin> once you find it, replace the code with the below code

.author_info {
        float: left;
        width: 600px;
        padding: 10px;
        border: 1px solid #ccc;
        margin-bottom: 15px;
        margin-top: 15px;
        background: #eee;
}
.author_info h3 {
        margin-bottom: 10px;
}
.author_photo {
        float: right;
        margin: 0 0 0 10px;
}
.author_photo img {
        border: 1px solid #666;
}
]]></b:skin>

Step 2: Now we are going to add the div part of the author info widget. To do that search for the code <div class='post-footer-line post-footer-line-1'> and paste the below code after <div class='post-footer-line post-footer-line-1'>







<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://your pic url'/></div>
                    <h3>This post was written by:</h3>                  

                                        <p><a href='http://about.me/parmar_live' title='Posts by parmar_live'>parmar_live</a> - who has written posts on <a href='http://futurextech.blogspot.com/'>futureX</a>.</p>

                    <p>PARMAR is a techblogger and programmer. Follow him on <a href='http://twitter.com/parmar_live'>Twitter</a> or <a href='mailto:parmar_live@about.me'>email him</a><br style='clear:both;'/></p>
                   </div>
</b:if>

Edit your information according to your needs and you all set done, check your blog to see the changes.