1. Log in to your dashboard--> Design- -> Edit HTML

2. Click on "Expand Widget Templates"

3. Search "Ctrl+F" and find ]]></b:skin> and before it paste the next code:

.author-box {
background: #fff;
margin: 10px 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: 2px;
border: 1px solid #E6E6E6;
}

Change the background color the border etc with your own one.

4. Find :

<data:post.body/>

and after it paste the next 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuq0cG6j4T7DJo5x9923DBT0U-w-OlrjG1kQuuqNo_Ewvcx0JsHk1Wk35jubGvUJPR02qy_AGy_2Vu9jbn5fVEzwzolpfmZFQFGEN0A7Z0lSMmbe8sEPL_OXlNXeFkp1ZQxqe02-ic5Tw/s220/lgbig.png' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: #000;'>Lorem ipsum brute utinam nominati vel ut, te vis liber aliquid. Te vis vide dolores erroribus. Debitis dolorem eu pro, semper mollis dissentiunt nam at. Regione molestie dissentiet sit te. Has cetero indoctum posidonium et, dissentiunt deterruisset pro an.<br/>
</div>
</p>
</div>
</b:if>

Change the red line with the link to your avatar, and the blue text with you own information.

5. Save the template.