Add Author Box Below Blogger Posts ~ Easy HTML Tricks for Blogging

Ever thought of adding a author box at the end of a post giving information about you to your readers? Its a common feature on many wordpress blogs, and now its possible to add it on blogger blogs as well.

Here is a step-by-step instruction to display an author box. Go to Design--Edit HTML, click on expand widgets and search for this code -

]]></b:skin>

Add the following code just above that -

.author_info {
float: right;
width: 573px;
padding: 10px;
border: 1px solid #e0e0e0;
margin-bottom: 15px;
margin-top: 15px;
background: #eee;
}
.author_info h3 {
margin-bottom: 10px;
}
.author_photo {
float: left;
margin: 0 0 0 10px;
}
.author_photo img {
margin-right: 10px;
border: 1px solid #e0e0e0;
}

Now look for this line of code -

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

Insert the following below it and save the changes -

<b:if cond='data:blog.pageType == "item"'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src='http://3.bp.blogspot.com/_tbHfaj1A058/TSGc3fOc-NI/AAAAAAAAL7A/GU6dmnqINik/s1600/images.jpeg'/></div>
<h3>About the Author</h3> This article is written by: <a href='YOUR_BLOGGER_PROFILE_LINK'><b>YourName</b></a> - who has already written <b>30</b> articles for <a href='BLOG_LINK'>BLOG_NAME</a> YourName is a professional web designer. Catch him on <a href='http://twitter.com/yourID'>Twitter</a>, <a href='Your Facebook URL'>Facebook</a> or <a href='your e mail ID'>email</a> him <br> </br> <br> </br>
YourName's <a href='your web url'>Website</a><br style='clear:both;'/>

</div>
</b:if>

Replace the text where ever mentioned in the above code, add your profile link, facebook, twitter ID and your contact details. You can also fiddle around with the font, spacing, alignment of the box etc in the first code.