Dashboard
Now that you have created a Blogger account and started a blog or blogs, we will go through how to publish a post. When you first sign into the Dashboard, you will see this screen with a list of blogs you have published (screenshot below. Click on screenshot to enlarge):
Of course, if you have created only one blog, you will see only 1 section.
Post Editor Window
On the section of the blog you want to create a new post, just click "New Post" (circled in red) and a post editor window will appear (See screenshot below. The title field and the post editor window will be empty in your case. The screenshot you see below is the screenshot of the post editor while I am preparing this post):
Post Editor WindowIf, on the other hand you have already made posts, and you will like to edit a post, click manage "Post" (also circled in red) in the first screenshot above. The list of posts you have made will appear (See screenshot below. Click to enlarge):
Click "EDIT" (circled in red) and the post editor window will open (see second screenshot above).
If you have just started the post, type in the title of the post and begin typing your post. Note that in the screenshot of the post editor window I showed above, in the top right-hand of the window, you will see that I am in the EDIT HTML mode, which is my preferred mode. Note that beside that tab, there is a COMPOSE (WYSIWYG) tab, and if you click on this tab, you will see the post as it will be displayed on the Web. You will see the screenshot I have uploaded instead of this HTML code for the first screenshot above. I post below the HTML for the screenshot below:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjERIVuE24ZtiSymBu-MBCiZ_vfznaUdzsbqe-zxfCgGSEWZGRhyTjI3-OvxNVqMyJz059xYTONORvyOAGfAGWhdS0epltrE8Q5dBdoSUYn3ajKrmZa4L4q5SCwBpBx5GSyMWIrJMsgR_Q/s1600-h/blogger+new+post.JPG"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjERIVuE24ZtiSymBu-MBCiZ_vfznaUdzsbqe-zxfCgGSEWZGRhyTjI3-OvxNVqMyJz059xYTONORvyOAGfAGWhdS0epltrE8Q5dBdoSUYn3ajKrmZa4L4q5SCwBpBx5GSyMWIrJMsgR_Q/s400/blogger+new+post.JPG" border="0" alt="Blogger Dashboard, Adding new post" id="BLOGGER_PHOTO_ID_5013372462635353410" /></a>
I greatly encourage you to learn a bit of HTML although you can get away without knowing it with the new Blogger. I hope the HTML I showed above will not discourage you as if you know a bit of HTML, you at the very least will be able to recognise or modify a HTML code when you see it even if you didn't write it, and you can use that bit of knowledge so that when you come across it, you know what it is, and how to manipulate it.
A simple example: Blogger placed all images uploaded via their photo upload icon at the very top of the page, which is likely not to be where you want it. In the COMPOSE mode, you drag and drop the visible image to where you want it. I find this cumbersome, especially if the post is a long one, and I have to do successive drag-and-drops to get it where I want it to be. If you can recognise the HTML for the image in the EDIT HTML mode, all I need to do is to cut and paste. Further, search engines cannot read images. Blogger places an alt="" attribute for you to fill in the description of the image between the quotation marks so that search engine understand what the image is all about and further, if for any reasons the photo cannot be displayed, that description appear in its place. (If you do, make sure is INSERT mode is on, otherwise you will be writing over the HTML code).
A good place to learn HTML online will be
W3schools HTML tutorials (close new window/tab to return to this page). There are examples there which are very easy to follow and you even have the chance to practice in one window while you watch the result in the window next to it. If you don't want to learn HTML it is OK also as I will be explaining some of it in this intended online book.
Note: In the list of posts (third screenshot), I have chosen to highlight one often missed feature, that is, a drop-down menu to select the number of posts you want displayed on the list of posts.
The choices range from 5, 10, 25, 50, 100 to 300. The default is 50. If you have a lot of posts, you may elect to change it to a higher number, which may mean a longer download time when you want to open your list of posts. The alternative is to leave it at the default 50, and then using the search option to find the post you want to edit.
Blogger Post Editor Post Option
In the post editor screenshot (second screenshot) I circled the Post Option in red as this is often missed by bloggers. If you click on the option, you will be able to choose whether to allow comment on that particular post or not, and if not, to show or hide existing comments. You will also be able to change the date and time of the post. I use this option to change the CONTENT page to year 2999 so that that post will always be at the top of the main (home or index) page.
In the above screenshot, you will also see a box for you to enter labels or tags (more commonly known as categories among bloggers) whereby you can categorise your post under a certain label or category. For example, I have chosen "publishing" as the label for this post, and if there are other posts connected with publishing, I will give it the same label. In this way, all similar post are grouped under a label and will help your visitors find posts of particular topics easily. You can add more than 1 label for a post by separating them with a comma. Later, I will show how to add a Label list in the sidebar for easy navigation for your visitors.
Blogger Post editor toolbar
On the top left corner of the post editor you will see the post editor toolbar:
With this toolbar, you can make words or phrases
bold by highlighting the words/phrases, then clicking
tool, or
italic by clicking on
tool. What this has done is surrounding the words bold italic with the tags
<span style="font-weight:bold;">bold</span> and
<span style="font-style: italic;">italic</span>
Blockquote
A block of quoted text should normally be preceded by some introductory text that makes it clear that a quotation follows. It should be followed by an attribution of some kind, preferably with an exact citation of the source preceded by an expression like "Source:". It is usually not adequate to rely on things like the HTML blockquote element, partly because neither visual nor aural browsers make it sufficiently clear that a quotation is given.
Since graphic browsers typically display blockquote as indented, it has become a fairly common practice to use it simply to indent text, irrespectively of whether it is quoted or not. This might be tempting, since there is no element for merely indenting text in HTML. On the other hand, HTML shouldn't be supposed to have such an element, since indentation is not structural at all; it might be used to convey some structural information, but it is very ambiguous what that might be
Source:
Writing block quotations - why the HTML blockquote element is insufficientIn the above, the indented sections of text is made by highlighting the whole block of text from "A block of quoted text should normally be preceded....." to "make it sufficiently clear that a quotation is given" and the clicking on the blockquote tool
.
The hyperlink above was made by highlighting "Writing block quotations - why the HTML blockquote element is insufficient" and then clicking the hyperlink
Blogger built-in spell checker
You can also do spell check for your post by clicking the
spell check icon in the toolbar. There will be a pause, and then the background color of the post editor window will change to blue, and what has been identified as spelling mistakes are highlighted in red. By clicking on the highlighted word, you will be given a choice of suggested correction. If it is not in the list you want, and you want to edit it, you will have to click
and the background color of the post editor window will change back to white, and the scroll bar will return to the top of the page. You will then have to hunt all over the post for the word you want to edit. Another disadvantage of this built-in spell check is that there is no provision for adding a word to the dictionary. Personally, I prefer to use
FireFox with the Google toolbar to do the spell check. You can read about it in this post:
How to do spell check for your Blogger blog.
Uploading photos
The various screenshots in this post were uploading using the
tool icon. To upload a picture, you click on the photo upload icon, and a pop-up window will appear:
You should have the picture stored in your computer, in which case you click "Choose" and select the picture from your computer you want uploaded, then make a couple of choices. If instead, you have already got the picture hosted on the Web, you can type in the URL of the picture into the field to the right. When you are ready, click "Upload image" and wait for the picture to be uploaded. A message will appear when the uploading is finished, you click the button "Done" and the image will be added to the top of your post, irrespective of where you placed your cursor.
You can learn more about uploading and manipulating images from the post
Uploading and manipulating photos with Blogger image upload tool icon (close new window/tab to return to this page).
When you want to continue at another time you can save your work by clicking
button at the bottom of the post editor window, in which case your post will be saved to Blogger's server but will not be seen on the Web. You can open the file again by clicking EDIT in the list of blogs show in the screenshot above to edit it, and when finished, you can preview the post before publishing the post by clicking the
link at the top right hand corner of the post editor. If satisfied, then you can publish it to the Web by click the
button at the bottom of the post editor.
COMPOSE MODE
If you elect to be in the COMPOSE mode, the toolbar will be different. Read the other tutorial
Publishing or editing a post in the COMPOSE mode (click "BACK" button to get back to this page).
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.
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 
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
and selecting red from the palette.
, center-aligned 
, right-aligned 
and left and right aligned (both side justified) 
.
and the list will become a numbered list as shown below:
