Code it Pretty: Author Biography Boxes for Blogger

A few months ago, I showed you how to make automatic post signatures for Blogger, and now I'm going to expand on the automatic signature concept to show you how to make a detailed, deluxe "about the author" box with a portrait, text, and links included. With HTML & CSS, you can build an author bio box like this:

That's just a screenshot, if you'd like to see a real, clickable author bio, I put one on my demo site.

Difficulty: Advanced Beginner to Intermediate

You should be comfortable with editing your Blogger template before using this tutorial. The tutorial includes a complete author box template, so you don't need much HTML & CSS experience to do this. But, it helps if you have a little.

Template Compatibility:

This works with all of the standard Blogger templates except Dynamic Views, which does not accept customization. This will also work with custom templates that have the same internal structure as a standard template.

Let's get started!

Upload Your Portrait Image

Go to the Picasa Web Album for your blog and upload your author image. The image sizing is up to you; I used an image that's 150x150px for my example signature. After you've uploaded the image, click on it in your image gallery to open up the full size version. Leave the Picasa album open for now, you'll go back to it later for your image's direct URL.

Build the Author Bio Box

I've added all of the code for this tutorial to an editable "pen" on Codepen, so you can completely design your author bio before you place it on your blog. You can preview the code in the embedded box below, and you can open the editor in a new tab to code along with the tutorial.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='signature'>
       <p class='sig-content'></p>
       </div>
      </b:if>Check out this Pen!

I've added a placeholder author photo and the basic box styling to get you started. You'll change that to your own styling as we go.

The HTML

Your bio box is made up of two parts: a paragraph and a div that surrounds it. A "div" is a division in HTML — think of it as the container for your bio. The paragraph will include your biography and links.

Here's the HTML markup for the author bio box:

 <b:if cond='data:blog.pageType == "item"'>
<div class='signature'>
       <p class='sig-content'></p>
       </div>
      </b:if>

Enter your biography between the angle brackets >< of <p class='sig-content'> and its closing </p> tag. If you like, you can include links with your biography. Check out this post if you need a refresher on how to write HTML links.

The first line of the code tells Blogger to show your bio box on post pages only, so that your homepage and search pages don't get cluttered with repeated bios. If you want the boxes to show on all pages, remove the first line and the closing </b:if> tag at the bottom.

That's it for the HTML, let's move on to the style!

The CSS

Move to the CSS window in Codepen to style the author bio box to match your blog. The CSS has three rules: on for the .signature class, one for the .sig-content class, and one for the .sig-content a elements, which are links.

I've filled in some example styling in Codepen, but you'll need to make changes so the boxes work on your blog. The recommended changes are marked here in bold.

.signature {
    background: COLOR HERE url(PORTRAIT IMAGE URL HERE) left no-repeat; 
    width: BOX WIDTH IN PIXELS;
    height: SIGNATURE IMAGE HEIGHT IN PIXELS;
}

.sig-content {
    width: 475px;
    font-size: 1.2em;
    padding-left: IMAGE WIDTH + 20 PX;
    padding-top: 1em;
    position: relative;
    color: white;
}

.sig-content a {
    color: white;
    text-decoration: underline;
}

The line numbers that follow are from the Codepen display of this code.

In line 2, change the color to your background color of choice. You can use a color name, a HEX code, or rgba colors. Next, enter the direct URL to your portrait image inside the parentheses after url().

In line 3, you can change the box width. I have it set to 700px, but you can increase or decrease that to fit your blog.

In line 4, set the height to the height of your portrait photo. For example, if your portrait is 150 pixels tall, use 150px.

In line 8, you're setting the width of the biography paragraph. I've set it to 475px, but you can adjust that to fit your signature box.

In line 9, I've set the font size to 1.2em. You can increase or decrease that number.

In line 10, the padding-left puts space between the portrait image and the text. I've used a formula of image width + 20 pixels, but you can change that.

In line 13, I've set the text color to white. You can change that using a color name, a HEX code, or rgba colors.

In line 17, I've set the link color to white. You can also change that if you prefer.

Adding Your Bio Box to Blogger

Now that your bio looks like you want it to, it's time to move it from Codepen onto your blog.

First, Back Up Your Blog

We're going into the template to add your signature, so you'll need a backup in case anything goes wrong. Go to Template and click the "Backup/Restore" button at the upper right. Press the "Download full template" button on the next screen and save the resulting file.

Add the HTML to Your Template

After — and only after — you back up your template, click the "Edit HTML" button below the "Live on Blog" screenshot.

Hold your cursor over the template code, click once, then press CTRL-F (PC) or Command-F (Mac) to open a search box. Paste <b:if cond='data:post.hasJumpLink'> into the search box and press enter. Your template will jump to that line and highlight it in yellow. Starting with the highlighted line, you should see this group of five lines of code:

 <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

Copy and paste all of your HTML from the HTML tab in Codepen directly below the closing </b:if> tag in that code block. The screenshot below shows both blocks of code together.

Save your template.

Add the CSS to Your Template

Now, go to Template > Customize > Advanced > Add CSS, then copy & paste in everything from the CSS tab in Codepen. Press "Apply to Blog" to save the CSS.

After you save the CSS, go to your blog and click into one of your posts. You'll see your author bio box at the bottom of the page, right above your post footer.

Multi-Author Variation

You can modify this code to work on multi-author blogs, too! This variation only works if each author posts from his or her own Blogger account; it doesn't work if everything is posted by one author.

I've posted code for multi-author blogs in a separate Codepen demo.

Overall, the technique is the same, but this code adds a second conditional to the HTML for each author's bio. In that conditional, you'll need to fill in each author's name as it appears on their Blogger account.

The multi-author CSS includes a separate background declaration for each author's bio so you can give each author their own portrait.

LinkWithin Variation

If you use LinkWithin and would like your biography to appear above your LinkWithin thumbnails, add this right after the closing </b:if> at the end of your bio box HTML:

<div class="linkwithin_div"></div>

There's no similar option for nRelate users, sorry!

Author Biography Boxes for Blogger