How To Add Author Box Below Blog Post in Blogger

You have noticed  About the Author Box Below Blog Post in many blogs so today we will learn How to Add About the Author Box Below Blog Post in Blogger.Like this

Follow below instructions to get it:

Before making any changes to your blog, take backup blogger template.

1. Go to dashboard.
2.  Click Template and Click on Edit HTML.
3.  Search for codes ]]></b:skin>

Just above paste the following code:

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


4.  Now search for <div class=’post-footer-line post-footer-line-1’/>

Just below it paste following code:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <div class=’author-box’>
    <p><img alt=” class=’avatar avatar-70 photo’ height=’70’ src=’Your Photo Link‘ width=’70’/><b>About the Author</b><br/>
    <div style=’text-align: justify; font-family: verdana; color: rgb(0, 0, 0);’>Write Something About yourself You can follow her on <a href=’https://www.facebook.com/Seotips4fresher‘>facebook</a>,<a href=’https://plus.google.com/u/0/108741760639407283018/‘> Google+</a> and <a href=’https://twitter.com/JSCVats‘> twitter</a>.<br/>
     <p style=’margin:-8px 0′><br/><center>
    <a href=’http://seotips4fresher.blogspot.com/‘ style=’text-decoration:none;font-size:70%;’>Seotips4fresher</a></center>
    </p></div></p>
    </div>

    </b:if>

Change the below code with your own.

5. Save template and now you have done this.

Enjoy new look of your blogger blog.