
How to Place "About the Author" Box in Blogger below Every Post?
- Login Your Blogger Account and Go to Design > Edit HTML and backup your template (in case things go wrong)
- Now enable "Expand Widget Templates"

- Press CTRL+F and search this code
]]></b:skin>
- Just Above this, add below given 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;
}
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;
}
- Good boy! now search this new line
<div class='post-footer-line post-footer-line-1'/>
- Just below this line, copy-paste below given code.
<b:if cond='data:blog.pageType == "item"'>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='http://2.bp.blogspot.com/-rYmMQQ2ye1o/TknDQqwUHZI/AAAAAAAAD3M/TByrh5cFXqA/s1600/authpic.jpg' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify;>Write About Yourself Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/YOURUSERNAME'>YOURUSERNAME</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.folsol.com/2011/08/how-to-add-about-author-box-below-every.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='http://2.bp.blogspot.com/-rYmMQQ2ye1o/TknDQqwUHZI/AAAAAAAAD3M/TByrh5cFXqA/s1600/authpic.jpg' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify;>Write About Yourself Here!!!<br/>
Follow Me on Twitter [at] <a href='http://twitter.com/YOURUSERNAME'>YOURUSERNAME</a>
<p style='margin:-8px 0'><br/><center>
<a href='http://www.folsol.com/2011/08/how-to-add-about-author-box-below-every.html' style='text-decoration:none;font-size:70%;'>Add this widget to your blog</a></center></p></div></p>
</div>
</b:if>
Note: Change text in bold letters accordingly
- Save Your Template and you're done !