Typepad 101: Put a Banner on It!

March 20, 2013

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.

Banneruploader

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:

Seymour Library

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:

Petiteecokids

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:

Notetoself

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:

Theampersand

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:

Designeditor

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.

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.