Publishing a Post

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 Window
If, 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 insufficient

In 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).