The Blogger Template Designer

We’ve added a fair bit to Blogger over the years, but one thing that’s been constant for some time has been our collection of templates. While a number of talented designers around the web have offered their own fresh and interesting designs that you can apply to your Blogger blog, our stock set has grown a bit stale, and you’ve noticed. You let us know — in the forums, on Twitter, sitting next to us on airplanes, even from across the counter at a Harvard Square stationary store, and we’ve been listening.

Today we’re taking a big first step in improving not just our template designs, but all the ways that you can customize the look and layout of your blog. We even made a video with jaunty music to show it off:

Here’s what we’re launching today to Blogger in Draft:

• 15 new, highly-customizable templates from our design team, split into four families: Simple, Picture Window, Awesome Inc, and Watermark
• One-, two-, and three-column layouts for each template, with complete control over the size and arrangement of the columns
• Hundreds of background images and patterns from iStockphoto, the leading microstock image marketplace

Try it Now

Go to http://draft.blogger.com/ to log in to Blogger in Draft. (If you’ve never been there before, Blogger in Draft is just like regular Blogger, except with new, in-development features like this one.) Click on your blog’s “Layout” link to go to the Layout tab. The link to the Template Designer is at the end of the row of sub-tabs.

You can use the live preview to see your new template without affecting your blog. When you find a new look that you’re happy with, just click the “Apply to Blog” button to publish it to the world. Note: You can backup your existing template ahead of time by going to Layout > Edit HTML. We recommend this if you have a customized blog design that you might want to go back to.

Classic template blogs: If you have a “Template” link or tab instead of “Layout,” you’ll first need to switch from Classic to Layouts before you can try out the Template Designer. Go to Classic > Customize Design and follow the instructions there. You’ll need to switch to one of our old templates first, but then you’ll be able to use the Template Designer to pick a new one.


Tips from the Blogger Team

• Get your links to match a background image quickly by using the Background panel’s “Main color theme” to adjust all of your blog’s colors at once. This works particularly well with Simple’s second design.

• With a three-column footer, you can fit in several gadgets to interest your readers after they’re done reading your post. For inspiration, read Derek Powazek’s post, “Embrace your bottom!”

• If you’re using our new Pages feature, put the Page List gadget in the wide section at the top of your blog. We’ve added unique tab designs to all of the new templates.
• Many of the patterns in the background image picker are semi-transparent, to let your blog’s background color show through. Look for the “transparency page curl” to see which patterns these are.
• The Attribution gadget (added to the footer by all new templates) is there to give credit not just to the designer and artist of the background image, but to you as well. Edit its settings by clicking “Edit” on Layout > Page Elements to add your own authorship or copyright information.

Get Involved

• Show off your new design on Twitter by tweeting your blog’s URL with the hashtag #newbloggertemplate. We’ll be looking for creative designs to feature in upcoming blog posts or as Blogs of Note.
• We’re taking feature requests. Let us know what else you’d like to see with our Google Moderator page. (And don’t worry: uploading your own background image is already filed and at the top of our list!)
• To report bugs or discuss the Template Designer in more detail, start a thread on our discussion forum. Include “Template Designer” in the subject so we’ll be sure to see it.
• Do you design templates for Blogger? Join our template designer group for documentation and discussion on working with the new templates, as well as details on how to get your designs into the Template Designer.

Over the coming weeks and months we’ll be adding new features, templates, and images guided by the feedback we hear from you.


Miscellaneous Notes

• The Template Designer is not supported on Internet Explorer 6, nor, for that matter, are the new templates. While we’ve made an effort to ensure that they’ll still be readable, the new designs are not going to look particularly attractive on IE6. We strongly encourage the very small number of bloggers and readers still using IE6 to upgrade to a more modern browser. For more information about browsers, visit Google’s What Browser? site.
  
• The rounded corners and drop shadows used in several of the templates may not be visible in older versions of some browsers. Opera users will need to wait for Opera 10.5, currently in public pre-alpha release. IE7 and 8 users will not see these effects within the Template Designer, but will see most of them on the live blog itself.
• From within the Template Designer you can only move gadgets around, you can’t add, delete, or change their settings. Those features are still on the Layout > Page Elements page.
• Some gadgets, such as Poll, Reactions, or third-party Google Gadgets will not reflect color changes in the live preview but will after the template is applied. Others, such as Followers and AdSense, will not change colors automatically at all. It may be easiest to remove and re-add these gadgets to refresh their palettes, though you could also tweak the colors by hand by editing their settings.
• Customizations to widget templates will be cleared when applying a new template to preserve the new layout. If you have made changes to your widget templates, save them first by going to Layout > Edit HTML and clicking “Download Full Template.” You’ll be able to copy them back in as needed after you apply your new template.