Add Lists to Your TypePad Blog

French | Spanish | Portuguese | Italian | German | Japanese | Chinese | Korean | Russian | Arabic

TypePad offers its special TypeLists feature for bloggers who want to add content to the sidebars of their blog design. Unlike some blogging tools, TypePad makes it very difficult to dig in and change the HTML on your blog’s front page. That’s how I’ve typically altered the front page templates of my blogs to, say, show off the articles I’ve written or to tell people the songs I’m listening to. With TypePad, you’re encouraged to use the TypeLists for that, instead, and then add the TypeLists as if they were any of the other built-in or third-party widgets that TypePad handles so well in its design tools. To create a TypeList, click the TypeList tab at the top of any TypePad admin page. Then follow the two-step process on the Your TypeLists page that appears: choose a list type and give the list a name. Now you should see the Recent Items list, which won’t have anything in it. Click the Add a New Item link and a pop-up window appears where you can give the item a name and enter some the details of what you want to post online. Note that you can use HTML, if desired, so it’s possible to type in anchor tags for hyperlinks, image tags for images, or basic type styling tags for italics, bold, and so on.

If you want to upload an image to your site without going through a blog entry or a photo album interface, you can choose the Control Panel tab and click Files to upload files directly to your TypePad server space. You can then enter an image URL (<img src="http:// yourname.typepad.com/nameofimage.jpg">) to the title of a TypeList item, thus making it an image instead of text. Likewise, if you opt to create a TypeList of links, you can add the image link to the title and then enter a URL in the Link URL entry box that links that image to a new website or page.

Once your list is created, you can click the Add This List To our Weblog(s) or About Page link in the Recent Items window, or you can select Weblogs | Design | Select Content to add the list to your weblog’s design. I encourage you to play with the different types of lists to see which ones work best for what you’re trying to do—generally speaking, if you’re trying to add some sort of images or text to the sidebar and one of the widgets won’t work for you, a TypeList can be configured to do the job. We’ll get a little more detailed with general blog design principles and CSS commands, but for starters, TypePad offers some very friendly design tools for altering the look and organization of your blog. And, as mentioned, TypePad offers a number of widgets that can be added to your blog to customize its offers and, perhaps, have a little fun. To get to all of these options, you can click the Design tab in the main TypePad interface for your blog or, from the top-level Weblogs tab, click Edit Design for the blog that you want to edit. That brings up the Design page. We’ll examine each of the design options in turn. Before you get started tweaking, though, it’s worth noting that the Design tab offers a link called New Design, which you can use to create a different design from the one that you currently have and save it separately. That way you can switch between stored designs without being forced to make manual changes every time you want to switch the look of your site. Here’s how:

1. Click New Design under the Design tab.

2. Choose a Layout on the Design Builder: Layout page and click Step 2: Select the Content for Your Weblog.

3. Make content selections on the Design Builder: Content Selections page and click Step 3: Order Your Weblog Content.

4. Choose the order of your content items on the Design Builder: Content Ordering page and click Step 4: Customize Your Weblog’s Style.

5. Alter the theme for your blog and then click Step 5: Save Your Template.

6. On the Design Builder: Save Template Set page, give your template a name in the Name fi eld and type a description if desired in the Description fi eld, then click Save This Design or Save and Apply This Design.

Now, whenever you want to switch to this design, you can click the Design tab and then click the Saved Designs link. On the Manage Your Designs page you can choose the design you want to use. Meanwhile, the rest of these options can be used either when you’re creating a new design or when you’re editing the current look of your blog, which you can do by clicking the Current Design link under the Design tab. Click the Change Theme option and you’ll see a page that resembles the one you used to choose the original theme for your blog when you signed up for TypePad service. At the top of the page you have two main choices: Pre-defined Theme and Custom Theme. If you choose Pre-defined Theme, you can then choose from one of the themes provided by TypePad. Simply choose the type of themes you want to view from the Show menu, then select the theme you want to use for your blog. At the bottom of the page you can choose Preview to see what your theme will look like, or choose Save Changes to put the new theme into effect.

Select Custom Theme and things get a little more complicated. You’ll notice that the options change, giving you the ability to alter items such as the Background color, the top banner on the page (you can change the colors and text style or upload an image for the top banner), the way Weblog Posts appear and the appearance of Sidebar items. Here’s what happens when you click the Edit This Element button under each of the options:

General Page Settings In the pop-up window that appears, you can make choices about the main body of your blog page, as well as the sidebars that appear on the front page.

General Settings Choose colors for the background of the page, whether or not the entire front page should have a border, what style that border should be, and what color. Use the pre-set color buttons or choose a Web-friendly “hex” color as discussed.

Main Content Column Here you can choose the size for the main content column, a background color, a border, and a border color. The typical size for the main content column is 400 pixels, which, when added to two 200-pixel sidebars (in a three-column layout) adds up to a fairly standard 800 pixels. If you’ve opted for a different layout (which you can change on the Change Layout page discussed later in this article), then you might want a different size for your main content; perhaps 600 pixels if you only have a left or right sidebar.

Right Column and Left Column In these two parts of the pop-up window you can make similar choices: column width, background color, border style, and border color.

Link Style Here you can make choices for the color of links on your page, depending on what’s going on with that link. The Normal Link color is the link before it’s been clicked. The Active Link color is the color of the link while it’s being clicked. The Visited Link color is the color of a link once you’ve returned to your page after the link has been visited. The Hover Link color is the color that the link changes to when the mouse pointer “hovers” over it. You can also choose a link style from either Underline or Bold, depending on how you want all the links on your page to appear visually. I will discuss link design for blogs, and you can use that discussion to help you make choices here in TypePad. When you’ve made your choices, click Save Changes to put those changes into effect.

Page Banner In the Page Banner pop-up you make decisions about the top banner that appears for your site. Choose a background color, a border, a border color, the color for your text heading, how that text is aligned, the style for the text and the text’s font and size. As an option, you can use an image for the top banner of your site. TypePad recommends that you create an image that is about 770 pixels wide for a threecolumn layout. (The typical width of a three-column layout is 800 pixels—400 pixels for the main content area and 200 pixels for each sidebar, and the banner image will have 15 pixels of “padding” on each side by default.) For two-column layouts, then, you might want to create an image that’s 570 pixels.

On the Customize Your Theme page, TypePad tells you the current widths of your columns in the General Page Settings box. Add those together to get the width of your blog’s design. The image that you create should be in JPG, GIF, or PNG format. To upload it, put a check in the Use This Banner Image Instead of a Text Title option and then click the Browse button to find the image you want to upload. When you’re done with the Page Banner settings, click Save Changes.

Weblog Posts In the Weblog Posts pop-up window, you can make choices about the font, font color, text alignment, text style, border, and border color for the blog entry’s Date Header, Post Title, the body of the post, and the Post Footer. TypePad shows you a live sample of each element as you’re adding it, so you can just experiment if you like. Click Save Changes when you’re done.

Sidebar Items In the Sidebar Items part you can make choices about the titles of sidebar items, the font styles for text in the sidebar, the border and alignment of images that appear in the sidebar, and the way that links appear in the sidebars. Note also the option Use the General Page Settings Link Style for the Sidebar, which you can use if you’d like to use the same link styles that you set up in the General Settings pop-up. Click Save Changes when you’re done.