Saturday, December 30, 2006

Publishing or editing a post in the COMPOSE mode

The previous tutorial deals with publishing a post in the Edit HTML mode. Here, we will discuss publishing or editing a post in the COMPOSE mode. For this, you will have to click the COMPOSE tab new Blogger Edit HTML/COMPOSE tabs at the top right corner of your post editor. The COMPOSE mode is also referred to as WYSIWYG (What you see is what you get) editor, and rather than showing the HTML for the various HTML elements, you will see the post in the post editor window as it will appear on the Web.

My personal preference is to use the Edit HTML mode for preparing my posts, and to get a view of how it will display on the Web, I click the post editor preview link link at the top right-hand corner of the post editor, just below the Edit HTML and COMPOSE tabs. Then to resume editing, click the Blogger post editor hide preview link link. The reason I do this is because it gives me better control over how my post will display and also, in the COMPOSE mode, a lot of formatting tags are added, which, when I change to Edit HTML mode to do something, I will see a lot of formatting tags which the program puts in for me which makes editing the post very hard for me. In the Edit HTML mode, I can also add Headings for sections of my post by using the <h2> and <h2> tags. In the COMPOSE mode, I will have to switch to Edit HTML mode to do that. Anyway, if you don't want to have to deal with HTML, you may stick with this option. However, I strongly encourage you to learn some HTML and CSS (Cascading Style Sheet). A very good place to learn that is Learn HTML and CSS tutorial

Post Editor Toolbar in the COMPOSE mode

In the COMPOSE mode, you will get a more elaborate toolbar:
new Blogger COMPOSE toolbar
The first tool you get in the toolbar is a drop-down menu to select the font. For example, I want this sentence to be in Arial, I will have to highlight the sentence and choose Arial (the first tool) in the drop-down menu. The following sentence should also be in Arial. If I want back the Times font, I choose Times in the drop down menu, and the sentence will be back to Times, like the rest of the post. You will have 9 choices of fonts - Arial, Courier, Georgia, Lucida Grande, Times, Trebuchet, Verdana and Webbings. Alternatively, you can select your font and font size right from the beginning and the whole of your post will be in that font and font size.

I may also highlight this text and select Huge from the second drop-down menu for font size. You have 5 choices here - Huge, large, normal size, small and tiny. You may also make this word red or any color you like by highlighting the word, clicking the text color tool icon and selecting red from the palette.

Text alignment options

In the COMPOSE mode, you also have the choices of whether you want your text to be left-aligned (justified) , center-aligned , right-aligned and left and right aligned (both side justified) .

Numbered list and Bulleted list

You may also easily create numbered list or unnumbered list in the COMPOSE mode. For example, this list that I type here:


All I have to do is to highlight the list, like this:
Highlighting list to make it into numbered list
then click the numbered list tool iconBlogger post editor tool icon for numbered list and the list will become a numbered list as shown below:

  1. Apple
  2. Orange
  3. Pear
  4. Watermelon
Finally there is an option for removing the formatting you have done by using the tool icons by selecting (highlighting) the relevant section and clicking the "Remove formatting from selection" tool icon Blogger post editor tool icon for removing formatting from selection


Becky said...

I am trying to figure out how to edit my pictures within a post so that I can have them in a row as opposed to one on top of another. I want them side by side. Is this possible?

Peter Chen said...

Hi Becky,

No problem. But you must be in the EDIT HTML mode. That is why I always encourage my readers to learn at least a bit of HTML. They don't need to be an expert. Even a bit of knowledge can go a long way.

Refer to Display picture side-by-side. If you want 3 pictures in a row, that is also possible if you understand the HTML for table (not difficult). Any further problem, comment in the post.

Peter (Blog*Star 2006 and 2007)
Testing Blogger Beta (now New Blogger)

Becky said...

Thank you....I am going to play around with it and see what I can do. I appreciate your response.

Peter Chen said...

Hi Becky,

See if this post HTML for table can make your task of understanding easier?

Peter (Blog*Star 2006 and 2007)
Blogger Tips and Tricks

ColorMasterBlaster said...

Mr. Chen
I am beginner blogger. can i publish blog without html until a bit more knowledgable and can photos be placed side-by-side in in compose?

Peter Chen said...

Hi ColorMasterBlaster.

If you don't want to learn HTML, and you want to place photo side by side, if you don't know Irfanview (very good and free. I use it extensivly) or other photo editor program that can do thumbnails, then you will have to learn that. Not too difficult. See Irfanview for creating thumbnails. Then all you have to do is to upload them as an image using the photo upload icon. But I highly encourage you to learn HTML. I think as you read the posts in my blogs, you will pick up enough HTML for blogging.

Peter (Blog*Star)
Blogger Tips and Tricks

Lynn said...

Hi Peter, I'm really hoping you can help! I just can't seem to find the post editor toolbar when I'm creating a new post, OR the compose tab on the top right hand corner, and so I can't see the upload picture icon. I've seen it in the past (a few days ago when I uploaded some pics) but it seems to have disappeared. What am I doing wrong??!!

Peter said...

Hi Lynn,

I have experienced that before and solved the problem by using another web browser. This is one of the many reasons why I use many web browsers. In fact, I vaguely remembered it was FireFox that solved the problem. However, this is not saying FireFox will solve your problem. I am saying switching to a different browser MAY help. It did in many situations but it is not a cure all. I have,
Internet Explorer,
FireFox with Google toolbar,
Flock social web browser
Safari for Windows

Peter Blog*Star
Blogger FAQ (Frequently Asked Questions_
(Blogger FAQ in progress. More will be added as I have the time)

About me..... said...

I'm trying to figure out how to decrease the size of the font on the sidebar....not of my actual post. In "layout" there is a text size mode but that only changes the post....

Peter said...

I haven't tested this but create a test blog with the same template and try this:

Look for

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;

and add to the above

font-size: 80%;

and thus change it to

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
font-size: 80%

You may add actual font size instead if you wish, eg:

font-size: 8px;

If you do test this out, will appreciate feedback as to whether it was successful or not.

ZMAN said...

I'm a complete newby. I published a post, it said I was successful.

The blog is at:

How come I can't see my original post? How do I let others know where the blog is? Am I hopeless?

Peter said...

The long URL you left in your post is not the URL of your post but the URL of the Blogger post editor or something and no one other than you when you are logged in can see what is there.

Now you said you published a post. Did you save it as draft instead? Also, is Canterwood Country Club your blog? Next time you leave a comment you should make it an active hyperlink" like the 2 I made. I will later have to delete your comment because the long unclickable URL you left can become a long unbroken line and can cause problems

Prabanchamohini said...

Very interesting. Really useful. Doing a great job. congrats. I have a doubt. When I started my blog, I have to started composing in a different language other than English. But I found that it is unsuitable. But howsoever I try the compose language remains to be the other language than English. So that I am not able to post any entry.What to do? How to rectify? Will you please be king enough to advise?

Peter @ Enviroman said...

I have not compose any post with language other than English so have no experience to advice you. Sorry

BodyCrafts said...

I can't see my compose toolbar at all. What shall I do?? Please help.. Thank u.

Peter @ Enviroman said...

See if the following posts are relevant to your problem:

Missing tool icons, shorter toolbars
Missing toolbar, unusable post editor (Singtel)
What to do when you can't publish, upload photos etc

Alesia said...

I love the new editor, but I find it really irksome when I tried to copy my work from word (for backup reasons) to blogger and even though in the compose mode it looks ok (alignment, font, pic etc) but when I clicked on the preview, everything just look so disorganized. Even the fonts are different. And i kept having this error message meta content="text/html; charset=utf-8" http-equiv="Content-Type" each time I tried to post. Even though I've ignored it and still post, it's not like how i wanted it to be.

Please please help me on this.

Many thanks

Peter @ Enviroman said...

We are always wary about direct copy-paste from WORD because word introduces a lot of invisible formatting tags which can cause havoc in your displayed post. It is better to copy-paste from WORD to Notepad then copy-paste from Notepad to the post editor to strip off all the formatting tags.

stephorchestra said...

& if couldnt get inside post edit

Peter @ Enviroman said...

For problems like this the I would first try using a different browser (others prefer to clear cache and cookies which have about the same effect).