3.21.2010

How to edit HTML in Blogger

Dionna of Code Name: Mama and I are writing a few blogging tutorials of particular use for our Carnival of Natural Parenting participants. This one will help in pasting the Carnival code blurbs!

Here's a little tutorial on how to edit HTML in Blogger when you're creating or editing a post. This is useful if you want to:

  • add HTML code to a post,
  • edit specific HTML code,
  • or copy your post's HTML to use elsewhere.


If you're used to creating your posts in the Compose mode in Blogger, you're used to a WYSIWYG (what you see is what you get) experience, and you don't need to know HTML — Blogger automatically codes everything for you.

But it's easy to switch to HTML view if you need to.

(Click on the images to see them larger.)


Compose tab in Blogger for New Post


Check the tabs at the top of your post box. If you're in Compose mode (you can tell if it's in the darker tan and not underlined), whatever you type will be formatted as if you're typing into a word processor. You can add formatting like bold and italic, insert images and videos, format alignments and lists, and perform tasks like spell check.

But if you need to see or edit the HTML, click on the underlined "Edit HTML" to switch tabs.


Edit HTML tab in Blogger for New Post


In Edit HTML mode, you can view the HTML code. If you know how to edit HTML, go for it! If you don't but have an HTML blurb you want to paste in, just search for the location you want it to go and paste it in. To make sure it all looks the way you want, either switch back to Compose mode or click on Preview.


Preview mode in Blogger for New Post


Preview will give you a glimpse of what the code will look like in the finished post.

You can see it looks basically the same as in Compose mode. If you have a standard template, though, Preview is actually more helpful than Compose for getting a sense of what your post will look like, because the box will be constrained to your template's width and it will use your template's default font. That way it's easier to make sure images are where you want them, for instance. You can click Preview from either Edit HTML or Compose.

Hope that helps! Leave a comment if you have any further questions and I'll try to make things clearer.

For more information, check out Blogger Help's overview of the post editor.
Related Posts Plugin for WordPress, Blogger...