How to Add Author Bio Box Below Every Post in Your Blogger Blog

Recently I have shared an amazing social media widget box and a tutorial on how to add Facebook like box to your blogger blog. Today on the request of one of our readers I am going to share a tutorial that will help you to add author bio box below every post in your blogger blog.

Now let’s proceed with the tutorial on how to add author bio box below every post in your blogger blog.

How to Add Author Bio Box in Blogger Blog?

1. Sign in to your blogger account

2. Go to your blogger dashboard>template>edit html

3. Search for the below code

]]></b:skin>

4. Now, copy the code given below and paste it before ]]></b:skin>

.author_info {
float: left;
width: 573px;
        height:100px;
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 {
    width:120px;
border: 1px solid #666;
}

5. Search for the code given below

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

6. Paste the below code before the searched code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='author_info'>
<div class='author_photo'>
<img alt='author' src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/174235_100002567074906_548239974_n.jpg'/></div>
<h3>About Author:</h3>                
 <p>Tarun Jaitely is a professional blogger, web designer and SEO analyst. Follow him on <a href='http://twitter.com/TechSBT'>Twitter</a><br style='clear:both;'/></p>
                                       </div>

7. Replace my image URL, My author bio and my Twitter URL with your's author image URL, Your author bio and your twitter URL respectively.

That's it. You are done with the procedure of adding Author bio box below every post in Blogger blog. If you want to ask anything regarding this tutorial then leave a comment below.