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.

Pages come to Blogger In Draft

by Sean McCullough, Software Engineer


Update (1/21 @ 8:54am PST): We've temporarily disabled creating & editing pages. You can still view the pages you've already created. We will re-enable ability to create and edit pages soon.


Update (1/21 @ 9:32pm PST): Pages are back on.

Pages have been a top requested feature, and they are now available on Blogger in Draft!

Blogger Pages lets you to publish static information on stand-alone pages linked from your blog. For example, you can use Pages to create an About This Blog page that discusses the evolution of your blog, or a Contact Me page that provides directions, a phone number, and a map to your location.

You create a page similar to how you write a blog post. From Blogger in Draft click the Posting | Edit Pages tab, then click New Page. (Note: you can create up to 10 pages.)

Once your page is published, you can link to it from the new Pages widget. The Pages widget lets you add links to your pages as tabs at the top of your blog, or as links in your blog's sidebar.

In the Pages widget, you can decide which pages will have links, and in what order they will appear. You can also choose whether or not you want links automatically created for pages when you create them by checking or unchecking the box to the left of Add new Pages by default.

Finally, for those of you that have custom templates, your custom template may not automatically support Pages as horizontal "tabs". If you are familiar with HTML, follow these instructions on how to add Pages to your custom template.

Let us know how it goes in the comments!

Look Up Words as You Compose

by Awaneesh Verma, Dictionary Product Manager

We recently added a dictionary with definitions and translations to "Blogger in Draft." Here's a quick tour of the feature and its functions.

Look up definitions: To look up the definition of a word or phrase, simply highlight it and click the dictionary icon in the editor's toolbar:

This will open the dictionary's Define tab, where you can view definitions for words and phrases across 12 languages.

Get synonyms: If you'd like to see synonyms for an English word, begin by looking up its definition as above. Then, click a hyperlinked synonym to browse to its definition, and click Insert or Replace to add the currently displayed word to your composition:

Currently, synonyms are available only in the English dictionary.

Translate: You can use the Translate tab of the dictionary to translate words and phrases between over 50 languages.

Similar to the Define tab, you can navigate translations by clicking them and can feed them back to the post by clicking Insert.
We hope you find this dictionary a useful composition tool. Please let us know what you think by leaving us a comment below. Thanks!

Autosave and Automatic Date and Time

We’ve recently added two new features to the post editor on Blogger in draft: autosave and automatic date and time.

Autosave is a feature we’ve had for a while on the old post editor, and it does what you’d expect: automatically save your draft posts when you pause in your typing. We’ve brought the same convenience and safety to the new post editor.

With automatic date and time, your posts will now be timestamped with the date and time that they’re published, not the date and time when you first opened the post editor (as has been the case). You can of course still explicitly set the date and time by opening Post Options and switching to Scheduled at instead. Once a post is published, it will keep its date by default, even if you go back even if you go back to edit the post and re-publish.

New feature: Geotagging

We’ve just added geotagging to the new post editor on Blogger in draft. With geotagging, you can add a location to your each of your blog posts. Just as time stamps help readers find posts from a certain date or time, geotags give your readers a way to browse posts near a specific location.

Adding a geotag to your post is easy. Log into draft.blogger.com, open the post editor, and click the add location link below the main text field.

Use the location editor to search, drag, click and zoom on a map to choose and save a location. We’ll try to label the location you choose using our reverse geocoder, which looks up a name for a point on the map. You can also edit the location name by clicking the blue location name text below the search field.

When you publish your post, the geotag is displayed below your blog post as a link, which will open up Google Maps.

We also include each post’s location in your blog’s RSS and Atom feeds using GeoRSS, a standard for geotagging. This means that feed readers, map applications and search engines can associate your posts with their locations.

We’re still working on other ways to show geotag information on your blog. Brian, the Google engineer who created this feature in his 20% time, has written a gadget that will display your posts on a map. To add it to your blog, click “Add Your Own” on the “Add a Gadget” page and paste in this URL: http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml

Geotagging has a few known issues. We'll be addressing them shortly, but here are some suggested workarounds for the near-term:

• The location editor is hidden behind the text field in the Edit HTML tab. Please switch to the Compose tab to view and edit locations.
• A geotag cannot be removed from a post once it has been saved. If you need to remove a geotag, please copy your post content into a new post and delete the geotagged post.
  
• Update 2:33pm: If you have a customized template and you don't see the "Location:" byline, you may need to reset your blog's widget template. Do this by going to the Layout > Edit HTML tab in your dashboard, and then clicking Revert widget templates to default below the main text field.
• Update 2:33 pm: Some users are having issues with the blog post map gadget. Brian is investigating.

What types of posts are you adding a location to? What other functionality would you like to see in this feature? Leave us a comment and let us know what you think!

New Feature: Contact Picker

We’re making it easy to use your existing Gmail contacts in Blogger. We’ve added a “Choose from contacts” link below some of your blog’s settings fields, such as Comment > Comment Notification Email and Email > BlogSend Address. Click the link to bring up a window with your Gmail contacts list.

Currently we don’t have the picker built in to the Permissions settings, but we’re working on it.

Finding your contacts ok? Any problems? Let us know in the comments.

Feature Updates and Bug Fixes for September 23rd

We’ve just released a few fixes to some of the features currently here on Blogger in draft.

Reactions gets some visual improvements, including fixes for display in IE 6 and overall spacing fixes. We’ve also tweaked the HTML and images to make it load a bit more quickly.

We’ve fixed an Import / Export bug that was truncating the export of comments. Also, importing scheduled posts will keep them scheduled instead of publishing them immediately.

We’re bringing the Embedded Comment Form closer to feature parity with the full page comment form by adding e-mail subscription for follow up comments. If you’re logged in, you can now also subscribe to comments without posting one of your own. We’ve also added improved color matching in the form for all browsers.

Features and Bug Fixes for August 14th

Today’s release to Blogger in draft brings one new feature: Reactions, which are customizable one-click buttons below your posts. Read more on our announcement post, and try them out on this blog.

We’ve added better show/hide controls and brought back the post count and Blogs of Note to the new dashboard, and published it to the main Blogger site.

In case you missed it, we moved Google Gadgets and the gadget directory to the main Blogger site as well.

This release also has some fixes to other Blogger in draft features:

New Post Editor

• Edit HTML mode now has a toolbar.
• The Compose toolbar gets a fifth font size, and “Normal” should now more correctly match the font size on your blog.
• Newly added images will correctly pick up the border styles from your blog’s template.

Import / Export

• Basic settings are now saved and restored.
• Templates (both Classic and Layouts) are saved and restored.
• Exporting a blog will now cause the XML file to download in Safari.
• Import blog messaging now distinguishes between published and draft posts.

New feature: Reactions

With our new Reactions feature, you can get one-click feedback from your readers. Think of it as a mini-poll for each blog post, or a flexible version of star ratings because you customize what options are available. We hope this will help your blogs get feedback from people who read your posts but don’t have enough to say to for a full comment.

To enable Reactions, log in to http://draft.blogger.com/ and go to your Layouts page. From there, click the “Edit” link for the Blog Posts gadget and then check the “Reactions” checkbox. You can edit the Reactions buttons by clicking "Edit" or clicking the buttons themselves, as shown.

You can customize the location of the Reactions within the post by dragging the preview around in the “Arrange Items” box. We’ve found that it looks best when it’s on its own line, but your mileage may vary.

You can customize the options and their label to match the theme and style of your blog.

Additional Notes

• This is a Layouts-only feature. If you’re using a Classic template you’ll need to upgrade to Layouts to add Reactions.
• The buttons should blend seamlessly with most blog backgrounds. Button backgrounds are a mostly transparent grey which should, we hope, coordinate with everything. The text and button highlight colors for the ratings are taken from the following skin variables:
  
  • Foreground: textcolor, textColor, mainTextColor
    
  • Highlight: linkcolor, linkColor, mainLinkColor
    
• If you have customized your blog widget’s template you may not see the reactions. You will need to either reset your blog widget’s template or copy the Reactions code from a fresh template. Search for “reactions-buttons” to find the appropriate block of code.
• A known issue: if you choose short words/phrases, it’s possible to enter enough options that the line of buttons will wrap (and not look very good). If this happens to you, you'll need to shorten your options or reduce their number.
  

What do you think? Leave a comment, or just rate this post!

Updates and Bug Fixes for June 26th

Today’s Blogger release is a big one for Blogger in Draft. Let’s lead off with the quick stuff:

• Google Gadget integration continues to improve, with better editing of gadget preferences.


• The new look for the Dashboard has seen a handful of tweaks, including a new button style that we’re trying out and, by popular demand, the “show all blogs” toggle is now sticky.


• The subscribe page element has been published to WWW.


• We’ve added a “Make Blogger in Draft my default dashboard” to the Blogger in Draft dashboard, so now you don’t have to remember to type “draft.blogger.com” instead of “www.blogger.com.”


• So you can easily keep up with the news, we’ve added this blog as a tab on the Blogger in Draft Dashboard.

But that’s not what you came here for. You wanted this:

• Webmaster Tools Verification. Turn this on to automatically add and verify all your blogs on Google’s Webmaster Tools.


• Star ratings. Add a 0–5 star rating control to the bottom of your posts so that your readers can rate them.


• Import / export of blogs. Back up all of your posts and comments to one Atom XML file on your computer, and import your posts from one blog to another.


• Embedded comment form. By incredibly popular demand, we’ve brought the comment form to your blog’s post pages, with support for Google Account and OpenID authentication.


• New post editor. We’ve completely revised the post editor, bringing in drag-and-drop image placement and better HTML handling.

As always, these features are on Blogger in Draft because we’re not done with them and we’re looking for your feedback. Please read the posts for each of the features before trying them so that you know what’s working and what isn’t. Make sure you leave comments! These are big features for us, so we want to get them right before we turn them on for everyone.

New Feature: Posting Gadget for iGoogle

Today we’re launching a draft version of the Blogger Posting Gadget for iGoogle. With this gadget, you can write, save, and publish posts to any of your Blogger blogs directly from iGoogle.



Interested? Try it now:



Make sure you’re signed in with the same Google account you use on Blogger in order to start posting.



Currently, the gadget supports the following:

• Editing the HTML of title, body and labels


• A drop-down menu to select from multiple blogs (if you have them)


• The ability to publish a post immediately, or save it back to Blogger as a draft post
  
  

Tip: If you start writing a post in HTML and decide that you want image uploading or other rich text features, just click “Save Draft.” The gadget will save the post, then give you a link to directly edit the post in Blogger.



Some compatibility notes:

• The Blogger posting gadget will only work in iGoogle, not in other gadget containers, because it requires authenticating with your google.com cookie. We hope to remove this restriction in the future.


• Since this gadget uses the JavaScript Google Data API for Blogger, it does not work in Apple’s Safari browser. We hope to fix this in the future as well.


• We’re also hearing reports that the gadget is not working correctly in Internet Explorer. We’re looking into this. Now works in Internet Explorer; you may need to remove and re-add the gadget to pick up the fix.
  
  

While there’s still a bit we’d like to do with the gadget, we want to announce it first on Blogger in Draft to get your feedback. Some of the improvements we’re considering are:

• Availability in all of Blogger’s supported languages


• Auto-completion for labels


• Autosaving of posts
  
  


• Rich text editing

What’s on your list? Let us know in the comments.



Update, 3:15PM: Added compatibility note about Internet Explorer.

Update, 6/10: Fixed to work in Internet Explorer.

New Feature: New Dashboard

Our old dashboard was getting a little cramped, so we reorganized things and gave everything a fresh, new look. You can see this now by logging in to Blogger in draft.

The new dashboard contains all of the same information that the old one did, but rearranged to emphasize the most important content and changes (and with a little more room for future goodness).

By default, only some of your blogs are shown in the dashboard, although there’s a link you can click to display all of them. The blogs we show by default include the two blogs you most recently published to, as well as any with unmoderated comments or ToS/spam warnings.

Please try this out and let us know what you think in the comments! Your feedback is an important part of our design process and we’d like to know what you think before we release this re-design out into the wild.

Remember: Not sure where some of your blogs went? Click the “Display all blogs” link at the bottom.

Blogger in Draft Bug Fixes for June 6th

Today we have a couple of new features (more on those later in the day) and some bug fixes. We’ve also published Blog List, so it’s now available to everyone on the main Blogger site.

Here are the highlights:

• The Google Gadget page element configuration has been greatly improved. We’ve fixed a number of cosmetic and functionality issues in this area. Try it out with the new unified Gadget and Page Element directory.
• Adding feed URLs to a Blog List directly now works reliably for all supported feed types.
• Adding a blog with no detected feed to a Blog List now triggers a warning dialog and icon.

Everything working ok for you? Let us know in the comments.

Blogger in Draft Bug Fixes for May 9th

We’ve made a handful of fixes to improve Blog List:

• A “See All” link when you’ve truncated the list
  
• Icon loading is deferred for better page responsiveness
• Post title now links to post’s permalink
• Newly-added blogs are highlighted on the configuration page
  
• More reliable adding and removing of blogs, and better feed and title detection
  

If you’ve customized the Blog List widget template at all via Edit HTML, you will need to reset the template to get some of these new features.

We’ve also made some visual and reliability fixes to the new Gadgets directory, particularly around adding custom gadgets.

Note: we’re looking into reports of bX-e441ek errors for some people who have added Blog List to their blogs. We hope to have a fix out for this presently.

Blogger in Draft Bug Fixes for April 21st

Last week’s release fixed several bugs with blog list and scheduled posts:

Scheduled Posts

• Scheduled FTP publishes now work.
• Posts published via scheduling will trigger BlogSend emails.
• General reliability improvements.
  

Please try these out if you were having trouble with scheduled posts. We’re aiming to take this feature out of draft in the fairly near term, so we’d like to make sure that everything works.

Blog List

• Improved Blog List update reliability.
• Fixed bX codes on Blog*Spot when certain sites are added to a Blog List.
• Removed bolding of blog titles.
• Usability and cosmetic improvements to the Blog List configuration dialog.

Blogger in Draft Bug Fixes for Feburary 29th

We pushed out a few bug fixes to the latest Blogger in draft features last night:

• Renaming of feeds in the Blog List now works
• Correct cache invalidation so that changes to Blog List subscriptions will now be reflected immediately
• Scheduled posts now have correct permalinks

Enjoy!

Update, 3/4: Unfortunately the permalink problem for scheduled posts is not solved.

Update, 3/6: The permalink problem has been fixed.

New Feature: Blog List

Bloggers often feature a list of their favorite blogs, called a “blogroll,” in the sidebar of their own blog. Our latest page element, Blog List, helps you do just that, but we’ve mixed it in with Google Reader to make it even more powerful and useful.

At its most basic, Blog List displays a list of links to your favorite blogs, with an optional icon. If you link to a blog with an Atom or RSS feed, however, the Blog List can show the date of the blog’s last update or even the title and snippet of its most recent post.

You can set the number of blogs to show in the list and whether they should be sorted by update time or alphabetically by blog title.

You add blogs to your Blog List by entering blog or feed URLs directly, or by importing subscriptions from Google Reader. When you add by URL, Blogger will attempt to detect an Atom or RSS feed for it in order to show post and update information. If none is found, the blog will still be added to the Blog List, just as a simple link.

Please try this out! Add a Blog List (Or two! Or more!) to your blog and let us know what you think in the comments. We value your feedback, and will try to incorporate as much as we can before the Blog List goes big-time on www.blogger.com.

Remember: Like all features mentioned on this blog, you must log in to http://draft.blogger.com/ to add a Blog List.

Additional Notes

• The Blog List writes all links out in HTML so that, unlike JavaScript-based blogrolls, you pass PageRank goodness on to the blogs you link to.
• The icon next to a feed is taken from the favicon.ico file in the blog’s home directory. We currently do not support the “shortcut icon” link tag.
• Adding and removing blogs may not invalidate our cached version of your blog. If you’re having trouble seeing your changes, republish a post or make a small settings change to your blog. Update, 2/29: This has been fixed.
  
• Some blogs don’t link to their Atom and RSS feeds in a way that we can detect. In these cases, add the feed URL to the Blog List for best results.
  
• Only the blog admin who added the Blog List may edit and configure it. Why is that? You’ll find out later...

New feature: Blogger as OpenID provider

As we hinted before, we’ve been working on making Blogger an OpenID provider. With our latest Blogger in Draft release, we’ve done just that. You can now use your blog’s URL as an OpenID URL on any website that accepts OpenID 1.1 authentication.

To enable OpenID for your blogs, just edit your profile on draft.blogger.com and enable the checkbox which says Enable OpenID for Blogs and you are all set!

After checking this box, you can use the URL of any of the blogs you are an admin of as an OpenID identity. When you use it to log in to another site, you will be taken back to Blogger where you can confirm that Blogger can tell the site that you own the domain.

You can find more information about OpenID and how it works at OpenID.net.

We hope you’ll try out using your blog as your OpenID identity around the web. Let us know how it goes in the comments! If you’re looking for things to do, take a look at MyOpenID’s OpenID Site Directory for OpenID-enabled sites.

Since this feature is still in draft, there are a few caveats:

1. We currently do not support OpenID for blogs that aren’t hosted on Blog*Spot or a custom domain, such as FTP blogs. However, the OpenID web site has a help page that explains how to workaround this limitation by delegating your FTP blog to a Blogger-hosted blog.
   
2. If you say “Yes, Always” to trust an OpenID site forever, you cannot now delete that trust. We will add this feature soon.

Update, 1/29: We have a quick HOWTO post for delegating to Blogger as your OpenID provider.

OpenID Commenting Update

OpenID commenting is now live for all Blogger users, not just Draft users. A few updates with this release:

• OpenID icons now appear on Post Pages in addition to comment.g; they have their own CSS class (openid-comment-icon) in case you'd like to customize their display
  
• Nicknames with "www" in their URLs are now correctly parsed
• Comments from Blogger/Google accounts now have the Blogger favicon

If your blog allows anonymous comments, OpenID-signed comments are enabled by default. Otherwise, you can turn on OpenID signed comments by restricting your Who Can Comment? setting to Registered Users - includes OpenID. This will exclude anonymous commenters.

New feature: Subscription Links

Our new Subscription Links page element makes it easy for your readers to subscribe to your blog's feeds. We've added one-click subscriptions to six popular feed readers: iGoogle, Google Reader, Bloglines, Netvibes, NewsGator, and My Yahoo!. Since you can now put your feed links in your sidebar instead of just at the bottom of your blog, more readers will see them and subscribe to your blog.


In addition to blog posts, your readers can subscribe to feeds of comments. The comments feed on your blog's homepage contains all comments, while the feeds on post pages only have per-post comments.

We are launching this feature on Blogger in draft while we gather feedback from you. Are we missing your favorite feed reader? Please let us know what you think in the comments below.

In case you missed it: if you're looking for more control over your feed, try redirecting it to FeedBurner! Learn more.