Tutorial: Build a Professional Blog and
Online Resume with TypePad
Introduction
In this uncertain economy, it’s more important than ever to differentiate yourself in your field. Whether you’re looking for a job or you’re an independent professional seeking your next project, a TypePad blog is an affordable, effective way to open up new career opportunities and position yourself for success.
Use Your Blog to Attain Career Success
- Define your career objectives and background
- Create a solid, persuasive impression of yourself
- Share specialized knowledge that only you have
- Prove that you’re qualified, able and ready
- Develop connections with other professionals
TypePad Can Help. Here’s How:
How to Build a Professional Blog
A professional blog allows you to demonstrate knowledge in your field and establish yourself as an expert. TypePad offers many different ways for you to customize your blog, and gives you complete control over the content and layout.
We created an example blog called Insights Into Biology for Jane Smith, a fictitious lab technician. To position herself as a qualified expert, “Jane” created a series of posts about biology, her area of expertise. Take a moment to check it out.
Blog Set Up:
- Set up a new account. Get started with a new TypePad account. Sign up here.
OR
- Log in to your current account. If you have a Plus account or higher you can set up multiple blogs in the same account. Find out how.
- Create a blog with a title that relates to your field. Choose a design theme that is clean and professional.
- Set your professional blog as your default blog. A default blog is the first blog visitors see when they type in your URL. Click on the “Weblogs” tab in the navigation, then click on “More Actions…” next to your professional blog, and choose “default blog”.
- Create TypeLists to display important information in the sidebar. We used TypeLists to link to some of Jane’s most important information, including her contact information and a link to her resume. Have you created a website, written an article, or have other information to share? Learn how to create a TypeList.
Tips: Set Up Your Blog for Maximum Impact
- Provide One-Click Access to Your LinkedIn Profile. If you’re part of the professional networking site LinkedIn, you can add a LinkedIn widget to your blog with one click, visitors can view your profile. You can also automatically add your latest blog posts to your LinkedIn profile with Blog Link.
- Add a Photograph. Everyone likes to put a face with a name. A photograph connects the words on the screen with a real person, and will increase the likelihood that you’ll get a response. Find out how.
- Include Your Contact Information. Remember to include your contact information (e.g. an email address) so that people can get in touch with you. Jane included hers in the sidebar using a TypeList.
Find More Resources in the Knowledge Base
How To Build an Online Resume with Rich Text
When you create a TypePad resume blog, you can be confident that your resume won’t get stuck in a spam filter or sit in an unopened envelope.
As an example, we created a fictional resume blog for Jane Smith, and designed it to look just like a traditional resume. Then we linked it to Jane’s professional blog, Insights into Biology so that Jane can quickly and easily show prospective employers her work history, knowledge and expertise.
Blog Set Up:
- Set up a new account. Get started with a new TypePad account. Sign up here.
OR
- Log in to your current account. If you have a Plus account or higher you can set up multiple blogs in the same account. Find out how.
- Create a blog with a relevant title. Give it a descriptive name like “My Resume.”
- Create a featured post. If you set your resume as the featured post, it will ensure that your resume will always be at the top of the blog. Learn how to create a Featured Post.
- In your featured post, you’ll be defaulted to the rich text tab. Type in your resume and use the compose features to format it as you like. Remember to check out the information below before getting started.
- Publish your blog post. Note the permalink at the bottom of the post — this is the link to your online resume. You can now send this link to anyone you choose.
Putting Together Your Resume
Here are a few details on how we put this resume together, and how you can put together one just like it:
Theme and Layout:
We used the theme Subtle Green for this resume, and chose a two-column layout. Learn more about changing your blog’s theme or layout.
Color:
The section headers are in “clover” (html color code #407F00) to make the resume easier to scan. The color clues the reader in on the structure of the resume. We were very careful, though, to choose a color that coordinates with the blog theme.
We also set the job titles’ color to “obsidian” (html color code #111111) so they would stand out slightly from the rest of the text.
To select the colors you want to use, choose the font color icon in the tool bar above the compose field.
Font:
The font is Arial, and the sizes range from 13 point font (for most of the body copy) to 18 point font (for the name at the top).
Tip: When you’re entering in the text for your resume, hitting return may cause a new paragraph to form or it may just move the cursor a single line down, depending on the browser you’re using. If you want to force the cursor to move down just a single line, hit shift+enter.
Knowledge Base Articles
We’ve included some useful articles that might be of help as you set up your resume online.
Posting Tips:
- How to Post to Your Weblog — A quick overview for new TypePad members
- New Compose Format Options — Did you recently sign up for a TypePad blog, or moved over to the new compose? This is a great overview of the new features.
- General Posting Tips — Includes tips on how to add an image, create a link in a post, embed audio, and use the draft option.
Support:
- TypePad Support — Knowledge Base — A great place to find answers to all your TypePad-related questions
- Submit a Help Ticket — Still stumped? Submit a help ticket and get an answer from a support person via email.
How To Build an Online Resume with HTML
When you create a TypePad resume blog, you can be confident that your resume won’t get stuck in a spam filter or sit in an unopened envelope.
As an example, we coded a fictional resume blog for Jane Smith, and designed it to look just like a traditional resume. Then we linked it to Jane’s professional blog, Insights into Biology so that Jane can quickly and easily show prospective employers her work history, knowledge and expertise.
Putting Together Your Resume with HTML
This tutorial will help you set up the code for your own resume. Most of what you’ll need to do is simply cut and paste, and substitute your own information where “Jane’s” information is currently.
Tip: HTML coding at this level isn’t difficult, but it does take some time, especially if you haven’t done it before. If you want the control over your resume that HTML gives, don’t get frustrated if it takes a bit longer than you expect.
Blog Set Up:
- Set up a new account. Get started with a new TypePad account. Sign up here.
OR
- Log in to your current account. If you have a Plus account or higher you can set up multiple blogs in the same account. Find out how.
- Create a blog with a relevant title. Give it a descriptive name like “My Resume.”
- Create a featured post. If you set your resume as the featured post, it will ensure that your resume will always be at the top of the blog. Learn how to create a Featured Post.
- In your featured post, click on the Edit HTML tab. Follow the instructions below, cutting and pasting the HTML and inserting your own personal information. Click “save” and “preview” often to watch your progress.
- Publish your blog post. Note the permalink at the bottom of the post — this is the link to your online resume. You can now send this link to anyone you choose.
Getting Started with HTML
The HTML we used to construct “Jane’s” resume, and referenced in this tutorial, can be found here. Go ahead and download it. (If a web page pops up, right click on the page and choose “View Source” to get the code.)
Set up a new post for your resume.
In the top right hand above the text area of the compose screen, there are two tabs. One says “rich text” and the other says “edit HTML”. Choose the “edit HTML” tab, then cut and paste in the code.
Unless you are familiar and comfortable with this type of coding, set the post to “draft.”
This tutorial will walk you through how to replace “Jane’s” information with your own. Remember to hit “save” and “preview” often so you can see the affects.
Tip: Play with the code as you go along. One of the best ways to learn how to code is to try different things to see what affect it will have.
A Quick HTML Primer
HTML is a common coding language used to define the appearance of web pages. It can be used to code page layout, text formatting, hyperlinks, etc. HTML is composed of tags that indicate to the computer how the page should appear.
For instance, to bold “cat” in the sentence:
The cat sat on the mat
Add the “strong” tag, which would look like this:
The <strong>cat</strong> sat on the mat
Which would appear as:
The cat sat on the mat
Most HTML follows this basic pattern.
Tip: Refer back to the sample code to see how the tags should be formatted.
Coding Your Resume
The entire resume is set up as a series of tables. We’ll start with the header as it’s the first of these tables.
Header:
In this first table, the name and contact information are coded to look like this:
Jane Smith
San Francisco, CA
resume-example@sixapart.com
The actual code is below — Jane Smith’s information that appears on the page is noted in red.
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
Since this is the first table, let’s de-construct it in detail.
Tip: Once you get a feel for how this table works, the rest of the coding will be straightforward.
1. Starting the Table: <table>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
The first part of the tag (bolded above) indicates the formatting for the table — <table cellspacing="0" cellpadding="0" border="0" align="center">.
The cellspacing and cellpadding control the amount of space around the text. The border in this example always equals 0, so no border (i.e. box around the text) appears.
At the end of the tag is align="center". This centers the text on the page; it’s the only time in a table tag that this is used in “Jane’s” resume.
2. Table body: <tbody>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
Beneath that is the tag <tbody>. Make sure you close this tag — i.e. use </tbody> — for any tables you set up.
3. Columns and Rows: <tr> and <td>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
In tables, the rows are indicated by <tr> and the columns by <td>. In this first table, there is one row and one column. The <td> tag also has align="center" so the text appears centered.
Tip: For new coders, it’s easy to get confused with the columns and rows, so keep track of where you are in the table.
4. Text Formatting: <span> and <br>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
The color of the text is indicated by “color: #336600” and the size by “font-size: 1.4em” To change the color of the text, replace #336600 with another color code (see the tip below). Likewise, to change the font size, adjust 1.4 up or down.
Note that the span tag — <span> — is closed immediately after the name so the color and size attributes only apply to that first piece of text.
The text is also bolded by <strong> tags.
Immediately after the span tag is closed, there is a <br /> tag. This tag creates a line break, so the next piece of text — San Francisco — starts one line down, which is also followed by a line break.
Tip: A little color in the text can be a great way to personalize your resume. Looking for more colors to replace the color code above? Try searching for “HTML color codes” on Google.
5. Email Link: <a href>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
This code sets up the email link. The email address listed after “mailto:” in the code is the address it will be linked to. The text in red (above) is the text that will appear on the page.
After the email address we have to close this tag with </a>.
Tip: A way for people to get in touch with you is one of the most essential parts of your resume.
6. Using non-breaking space:
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
This code sets up a new row and column. This row and column were put in to prevent this section from running into the next one, i.e. it adds in an extra line.
The code — — codes for a non-breaking space. It doesn’t show up as anything other than a space. We’ll use this again later on.
7. Ending the table: </tbody> and </table>
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr><td align="center"><span style="color: #336600;font-size: 1.4em;"><strong>Jane Smith</strong></span><br />
San Francisco, CA<br />
<a href="mailto:resume-example@sixapart.com">resume-example@sixapart.com</a></td></tr>
<tr><td> </td></tr>
</tbody>
</table>
Close the tags and the first table is done!
Objective:
The code for the first part of the Objective section looks like this:
<table cellspacing="0" cellpadding="5" border="0">
<tbody>
<tr>
<td><span style="color: #336600;font-size: 1.4em;"><strong>Objective</strong></span></td>
</tr>
</tbody>
</table>
<hr />
Most of this should look familiar from the previous section. The only new piece is the <hr /> tag. This puts a horizontal line across the page.
The text associated with the Objective is in another table, again with a very similar format.
Work Experience:
The same general format is used in this section as well. There are a few new tags, though.
The tag <em></em> italicizes text. For instance, combined with the earlier example:
The <strong>cat</strong> sat on the <em>mat</em>
The cat sat on the mat
The non-breaking space tag mentioned earlier — — is also included to force text to indent.
Education, Website, References:
These three sections follow the same general format. The only new piece of code is the hyperlinked blog name:
<a href="http://professionalexample.typepad.com/"><strong>Insights Into Biology</strong></a>
The text is hyperlinked with the <a> tag; the URL that should be linked to is placed in the quotation marks. The text between the two tags (in this case “Insights into Biology”) is hyperlinked.
The <strong> tags discussed above bold the text; here, they’re used to make the blog name stand out more.
Now You Give It a Try
If you haven’t already done so, download the resume code. You can cut and paste the code into the “Edit HMTL” tab in the Compose screen, and replace “Jane’s” text with your own.
Remember to click “save” and “preview” often to watch your progress. If you get stuck, refer back to this tutorial for a quick brush up on how to use the code.
