Learn to customize your own blog with confidence

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:

Blogger author bio box

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!

Show Off Your Signature!

I'd love to see what you do with this code! Leave a comment, Tweet me @MMosley, or get in touch on Google+!

How to Use the New Blogger Template Editor

how to use the new Blogger template editor

Blogger just made a big change to the HTML template editor, much to the surprise of many Blogger users — me included!

The new look is a bit startling at first, but don't worry; your template code hasn't changed, it just looks different. Everything is still in the same place it used to be, there are just new ways to get there.

I have updated all of my tutorials that include template instructions, but Blogger tutorials from other sources may not be updated yet. This little tour through the new features will help you translate old tutorials so you can still use them with the new editor.

So, let's take a look at what's new!

Opening the Template

There's one less step in the process of opening the template. Now all you have to do is go to "Template" and click the "Edit HTML" button below your "Live on Blog" screenshot. It used to be that you had to press "Proceed" on an intermediate screen before getting to the template code, but that's gone now.

The New Buttons Up Top

There are a bunch of new buttons at the top of the template now! Some of the buttons have obvious uses — the "Back" button takes you back to your Blogger dashboard, the "Save template" button saves your template. The others need a little explaining:

  • Jump to Widget lets you go straight to a specific widget in your code (more on that later).
  • Edit Template & Preview Template toggle these buttons to switch from the code view of your blog to a preview of your blog with the changes you've made to your template.
  • Format Template cleans up your code to make it easier to read. It does not add or remove anything.
  • Revert Changes lets you delete your unsaved changes to your template. This is your best friend if you catch a mistake in your preview!
  • Revert Widget Templates to Default clears all of your changes to widgets and resets them to their original state.

No More "Expand Widget Templates"

Many Blogger tutorials ask you to check the "Expand Widget Templates" box at the top of the template, but that checkbox is gone now. Instead, all of your template's code is accessible when you open the template.

To get to a specific widget within your blog, you can use the "Jump to Widget" button.

This is fairly self-explanatory when you're looking for a default Blogger gadget; just select the name of the gadget you want to edit. But, HTML/JavaScript gadgets will show up in this list by their HTML ID number. There's a quick way to find the right widget ID so you can jump right to the widget you want to edit.

Finding HTML Widgets

To find the ID of an HTML widget, go to your blog and hover your cursor over the wrench icon at the bottom of your widget. When you do that, you'll see a URL appear at the bottom of your browser window. Look for "widgetID=" in the URL.

The HTML number after "widgetID=" is your widget's ID. Select that ID from the "Jump to Widget" menu to go straight to that widget's section in your blog's HTML.

Searching the Code

Some Blogger tutorials ask you to look for specific lines of code in your template. There's a built-in search feature in the template now that will take you straight to your line of code and highlight it in yellow to make it even easier to see.

To search for a line of code, place your cursor over the code, click once, and press ctrl and f at the same time (PC) or command and f (Mac) to open the search box.

Type in the code you want to find, then press enter.

The template will jump to your code and highlight it in yellow.

You can use the search box to perform find-and-replace searches, too. You can read more about this advanced option on Blogger Buzz.

Reading the Folded Code

Sometimes, you just need to read through chunks of your code, line by line. As you look through the new editor, you'll notice that the lines of code are numbered. And, you'll see that there are lots of big gaps in the line numbers; for example, a jump from line 13 to line 582. That's because the code is "folded". You can expand folded code by clicking the folder arrows.

animated image of a folded code section opening in the new Blogger editor

In some areas, multiple levels of code are folded into each other, so you may need to "unfold" a few blocks of code to find the section you want. Don't forget, if the folding and unfolding gets tedious, you can always use the search feature to find specific blocks of code.

What Do You Think?

Are you warming up to the new editor? Let me know in the comments!

Patterned Text for Safari and Chrome with CSS3

CSS3, the latest and greatest version of CSS, has a lot of potentially wonderful features that aren't widely accepted by all of the browsers. Every developer has to harden their heart against falling in love with a CSS3 feature that's never going to make it to widespread use. And, so, for a long time, I turned my back on a feature I really like — background-clip: text.

Background-clip is a useful CSS3 feature that works in most browsers; it lets you control whether or not a background color or image extends past its element's border. Background-clip: text is a variation that allows you to use a background image as the "fill" for text. So you can do something like this:

Yay! CSS3 - Patterned text in webkit browsers

A feature like that has major design possibilities, especially for elements like blog titles, post titles, and decorative text. Pretty exciting, right?

For the longest time, there was one very big "but" about background-clip: text — it only works with the vendor prefix -webkit, making it exclusively available to Safari and Chrome browsers. It used to be that if you tried to use it, other browsers would make it look weird at best, and completely illegible at worst. So, I put it in the "can't use" pile and forgot about it.

But then came this post from esteemed developer Divya Manian: "Using background clip for text with CSS fallback". In her post, Divya shares a CSS snippet that sets a solid color fallback for background-clip: text so the text stays legible on incompatible browsers.

Since a reliable & reasonable fallback exists now, I think it's safe to use as a "nice to have" detail. Let me show you how it's done!

Compatibility

The pattern "fill" will only show in the WebKit browsers Safari and Chrome. The CSS we'll use sets a solid fallback color for other browsers. Your readers on WebKit browsers will get to enjoy the cool pattern, and your readers on other browsers will see solid-color text. Everything's legible, everybody's happy!

In the demo image below, the text at the top is as it appears in a WebKit browser. The text at the bottom is as it appears in all other browsers.

background-clip text with fallback demo

Using This CSS

If you're able to add custom CSS to your blog or website, you can use this. Blogger, self-hosted Wordpress, and Typepad Unlimited bloggers are good to go. If you're on Wordpress.com, you'll need the premium Custom CSS option.

This tutorial is a bit more "free form" than the usual here; since you can use this in so many different ways, it's impractical for me to try to give specific usage instructions. So, it helps if you have some experience with CSS. If you already know how to find the class or ID of an element, you'll have no trouble using this. If you're new to CSS, this tutorial has tips to get you started. If you're a developer, scroll back up and read Divya's post instead, it's got everything you need :)

Choose Your Font

The "fatter" your font is, the easier it is to see the pattern. I used Abril Fatface from the Google Web Fonts library for the demo text. If you want to learn more about adding Google Web Fonts to your blog, see this tutorial.

Choose Your Pattern

You can use any type of image as the background, including photos, but this effect has the smoothest appearance if you use a seamless pattern. I used "Waves of Sorrow" from the Colourlovers pattern gallery for all of the examples shown in this tutorial.

To use your pattern, you'll need to upload it to your blog's file hosting. If you're on Blogger, upload the image to the Picasa Web Album for your blog. If you're on Wordpress, upload the image to your media library. Typepad users can upload the image to the File Manager. You can also host your image through Photobucket or another image hosting service. Take note of the direct URL to your pattern image, you'll need that in the CSS.

Find Your Selector

Before you can style your text, you need to know what CSS selector to use to select that text. If you don't know your selector, there are two ways to find it:

  1. With your browser's developer tools. If you're using Firefox or Chrome, you can use your browser's developer tools to identify the class or ID of your text by right-clicking it and selecting "Inspect Element" from the menu.
  2. Check your blog's source code. Using your browser's "View Source" option, open up your blog's source code. Find the text you'd like to style, and find its class or ID. The class or ID might be inside your targeted element, or nearby in the code.

Use Sparingly

This opens up a lot of design possibilities, but abuse can lead to illegibility and crimes against good taste. Proceed with caution & decorum, please.

Where to Add the CSS

In Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

The CSS

Again, the credit for the CSS goes to Divya Manian.

SELECTOR-HERE {
 color: FALLBACK TEXT COLOR HERE;
 -webkit-text-fill-color: transparent;
 background: -webkit-linear-gradient(transparent, transparent),
             url(BACKGROUND IMAGE URL HERE) repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
}

Ok, let's break down what you need to do to the CSS to get it working:

  • Replace SELECTOR-HERE with the selector for the text you want to style. Remember to use # before IDs, and . before classes.
  • Replace FALLBACK TEXT COLOR HERE with the name, hex code, or rgb code of the solid color you'd like to use for non-WebKit browsers. It makes sense to use a color that is close to the main color in your background pattern. That way, readers who visit you from different browser types won't find the difference all that jarring.
  • Replace BACKGROUND IMAGE URL HERE with the direct URL to your background image.

Enjoy!

You can check out your new creation on Safari on a computer, iPhone, iPod, or iPad, and in Chrome on computers and mobile devices.

If you've used -webkit-background-clip: text, I'd love to see what you made! Leave a comment, Tweet me @MMosley, or get in touch on Google+. I promise I'll look at it on a WebKit browser ;)

Add an Icon to Blog Post Titles with CSS

post title icons with CSS

A little icon next to your post title is a cute way to bring the design elements of your theme into your blog posts. And, it's easy to do with a bit of CSS! You'll probably spend more time choosing the perfect icon than you will on adding the CSS to your blog.

Demo

blog post title icon tutorial demo

For a live demo, visit codeitpretty.blogspot.com, where I've added a heart icon to each of the post titles.

Who Can Use This Tutorial

If you can add CSS to your blog, you can do this! Blogger, self-hosted Wordpress, and Typepad Unlimited users, you're all set. Wordpress.com users will need the Custom CSS upgrade.

Before You Get Started

You'll need two things to use this tutorial: an icon, and the class name of your post titles. The icon is up to you, but I'll show you how to find your post title class name.

Blogger & Typepad users who use a standard template and haven't made changes to the post title class, your post title classes are:

Blogger: post-title

Typepad: entry-header

Wordpress title classes vary by theme. If you're on Wordpress, or you've made changes to your Blogger or Typepad template classes, here are two ways to find your post title class.

  1. Use your browser's developer tools. If you're using Firefox or Chrome, you can use your browser's developer tools to identify your post title class by right-clicking a post title and selecting "Inspect Element" from the menu.
  2. Check your blog's source code. Using your browser's "View Source" option, open up your blog's source code. Find a post title within your source, and find its class. The class might be inside your post title's link element, or nearby in the code. It's usually something like post-title, entry-title, headline, etc.

Once you have your icon and you've found your post title's class, you're ready to add your title icon!

Step One: Upload Your Icon

Blogger users, upload the icon to your blog's Picasa Web Album. Wordpress users, upload the image to your media library. Typepad users, upload the image to the File Manager. You can also use Photobucket or another image hosting service if you prefer. Wherever you upload it, copy the direct link to the image. You'll need that soon.

Step Two: Add the CSS

You only need to add this CSS to your template once and the icons will appear on every post title.

In Blogger, go to Template > Customize > Advanced > Add CSS. If you're on Typepad, go to Design > Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

I'm going to demonstrate this with the class .post-title, since I'm on Blogger. Remember to change it if you blog elsewhere! Here's the basic CSS:

  .post-title {
    background: url(ICON-IMAGE-URL-HERE) no-repeat left transparent;
    padding-left: 15px;
    }

Now that you've seen the CSS, let me break it down for you!

  • In the first line, the selector (.post-title in the example) tells the CSS to style all the links with the class post-title. Again, change that if .post-title isn't your class. Don't forget the dot (.) in front of the class name!
  • The next line has four parts:

    1. background: url(ICON-IMAGE-URL-HERE) sets a background image for the selected titles. Replace the text inside the parentheses with the direct link to your icon image.
    2. The "no-repeat" value makes it so the image only appears once for each link.
    3. "Left" places it to the left of the URL.
    4. "Transparent" sets the background color of the link and its associated icon.
  • The last line, padding-left: 15px; , creates a bit of room between the icon and the beginning of your post title. You may need to adjust the padding size, 15px is just a starting point.

Variations

Now that you've got the idea, you might want to try one of these variations. Thanks to Joelle and Marina for their prompts in the comments!

These variations work in modern browsers, but aren't compatible with older versions of Internet Explorer. They don't cause any problems in older IE, they just don't show up.

Icon Above Your Title

If you'd like to place your icon above your title, find the class of the div surrounding your post using the class-finding methods described above. Once you've found the class, use this basic CSS:

.post-outer:before {
content: url(YOUR IMAGE URL HERE);
}

I used ".post-outer" because I'm on Blogger. If you're on another platform, you may need to use a different class.

You can also center the icon above your post title if you prefer.

If you'd like to center the icon, the CSS is:

.post-outer:before {
content: url(YOUR IMAGE URL HERE);
display: block;
width: ICON WIDTH IN PX HERE;
margin: 0 auto;
}
Two Icons

If you'd like to add two icons to either side of your title, you can use :before and :after content to place the image. If you use this method, the second icon will be placed at the end of your title's text, like in these examples:

icon before and after a short blog post title
icons before and after an unusually long blog post title

Here's the basic CSS:

.post-title:before,
.post-title:after {
content: url(YOUR IMAGE URL HERE);
}

Remember that I used .post-title because I'm on Blogger. If you're on a different platform, be sure to change the selector if needed.

Now, Show It Off!

You did it! I'd love to see your shiny new title icons :) Leave a comment, Tweet me @MMosley, or get in touch on Google+!