How to add an author box at the bottom of your post

I found several tutorials on adding an author box at the bottom of blog posts and they all involved adding a couple of sets of code to the template HTML. It was only fairly recently that I realized that a simpler way (simpler for me, I mean) would be to use the code for the colored box.

In this post I'll just show you how I created my author box.

Author box below post footer

Creating the author box

Let's start by going back to our code for the colored box with text and image.

<div style="background-color: #FFF8C6; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<a href="YOUR IMAGE URL" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0"  src="YOUR IMAGE URL" width="100"/></a>
<b>About the Author</b><br/>
This is where you write your author bio. This is where you write your author bio. This is where you write your author bio. This is where you write your author bio. This is where you write your author bio. This is where you write your author bio.
</div>

Here's what my author box code looks like:

<div style="background-color: #FFF8C6; padding-bottom:10px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<a href="http://www.whiteskyproject.com/p/about.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="70" src='http://1.bp.blogspot.com/-lz7uB0LH4hU/T5SuHLqrRJI/AAAAAAAADGM/-fImEjhELUs/s200/Leah_NV-polab.jpg' width="65"/></a>
<b>About the Author</b><br/>
I worked in corporate for 8 years before jumping ship and becoming a freelancer. I blog, I write, I read, and I love learning about blog design and other blog tips and tricks! Join me in my journey to discovery!
</div>

I didn't put margins anymore and I tweaked the padding measurements and size of my photo. Here's what it looks like. (You can also scroll down to the end of this post to see it!)

About the Author
I worked in corporate for 8 years before jumping ship and becoming a freelancer. I blog, I write, I read, and I love learning about blog design and other blog tips and tricks! Join me in my journey to discovery!

Of course, same drill--put in your own IMAGE URL, write your own bio, and adjust your padding and image measurements. When you have that all done, it's time to put that code in your template.

Inserting the author box code into your template

1. Go to Template.

2. Back up your current template by clicking on Backup/Restore on the upper right corner. Click on Download full template and save your current template. After saving your template, click on Close.

3. Click on Edit HTML and then click Proceed.

4. Tick the Expand Widget Templates box on the upper left.

5. Find the line that has this: post-footer-line-3. (Ctrl-F, type in post-footer-line-3.)

6. When you find this line, look for this: </b:includable>. You'll find this a few lines below the line with the post-footer-line-3 tag.

7. Paste your code ABOVE the line containing </b:includable>.

8. Now you'll need to add another line of code to make sure that your author box will only show up when you open the post. That is, when you click on the post title and go to the actual post page. Without this code your author box will show on your homepage.

You need to add this line:
<b:if cond='data:blog.pageType == &quot;item&quot;'>

ABOVE the code for your author box, and you need to close with this:
</b:if>

AFTER the code for your author box. Your code will now look something like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style="background-color: #FFF8C6; padding-bottom:10px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<a href="http://www.whiteskyproject.com/p/about.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="70" src='http://1.bp.blogspot.com/-lz7uB0LH4hU/T5SuHLqrRJI/AAAAAAAADGM/-fImEjhELUs/s200/Leah_NV-polab.jpg' width="65"/></a>
<b>About the Author</b><br/>
I worked in corporate for 8 years before jumping ship and becoming a freelancer. I blog, I write, I read, and I love learning about blog design and other blog tips and tricks! Join me in my journey to discovery!
</div>

</b:if>

Of course, by now you'd have customized all the text in red for your author box.

9. When you've added that last code, you can now click on Save template.

View one of your posts to check if the author box is there.

Placement options of your author box

The instructions above are for placing your author box below your post footer (see photo at the top part of this post).

If you want your author box INSIDE the post footer (similar to what I did to mine in this blog), place the author code ABOVE the line with the post-footer-line-3 tag. You may want to include a margin for the top to put some space between your labels and your author box. See sample below (pink text):

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style="background-color: #FFF8C6; margin-top: 10px; padding-bottom:10px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<a href="http://www.whiteskyproject.com/p/about.html" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="70" src='http://1.bp.blogspot.com/-lz7uB0LH4hU/T5SuHLqrRJI/AAAAAAAADGM/-fImEjhELUs/s200/Leah_NV-polab.jpg' width="65"/></a>
<b>About the Author</b><br/>
I worked in corporate for 8 years before jumping ship and becoming a freelancer. I blog, I write, I read, and I love learning about blog design and other blog tips and tricks! Join me in my journey to discovery!
</div>

</b:if>

You can experiment with the placement of your author box by putting it ABOVE post-footer-line-2 or BELOW post-footer-line-1. Just include margins to fix the spacing.

Sample code for margins: margin-top: 20px; margin-bottom: 10px;