Typepad 101: This or that?

Typepad offers a lot of features - this we know - but sometimes you may not know which of those features to use for what you're trying to accomplish. We're here to help!

Post or Page?

Pages are used for static content - contact pages, biographies, lists of links that you don't want to include in your sidebar, etc. You might update or correct it on occasion but it's not timely like a blog post. You can use Pages for supplemental information for your blog or use a series of Pages to create a traditional site, all on Typepad. We've used that concept to build our Knowledge Base - everything you see uses Typepad's Pages feature.

Posts are timely, so they're included in your blog's RSS feed, while Pages are not. Another benefit to Posts is that you can organize them using the Categories feature to help your readers find related topics more easily. Pages stand alone and aren't linked to one another so we recommend using categorized posts if you have a group of articles you want to link together, like recipes or book reviews.

Notes TypeList or "Embed Your Own HTML" Module?

TypeLists are great if you think you'll be using the content on more than one blog or if you want to have several items all together in one list under one heading. You can create and manage TypeLists via the Library link at the top of any page.

The "Embed your own HTML" module is associated with an individual blog's design, via the Content page. You can add any code you'd like and come back to the Content page to add/edit/remove that code later. The module does not show a header on the blog, just the output of the code you've entered.

We have more information about adding custom sidebar content in our Knowledge Base.

Basic or Advanced Templates?

In almost all cases, we recommend using Basic Templates. You have acess to features, like Custom CSS and the head module, that will allow most users to customize their design to their heart's content without getting into template code.

There are times when Advanced Templates are the better option - if you want to create a non-traditional layout, have special formatting you need to use, etc. However, because Advanced Templates are coded by hand using HTML, CSS and Typepad tags, we strongly suggest seeing if Basic Templates will work before committing to Advanced Templates. You can always reach out to us to check!

Have you ever wondered which feature to use? Let us know in the comments and we can lend a hand!

Typepad 101: Insert Large Photos In Posts

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered.

With the release of the additional column width options yesterday, you can include larger images within the body of your post using the custom image options.

To display 850px wide photos in your posts, for example, you can select a 900px width for the main content column at Design > Theme Builder. If you are using another design, the Custom CSS feature available with the Unlimited plan can be used to increase the column width.

Click the Insert Image button when composing your post. In the pop-up box, select Custom and choose Custom from the Image Size drop-down menu. Enter 850px in the text field.

Typepad Beta bloggers will see a slightly different layout
for the Insert Image box with similar custom options.

The width of 850px is chosen to accommodate for the 15px of padding on each side of the main content column and selecting a width with a 50px increment to maintain image quality. (See the post on maintaining image quality for more tips.)

You may wish to center the image within the column as it will be slightly narrower than the column. After inserting the image, you'll see the wide image embedded in your post. Double-click on the image to open the Edit Image options, select the center alignment option, and click Update Image.

Now, you have the tools you need to create a great blog to highlight your photos!

Typepad 101: Custom CSS Magic!

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. If you're at a plan which doesn't include Custom CSS, you can upgrade to put these tricks to use on your blog.

While Typepad gives you great design options right out of the box, some times you just want to jazz things up.  It's easy to do this with Custom CSS and the options are as unlimited as your imagination.  Here's just some of the ways you can spiff up your blog.

Social media is super important in today's world.  What better way to highlight your own social media links than by putting fancy social media icons on your blog?  This is a great way to show off your own individuality and put your links out there at the same time.

Your own name and brand is another thing you can easily promote on your blog by adding a signature to the end of each post automatically.  This is another excellent way to get your own personality integrated into your blog.

If you want to get even fancier, how about adding your own custom sidebar module headers?  Just look at the cute examples in that post.  Wouldn't your blog look great with something like that?

Perhaps you're using a border on your columns but it doesn't extend the whole way down the sidebar.  This might be a bum you out, but it's something you can change without much work.

On the other end of the spectrum, maybe you're using a design that's perfect except for one little thing.  Custom CSS can also help you hide design elements so that your design is exactly how you wanted it.

In addition to all of these changes, don't forget you can work even more CSS magic with Google Web Fonts. Changing up a font or two on your page can breathe new life into just about any design.

The Knowledge Base has other great articles on Custom CSS.  Our overview article is a great jumping off point.

Have any questions?  Need any help?  We're always here for you!

Typepad Master Class: Styling the Related Posts widget

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

With the integration of the Zemanta widgets, allowing you to add related posts and links to your blog, it's the perfect time to share how to make customizations to fit your blog's design. You'll need to have access to Custom CSS to complete this class, so make sure you're a Pro Unlimited user or higher.

The Default Look

When you use the Zemanta widget to add related posts to your blog, the widget will appear at the bottom of the post you publish. The default style of the widget will display like the image below:

Simple enough to fit in with any design! But what if you don't want the default look? We have two customization options below: (1) very basic changes, perfect for making the widget fit your color scheme; and (2) advanced changes, for those of you who like to shake things up a whole lot. It's pretty cool.

Basic Changes

The basic customization involves changing the style of the widget title and border color--two very simple and quick alterations that can make the widget fit your design's color scheme better.

Our example above involves small adjustments that have a decent impact. The title now appears in all caps, has had a bump in font size, and now shows off in a medium turquoise with some extra padding in the hips. The border color has been changed to match the new title color as well, tying it all together. 

The CSS:

/* change border color of zemanta block */
.zemanta-related { border: 1px solid #02849C; }

/* change header title */
.zemanta-related-title {
color: #02849C; /* font color */
text-transform: uppercase; /* all caps */
font-size: 12pt; /* increase size */
padding: 3px 10px 0px; /* make some room */
}

You can edit the hexadecimal color codes (prefixed with #), border style (1px solid), and text transformation (uppercase), to make it fit your own blog's color scheme. If it's not enough of a punch for you, then check this out...

Advanced Customization

The advanced customization shown below makes use of the basic changes just discussed, then lies to its dad and sneaks out of the house so it can attend the DTV dance-off.

*note - the thumbnail size has been increased slightly;
were it to be increased any higher, the images would appear pixelated.

Pretty great, right? Now let's talk about it behind its back.... The first image shown depicts the new default look with advanced styling applied. The second image shows off the slick hover state when you place your cursor over one of the articles. Didn't know that it could look so good? Neither did it!

A lot of changes occurred to make the above happen, and it's easier to review the notes we added to each line in the CSS than try to list them out in paragraph form. Suffice to say, pretty much everything in the widget was touched. Please take the time to review the property notes so you know which line affects which part; it'll help you when you want to make your own edits.

Since the advanced customizations use the basic CSS changes we already addressed, you can get started by pasting in the earlier basic code. Once that's in place, copy the code below and append it to your existing CSS at Design > Custom CSS.

The CSS:

/* remove box shadow around each article */
.zemanta-related a { box-shadow: none !important; }

/* reposition each article with margins */
.zemanta-article-ul { margin: 10px 0 10px 15px !important; }

/* style base for each article */
.zemanta-article-ul-li {
width: 320px !important; /* width of article */
background: #eee !important; /* background color to stand out */
padding: 20px 10px !important; /* give it some room */
}

/* adjustments for article link */
.zemanta-article-ul-li a {
float: left !important; /* float */
width: 150px !important; /* set new width */
padding: 0 0 0 10px !important; /* adjust spacing */
font-size: 10pt; /* increase font size of post title */
margin-left: -20px; /* reposition to left 20px */
}

/* adjustments for thumbnail */
.zemanta-article-ul-li img {
width: 100px !important; /* increase size of img */
box-shadow: 1px 1px 5px #333; /* add fancy shadow */
margin-left: 20px !important; /* fix position of img */
}

/* set hover state to make it pretty */
.zemanta-article-ul-li:hover {
box-shadow: 1px 1px 2px #000; /* add shadow */
background-color: #C0E4EA !important; /* change background color */
}

That's all there is to it! Are you stoked to try these changes in your own blog? Did your nerd power level up and you're eager to make your own customizations? If so, make sure to share what you accomplish with us and your fellow bloggers over in the community forum!

Typepad 101: How to embed pins and add Pinterest widgets on your blog

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. This tip is suitable for bloggers at all levels - no special tricks or upgrades needed!

Pinterest has become one of the most popular ways to curate your passions and share them with your blog readers. We're big fans of how Pinterest works with Typepad blogs, and over time we've shared various tricks with you, from adding a hovering pin-it image to verifying your blog, and lots more.

It's been almost a year since we showed you how to embed a Pinterest pin in a blog post. Recently, Pinterest has made some changes to how embedding pins works, so we're going to go over that today, and as a bonus, we'll also teach you how to add a Pinterest Profile Widget to your blog's sidebar!

Let's get started.

First, let's decide which pin we'd like to add to our post. Go to the pin page, then click the Share button in the upper right hand corner, and choose "Embed". This one looks good:

You'll be taken to the Pinterest Button and Widget Builder, where you can get everything set up for embedding pins now and in the future. Make sure "Pin Widget" is selected, and click the Build It button:

Typepad 101: Choosing Colors for Blog Design

If you've ever created your own blog design, either from scratch or via our Theme Builder feature, you know that choosing just the right colors can be a little daunting. The colors you choose will have an immediate impression on visitors to your blog. Bright and bold colors convey confidence and joy while dark or subdued shades can convey professionalism and a serious tone. Color selection is a way to tell readers who you are before they even read your content.

The Basics

First, bright or unique colors are fabulous but it's very important that your content remain as legible as possible. Consider using bright colors as accents and keeping your post text black or white. If a visitor can't read your content, they simply won't come back. 

Further to that, try to make sure that links look like links. That means they're somehow different from the surrounding text - a contrasting color, bold font, underlined, etc.

Think of color in blog design as spices in your food - the blog text is the star of the show and colors enhance the overall flavor and add personality. If you're unsure about color, add a little bit at a time - you can always change it back if it doesn't feel right.

This Introduction to Color Theory for Web Designers has a great section about contrast and legibility.

Finding Inspiration

One of the great things about color is that it's everywhere we turn. You probably have a favorite photograph or piece of art - would those colors work for your blog? How about an advertisement or piece of fabric that grabbed your attention? There's absolutely no limit to where you can look for color inspiration.

If you are starting with a photo, either to use as a banner in your design or just as inspiration, try uploading it to Pictaculous and the site will spit out color palette suggestions. If you're not great at picking colors yourself, this takes all the guesswork out of the process.

For even more inspiration, look to sites like Colour Lovers and Design Seeds. Both sites have palettes that you can use as starting points with your own design. The color combinations are unique and trendy, which will keep your blog's design on the cutting edge.

Another great way to find colors for your blog's design is to explore sites you're already using, like Flickr or Pinterest. We recommend collecting sources of inspiration and seeing if there are common bonds, like a particular shade or combination of colors.

Where do you turn for tools and inspiration for selecting colors for your blogs? Share your ideas with other Typepad subscribers over at Get Satisfaction. We look forward to being inspired!

Typepad 101: Hide Design Elements With CSS

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. If you're at a plan which doesn't include Custom CSS, you can upgrade to put these tricks to use on your blog.

Is there an element of your blog's design that you simply do not want to display? With a bit of CSS, you can hide an element on your blog, like sidebar module headers.

The CSS needed is the class of the element you want to hide followed by the { display: none; } code. At Design > Custom CSS, you can enter the code and click Save Changes to update your blog. Some examples which you may find helpful are below.

For instance, if you want to hide the URL field on the comment form, you can use the CSS:

#comment-url { display: none; }

Additional information can be found in the article on hiding the URL field in the comment form.

To hide the navigational links which go to the next and previous posts on individual post pages, you can use the CSS:

body.post .content-nav { display: none; }

Typepad 101: Your About Me Page

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered.

Your blog is all about you.  Your thoughts.  Your ideas.  Your personality.  Doesn't that mean that you need to showcase who YOU are on your blog?  An About Me Page is the perfect way to do this.

All paid Typepad plans come with a default About Me Page that is easy to edit.  Simply go to Account > About Me Page and you'll find this section:

With the default About Me Page, you get to choose many options to add to the Page.  This includes displaying your name, photo, your e-mail address, your URL, any Typelists, and more. Additionally, you can choose the design you want applied to the page.

Your About Me page is located at:

http://<your Typepad domain>.typepad.com/about.html

Or, if you have mapped a domain to your entire site:

http://<your custom domain>/about.html

You can display a link in your blog's sidebar that goes to your About Me Page by selecting the Link to Your About Page module Design > Content.

You can read more about the About Me Page in our Knowledge Base.

The About Me Page is limited to two column left layout, so if you're using a different layout on your blog, the default About Me Page may not be best for you.

In that case, we recommend the even simpler option of creating a new Typepad Page.  This new Page will exactly match your blog design.  Simply use the drop down option on the Compose button to create a New Page:

Now just type the information you want to display in the Compose section, like you would any post and save your changes.  Et viola! You're done!

To add this Page to your sidebar, you create a new Link Typelist.

To add it to your Navigation Bar, go to Design > Content, click the pencil icon, and add the new link there.  We have more information on this here.

You can also use the Pages Sidebar Module at Design > Content to add a list of all of your Typepad Pages to your sidebar.  This is also covered in our Knowledge Base.

Typepad Master Class: Add a Pinterest hover image

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

Typepad's default Pin It button is a great way for you and your readers to add your images to Pinterest. But lately, lots of Typepad bloggers have asked how to get a Pinterest button to show up when hovering over images in blog posts. Today, we've got you covered.

Listen, we get it--you're seduced by neat tricks. They're fancy, they look cool, and you like to show off. We like these things too, which is why this Master Class post will tell you exactly how to setup a hovered image Pin It button. The best part? You don't have to be some Code Jedi, designing your blog from scratch in HTML and Typepad code, calling upon the power of The Schwartz when things get jammed. All Pro plans can use this tip. 

Typepad 101: Put a Banner on It!

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. Topics covered in this series are suitable for bloggers at any skill level. Today's project does use a bit of Custom CSS in some areas, so you may need to be at the Pro Unlimited level or above. If you're at the Free Micro or Pro Plus levels and are interested in putting these tricks to use on your blog, you can upgrade your account anytime.

One of the best things about blogging with Typepad is how easy it can be to have a great looking blog in a few clicks, just by using one of our professionally designed Themes. With so many great themes at your fingertips and new themes being added all the time, chances are you'll find the perfect look for your blog.

But what if you want to take it a step further and develop a more custom design without getting too technical? Well, that's where custom banners come in.

There are a few ways to add a great looking banner to your blog. Typepad's Clean, Metropolitan, and Mosaic themes are beautifully designed and come equipped with our banner upload tool. Just click to add your image, and it will be dropped into your design with your blog's title and description overlaid.

Want to add the text directly to your banner with Photoshop or Paint Shop Pro instead? You can do that! Our Pro Unlimited and Pro Premium bloggers can use some Custom CSS to remove text and ribbon overlays. Learn more about that here.

Not so handy with Photoshop? No problem! Use a free service like Picfont or Ribbet to add your text, or Pixlr to crop, add text, and make other nifty edits.

Want to customize your colors, fonts, and column widths along with your banner? Then our Theme Builder is the perfect tool for you.

Ready to be inspired? Let's look at a few different types of custom banners that some great Typepad bloggers are using:

Photo based banners are a fantastically memorable way to make your blog stand out. Just open your photo in Photoshop (or use the online services mentioned above), crop it to the proper size, add your blog's title, and you're in business, just like Seymour Library, here:

If you're armed with basic to intermediate Photoshop skills (or you've hired a designer), you're ready to get fancy! Spend a few bucks on a stock illustration from a service like iStock Photo, match it up with great colors and text, and voila, you have a splendid banner that matches your blog's brand, like the one Petite Eco Kids is rocking:

A text only banner might seem simple, but it can bring a modern, classic look to your blog while allowing you to use a font that may not be found on all operating systems, without the need for special coding. Note To Self wears this look really well:

Most blogs feature their banners across the top of the page, resting evenly over its columns, but it certainly doesn't have to be that way! Why not color outside the lines, so to speak, and get creative with your banner? The more original your blog is, the more memorable it will be!

With a little Custom CSS and the Embed Your Own HTML module (here's a tip), you can shift your blog's contents up, and display your banner on the sidebar, as seen on The Ampersand:

You can even use your banner to highlight different parts of your blog. At Design Editor, the main content and sidebar are cleverly defined with a single banner:

We hope you enjoyed this lesson! If you're ready to get started and you find yourself with questions about how to make a great banner for your blog (or if you already have a great banner and you want to show it off), just leave us a comment!

PS: If you want to have a custom banner designed for your blog without breaking the bank, we can do that! Learn more here.