Almost every professional blog shows About the Author box below every post. Mostly it is done and easily done using WordPress however "About the Author" box can also be placed in Blogger / Blogspot. Its really helpful for readers to identify the author of the post and its a good chance for author to let his/her readers know more about him/her. It is useful for blogs who have more than 1 authors however blogs having single author can also have this box to beautify their blogs professionally.
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 !
No comments:
Post a Comment