Saturday, August 16, 2008

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!

Friday, August 1, 2008

New toolbar, AJAX saving, and other fixes for the post editor

Today we’ve released a few enhancements to the new post editor, fixed some bugs, created a new one or two, and left a handful of things to fix later.





New Stuff

  • AJAX save. We’re still not saving posts automatically, but now the “Save Now” button will keep the post editor open, and Ctrl-S works as a shortcut for saving. (Internet Explorer users: use Ctrl-Shift-S to save.)
  • New toolbar. This toolbar looks better, loads more quickly, and has undo and redo buttons. By popular demand, the full justification button has returned. We’ve also added a strike through button and improved the color palettes.

  • Vertical resizing. You can now change the height of the post editor by dragging the resize handle in the lower right (near the labels field). The size is saved in a per-user, per-blog preference.
Fixed Bugs

  • <div>s in Edit HTML are now better-preserved in Compose mode. This should fix most post summary hacks. If your hack uses <span> tags, please switch to using <div>s.
  • Lists created in Compose mode can now have new items added to them after switching to Edit HTML and back.
  • Line breaking is no longer lost when editing a post in the old editor that was first written in the new editor.
  • Nested block-level elements no longer create odd blank lines.
  • Non-breaking spaces now consistently appear as &nbsp; in Edit HTML mode.
New Bugs (that we know about)

  • The publish and save buttons wrap oddly on Mac browsers.
Major Remaining Bugs (that we know about)

  • The Font Size menu has 4 sizes instead of 5, and “normal” looks small.
  • Paragraph tags are lost when switching from Edit HTML to Compose.
  • The Blockquote button still behaves oddly, especially in Internet Explorer.
  • The URL an image links to cannot be changed without using Edit HTML mode.
  • Images inserted with this editor do not pick up border styles from the blog template.
  • Inserting a new link with the link dialog loses your place in the post. 
Find anything else? See: How to report HTML bugs with the new post editor



Things Left To Add

  • Toolbar in Edit HTML mode
  • Autosave
  • Spellcheck
  • Video upload
  • FTP image upload
  • Bi-directional text input and Indic transliteration 
  • and a handful of smaller things too numerous to include here

New Post Editor

Today we’re releasing the first iteration of a completely new version of the Blogger post editor. This editor is more stable, compatible, predictable, and will help us bring more functionality to posts on Blogger over the coming months and years.



Out of the gate you’ll notice two areas where the new editor improves significantly over Blogger’s current editor: images and raw HTML.



One important quick note before we get into those, however: Autosave is currently disabled in the new post editor. We’ll turn it on in an upcoming release, but for now it’s off. You’ll want to periodically remember to save your drafts when using this editor.



On to the fun stuff!



Improved Image Handling

When you upload an image to the new post editor it will appear as a thumbnail in the image dialog box. That way, you can upload several images at once, and then add them into your post at your convenience. The thumbnails will be available until you close the post editor.



When you add an image from the dialog into your post it will be placed at the insertion point instead of at the top of the post.



If you don’t like where an image is in your post, you can drag it around to another spot. If you drag it towards the left side of the editor it will float to the left, likewise for the right, and if you leave it in the center it will be centered. You can drag the image between paragraphs and other block elements. Unlike in the current editor, dragging in the new editor preserves the link to the full-size version of the image.



You can easily resize or remove an image with the image size “bubble.” Click on the image (Firefox 3 users may need to double-click) to bring up the bubble, and resize the image instantly. You can resize any image, including ones added by URL, but if you resize an image that was uploaded through the post editor we resample the image on our servers to keep the download size small.



It might be easier to see this in action, so we made a short video to show off some dragging and resizing:




video


Improved Raw HTML

If you use Edit HTML, especially to add tables and other advanced HTML to your posts, you should find that the new editor has a number of enhancements to make the experience less frustrating, or, dare we say it, even pleasant.



By default, the current post editor replaces any newlines in your post with <br> tags. This can cause problems when you want to use newlines to make table or list HTML clearer, since the inserted <br>s will mangle the formatting significantly. The new post editor does not introduce <br>s within tables, lists, scripts, styles, preformatted blocks, or objects.



Since they won’t destroy the formatting, the new post editor adds clarity newlines to the HTML that’s generated by Compose mode. For example, if you create a list in Compose mode and then look at it in Edit HTML, you’ll see that there are newlines before each of the <li> tags.



For posts made with the new editor, the blog-level “Convert line breaks” setting (from Settings > Formatting) is ignored. Instead, newline behavior is controlled by an Edit HTML setting under “Post Options,” which affects how newlines and <br> tags are displayed in the Edit HTML editor. This means that, unlike “Convert line breaks,” you can change newline behavior when it would be useful for a given post without affecting the display of all the other posts on your blog.



We’ve also added a Compose mode setting to let you choose what happens when HTML tags are typed in to the Compose editor. The default, “Interpret typed HTML,” matches the current post editor’s behavior: typing “<b>bold</b>” into the editor would look like this in your post: bold. If you change the setting to “Show HTML literally” instead, you’ll get: <b>bold</b>.



The Edit HTML and Compose settings, along with the choice of whether to show Edit HTML or Compose by default, are saved per-user, per-blog and are updated when you save a post. The Edit HTML setting defaults to the value of the blog’s “Convert line breaks” the first time you open the new editor.



Other New Features

You’ll find other new functionality here and there in the new editor. Here are a few more highlights:

  • Easy link editing in Compose mode. Just click a link and you’ll have the option of changing its URL or removing the link.
  • Full Safari 3 support on both Windows and Macintosh. The old editor is pretty quirky on these browsers, but the new editor works as you’d expect.
  • New Preview dialog that shows your post in a width and font size approximating what you’d see on a blog.
  • Placeholder image for <object> tags (such as those from video embeds) so that you can see and drag them around Compose mode.
Currently Missing Features

Besides the aforementioned autosave, there are a handful of other features from the current post editor that are on our to-do list for the new editor. If you rely on any of these, you may not want to use the new editor for everything just yet.

  • Spellcheck
  • Video upload
  • Hindi transliteration
  • Bi-directional text controls
  • Toolbar for Edit HTML mode
  • FTP file upload
  • Enclosures
Be patient: these will all come to the new editor over the upcoming weeks. Look for announcements on this blog.





Known Issues

We’ll be adding to these in the comments, probably, but here are a few little problems you might run into right now:

  • The “Blockquote” button is unreliable in Internet Explorer 6.
  • Lists and other block elements may get an additional blank line above them, which can be removed after re-editing the post.
  • You cannot add more items to a list if you toggle from Compose to Edit HTML and back, or re-edit the post. As a workaround, add new <li> tags in Edit HTML mode.
  • Bold and italic keyboard shortcuts do not work in Safari, and the publish and save keyboard shortcuts are not implemented in any browser.
  • The site-specific modification that Opera added to enable the old rich text editor does not work with the new editor. We’re investigating adding official support for the new editor under Opera 9.5.
  • All images uploaded through the new editor will go to Picasa Web Albums, even for FTP blogs. Images will not get uploaded to your blog’s FTP server.
  • Image upload will not work for accounts that have not accepted the image upload Terms of Service. Upload an image through the old post editor to get the opportunity to view and accept the ToS.
  • Internet Explorer 5.5 is no longer supported.
We hope that the above issues and missing features will not prevent you from at least giving the new post editor a try.



This editor will, when it’s ready, replace the current post editors across all of Blogger. Therefore, we really appreciate your feedback and especially reports of bugs and other strange behavior that you find. We’d like to address them all now so that things will go smoothly when we turn the new editor on for everybody.

Import and Export

Today’s release brings another long-desired feature to Blogger: Import and Export of blogs. Now you can export all of your posts and comments into a single, Atom-formatted XML file for easy backup. You can then import the posts back into Blogger, either into an existing blog or into a new one.

To export your blog, log in to http://draft.blogger.com/ and go to the Settings > Basic page. You’ll see the Blog Tools links at the top of the page for importing and exporting. (We also moved blog deletion up here from the bottom of the page. Don’t worry about accidentally clicking it, though; your blog wouldn’t be deleted until you confirmed on the next page.)

Once you click “Export blog” and press the “Export” button on the next page, your browser will prompt you to save the XML file for your blog. Keep it somewhere safe as a backup, or import it into a different blog. You can import one blog into another from the Blog Tools links, or when creating a new blog. Look for the “Advanced Options” at the bottom of the page.

When you import a blog, all of the posts will get saved in an “imported” state. From there you can publish just a few, or all of them at once. Here are some ideas for what you can do with importing and exporting:
  • Merge two or more blogs into one. Take the exported posts and comments from one blog and import them into another one.
  • Move individual posts from blog to blog. After importing, select just a set of posts to publish and publish them with one click.
  • Back up your blog to your own storage. You can keep your words safe and under your control in case anything happens to your blog, or us, or if you want to remove them from the Internet.
  • Move your blog somewhere else. Our export format is standard Atom XML. We hope to see other blogging providers extend their Atom support to include import and export. And, if you decide to come back to Blogger, importing your export file will get you back up and running in seconds.
Caveats
  • The export format currently only covers blog posts and comments to those posts, not blog settings or templates. To back up a Classic template, copy and paste the template code from the editor. To back up a Layouts template, use the Backup / Restore template option to download a copy of your template.
  • Before importing a blog for the first time, we recommend that you create a new, throwaway blog to import into so you get a sense for how the process works. Once you’re comfortable, import into your public blog.
  • At the moment there is a 1MB size limit on the blog you can import. This is a bug that we are correcting the issue.
Have you imported or exported your blog? Let us know about how it went in the comments.

Embedded Comment Form

One of the most common complaints about Blogger’s comment form is that it’s on a separate page from the post, styled in a way that doesn’t match the blog. Our new embedded comment form addresses that by putting the comment form where your readers expect it: at the bottom of the post.



To turn on the embedded comment form, log in to http://draft.blogger.com/ and go to Settings > Comments for your blog. You’ll see that the “Show comments in a popup window?” setting has been replaced with the new “Comment Form Placement” setting. Just click “Embedded below post,” save your settings, and go check out a post to see your new comment form.

Additional Features

  • The comment form works with Google Accounts, OpenID authentication, name / URL, and anonymous identities. As with the current comment form, we’ve set up shortcuts for a handful of common OpenID providers.
  • Once you log in with a Google Account for one blog, you won’t have to log in to comment on other blogs during your browser session. Nevertheless, to protect your privacy, we use an <iframe> to keep your logged-in identity inaccessible to the blog itself.
  • If you have a “Comment Form Message” set up, we put it on the post page above the comment form.
  • If you require word verification for commenting on your blog, we’ll show the word verification form in a small dialog after you click “Post Comment.”
  • Update, 6/27: The embedded comment form works with Classic templates. The <$BlogItemCreate$> tag will add the right HTML to your page.

Caveats

  • If you’ve edited your template for the blog widget, you won’t automatically pick up the new code for the comment form. You’ll need to either reset the template by deleting the contents of the <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> element (backup your template first!) or copy the code from an unmodified blog. Update, 6/27: Amanda from Blogger Buster has written a howto post for updating a modified blog widget template
  • The font color of the comment form is currently hard-coded to black. If your template has a dark background, this may make the “Comment As:” label hard to read.
  • The embedded comment form currently does not support subscribing to follow-up comments via email, nor does it have a preview button.
How’s it working for you? Anything else you’d like to see? Does the comment form look particularly good or bad in your template?



Let us know in the comments, now with convenient embedded comment form technology.