28 October 2012

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

28 October 2012
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;

11 comments:

  1. This is very helpful--now I just need to lose the impulse to blame my posts on others. :P

    ReplyDelete
  2. Fantastic, I did it hurrah! thank you your instructions are really easy to understand unlike some sites.

    ReplyDelete
    Replies
    1. Hi Leah, I was wondering if you can help me, I am having issues with share buttons, they have totally vanished and I am wondering if the coding for the author box could have caused any issues? I have been all over the net trying to re-add using, share this, add this.. etc.. but no instructions have brought them back. Not even normal blogger share buttons are showing up. I have a sore head as html is not my speciality.

      Delete
    2. Hi Kelly! I'm sorry to hear that. I've had that problem before--losing the normal blogger share buttons--when I keep tweaking my blog template, but I've always been able to use 3rd party share buttons like addthis and shareaholic instead, so I'm not sure how to fix it. :(

      Delete
    3. Ok thanks Leah, just wondering whether I have mucked up somewhere, I am no good with html so not sure what to do. Trying to delete profile box to see if that helps and then re-add maybe..

      Delete
  3. Thanks Leah...
    You did a wonderful job

    ReplyDelete
  4. This post was super helpful - I've been trying to wrap my head around creating a bio box for weeks now...and finally, success!

    Many thanks -
    Devon

    ReplyDelete

Thanks for dropping by! :)

© 2014 Color It YOU - Blog Design and Tips. Powered by Blogger.
Legal terms and disclaimers here.