Thursday, December 28, 2006

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):

Blogger Dashboard, Adding new post

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):

Blogger Post Editor Window
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):

Blogger Post List

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="http://2.bp.blogspot.com/_sEyw6txVACs/RZMTsVobBUI/AAAAAAAAAGM/iOmLrB5_fPA/s1600-h/blogger+new+post.JPG"><img src="http://2.bp.blogspot.com/_sEyw6txVACs/RZMTsVobBUI/AAAAAAAAAGM/iOmLrB5_fPA/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.

new Blogger Post Option

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:
Blogger Post Editor toolbar
With this toolbar, you can make words or phrases bold by highlighting the words/phrases, then clicking Post editor icon for bold tool, or italic by clicking on post editor tool icon for italic 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 Blogger post editor 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 post editor toolbar hyperlink icon

Blogger built-in spell checker

You can also do spell check for your post by clicking the Blogger post editor spell check icon 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 spell check resume editing link 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 Blogger post editor photo upload tool icon tool icon. To upload a picture, you click on the photo upload icon, and a pop-up window will appear:
Blogger image upload pop-up window
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 Post editor Save as /draft button 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 Blogger post editor preview link link at the top right hand corner of the post editor. If satisfied, then you can publish it to the Web by click the Blogger post editor publish button 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).

9 comments:

dana said...

Hi there. I am having trouble displaying than one post on my blog - its only showing the current post. I'd like to show the last 3 - 5 so people can scroll down.

Also, I cannot get it to dispay the comments right after the post - right now one has to click on the posts link. Everywhere i could find, I have enable comments and shown comments.

do you have any suggestions on either of these?

Thanks.

my blog is www.newleafdesign.blogspot.com

Peter Chen said...

Hi Dana,

You said you have done everything to enable/show comments, but there is one that many people missed, that is "Edit Post". I will update my post Changing New Blogger Settings. You may have already done that, and if so, the only thing I can think of that you can try is to post your problem to Google Blogger Help group and pray that Blogger Employee notice your thread and/or try to contact Contact Blogger Support. See also Problem in signing in, seeing your blog in the Dashboard, etc..

A fairly drastic thing I might do if I am faced with such problem is to backup the current template PLUS the Page Elements and upload a fresh (which may be the same or different template). See Backup your New Blogger template and change to a new template. If it didn't help, just revert back to your backed up template. (this may involve putting back some Page Elements).

Peter (Blog*Star)
How you can help Blogger Tips and Tricks
(no one should feel obligated. Everthing completely voluntary)

dana said...

thanks a million for responding. i checked the edit post option and think i have that set properly. so off i go to google blogger help.

it may be something with the template....but i think i will try help first. :-)

dana said...

p.s. i did figure out the post issue. yeah!

Angeline said...

dear Peter. I am writing again. I need alittle help. I can't login without a flashing signal coming on from the blogger page. it just starts flashing repeatedly at me.

I fail to log on this way...normal way.
it also seems that mysite does not close down at all when i try to sign out this also does not work. Is there any explanations?

I have had alot of troubles recently with blogspot.
I am www.angeldustireland.blogspot.com, your help would be apreciated. Angeline

Mkt swimmer said...

Can I use FTP to upload a customized sub web page?

For instance, I created a button on my main page, when I click this button, I want it to bring up a new page which is not limited by the template functions, for example, I want to create a page full of pictures, or a listed favorite links.

Anyway, can I combine the template features with some simple HTML pages, mix/link them together?

I need to know where my home directory is, I need to create some sub dir to hold buttons and pictures, etc.

I am afraid Blog.com would allow me to do such thing.

Appreciate for your answer.

Marketswimmer

Peter Chen said...

Hi mkt swimmer,

I am afraid I have used blogspot.com for all my blogs and have no wish to use custom domain and especialling hosting my own blog and publishing via FTP. Reasons I think are stated in New Blogger custom domain.

Peter (Blog*Star)
Testing Blogger Beta (now New Blogger)

生意缘起人 said...

Hi Senior,

Wish to have your expertise support. Each of my blog are showing full article at the main page. How to make it shorter? Thank you.

Peter said...

Hi Junior,

What you need is expandable post summary

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