Tuesday, July 03, 2007

EDIT HTML mode. If only Blogger don't go mess up the formatting

Reason for this post

I wanted to edit something because I referred someone to the post Changing the settings (click BACK button to get back to this page). I almost always prepare my posts using the EDIT HTML mode as to me, it is easier and preferable. When I first prepare the post, it is usually nicely formatted - sections like this one, and paragraphs separated by empty space so you can quite easily go to the section or paragraph where you need to do the editing. I will put what I typed for this post into a scroll box below so that you can see what I mean. Now when I go to edit the post Changing the settings (click BACK button to get back to this page), this is what I see:

When you start a blog, various settings have already been set for you, and if you are happy with the default settings, you can continue to blog without bothering with the settings. I would advise changing some settings, so in this tutorial, we will learn about what settings are available and what and how to change them.<br/><br/><h2>Basic Settings</h2>When you are in a blog creating or editing post or template mode, you will see these tabs and sub-tabs at the top left of the page:<br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sEyw6txVACs/RZEKBFobBJI/AAAAAAAAAEI/4OhQ2EHIq_Y/s1600-h/Blogger+Settings.jpg"><img src="http://3.bp.blogspot.com/_sEyw6txVACs/RZEKBFobBJI/AAAAAAAAAEI/4OhQ2EHIq_Y/s400/Blogger+Settings.jpg" border="0" alt="New Blogger tabs and sub-tabs" id="BLOGGER_PHOTO_ID_5012798874047939730" /></a><br/>If you want to change any of the default settings, you click on the SETTINGS tab and by default, you will be in the BASIC sub-tab. In this sub-tab page, you can change your blog title (this will not change your blog's URL), write or edit the description of your blog that will appear in the Header of the blog, choose whether to add your blog to Blogger listings (default is "yes". It is best to leave it as "yes" unless you want privacy), choose whether to show quick editing icon <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_sEyw6txVACs/RZEL71obBKI/AAAAAAAAAEQ/xRaU81OtKVo/s1600-h/quick+editing+icon.jpg"><img src="http://2.bp.blogspot.com/_sEyw6txVACs/RZEL71obBKI/AAAAAAAAAEQ/xRaU81OtKVo/s400/quick+editing+icon.jpg" border="0" alt="New Blogger quick editing icon" id="BLOGGER_PHOTO_ID_5012800982876882082" /></a> at the bottom of your posts when you are logged into Blogger. Default is "yes" and this will enable you to edit the post when viewing the post with just one click. This is a great convenience and I would advise to leave it as "yes". You also have a choice of whether to show email post icon <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sEyw6txVACs/RZEN0FobBLI/AAAAAAAAAEY/SBUr84zgcGo/s1600-h/blogger+email+post+icon.jpg"><img src="http://3.bp.blogspot.com/_sEyw6txVACs/RZEN0FobBLI/AAAAAAAAAEY/SBUr84zgcGo/s400/blogger+email+post+icon.jpg" border="0" alt="New Blogger email post icon" id="BLOGGER_PHOTO_ID_5012803048756151474" /></a> which will enable your visitors to click and email that post to their friends. The default is "no". Some say that showing this icon will help your blog become better known as visitors email the post to their friends. If you are of the same opinion, you can elect to enable this by selecting "yes". Others may not want that option, preferring that people read their post on their blog instead, in which case they will set it to "no" (default).<br/><br/>All the above settings apply only to the particular blog you are on. The last setting is a global setting, that is, it will apply to all blogs in your account. That setting is whether to enable COMPOSE mode for all your blogs. If you select "yes" you will see these <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sEyw6txVACs/RZEPuFobBMI/AAAAAAAAAEg/E9-lI1DRsNk/s1600-h/Blogger+edit+html+and+compose+tabs.jpg"><img src="http://3.bp.blogspot.com/_sEyw6txVACs/RZEPuFobBMI/AAAAAAAAAEg/E9-lI1DRsNk/s400/Blogger+edit+html+and+compose+tabs.jpg" border="0" alt="New Blogger Edit HTML and Compose tabs" id="BLOGGER_PHOTO_ID_5012805144700191938" /></a> tabs at the top right-hand corner of the template editor. The COMPOSE mode is what is often referred to as WYSIWYG (what you see is what your get) mode, and in this mode, as you prepare your post, you will see the post as it will appear on the Web including photos displayed as photos rather as HTML. I personally prefer EDIT HTML mode, but if you are not familiar with HTML mode, by all means chose the COMPOSE mode. But I would encourage you to learn some HTML because that can help you in your blogging task. A good place to learn is <a href="http://w3schools.com/" target="new">W3schools</a>.<br/><br/>Some people post a lot of codes for special characters (like me) on their post, and for them, if they are not careful and switch to the COMPOSE mode, they will get their codes for special HTML characters converted to HTML tags and they will have to redo their post all over again to get it to display as how they want it. (If you don't understand what I am saying, it is OK because only very few bloggers will be concerned regarding this matter). For most people, it is best to enable COMPOSE mode especially if they are not familiar with HTML.<br/><br/><h2>Publishing Settings</h2>If you click on the "Publishing" sub-tab, you will be able to change the URL (If you are not familiar with URL, refer to this post <a href="http://dummies-guide-to-google-blogger.blogspot.com/2006/12/what-is-url-and-how-do-i-get-it.html">What is an URL and how do I get it?</a> (click "BACK" button to return to this page)) of your blog if you wish (subject to availability) and also choose whether to ping Weblog whenever you publish a new post to let Weblog knows the blog has been updated. The default is "yes". It probably is best to leave the<br/>default "yes", then whenever you publish a new post, go to <a href="http://pingoat.com/" target="_blank">Pingoat</a> (close new window/tab to get back to this page) to ping all the services that keep track of blogs except Weblog. More about pinging later.<br/><br/><h2>Formattings</h2>There are a lot of settings to be set in this sub-tab. The first is to choose the number of posts you want displayed on the main (home or index) page according to the actual number of posts or the number of post in a specified number of days. The default is 7 posts displayed on the main page. You can change it to whatever you want, but if number of posts in a specified number of days is chosen, a maximum of 99 posts will be imposed. See screenshot:<br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_sEyw6txVACs/RZEY7VobBNI/AAAAAAAAAE4/7Ta4IzmHCws/s1600-h/Blogger+display+no+of+post+on+main+page.jpg"><img src="http://4.bp.blogspot.com/_sEyw6txVACs/RZEY7VobBNI/AAAAAAAAAE4/7Ta4IzmHCws/s400/Blogger+display+no+of+post+on+main+page.jpg" border="0" alt="Blogger display no of posts to be displayed on the main page option" id="BLOGGER_PHOTO_ID_5012815267938108626" /></a><br/>Here you will also choose the Date Header Format (the way the Date Header of your post is displayed),<br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sEyw6txVACs/RZEgbFobBOI/AAAAAAAAAFE/FUblcaVQd6A/s1600-h/blogger+date+header+format.jpg"><img src="http://3.bp.blogspot.com/_sEyw6txVACs/RZEgbFobBOI/AAAAAAAAAFE/FUblcaVQd6A/s400/blogger+date+header+format.jpg" border="0" alt="Blogger date header format" id="BLOGGER_PHOTO_ID_5012823509980349666" /></a><br/>the Archive Index Date Format<br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sEyw6txVACs/RZEjdFobBRI/AAAAAAAAAFc/7SBZ6IeddkQ/s1600-h/Blogger+Archive+Index+Date+Format.jpg"><img src="http://3.bp.blogspot.com/_sEyw6txVACs/RZEjdFobBRI/AAAAAAAAAFc/7SBZ6IeddkQ/s400/Blogger+Archive+Index+Date+Format.jpg" border="0" alt="Blogger Archive Index Date Format" id="BLOGGER_PHOTO_ID_5012826842874971410" /></a><br/>and the Timestamp Format<br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_sEyw6txVACs/RZEh2VobBQI/AAAAAAAAAFU/_yYwgRdbfM0/s1600-h/Blogger+timestamp+format.jpg"><img src="http://4.bp.blogspot.com/_sEyw6txVACs/RZEh2VobBQI/AAAAAAAAAFU/_yYwgRdbfM0/s400/Blogger+timestamp+format.jpg" border="0" alt="Blogger timestamp format" id="BLOGGER_PHOTO_ID_5012825077643412738" /></a><br/><br/>You can also choose the Time Zone and the language your blog will be in. Other choices are whether to enable line breaks. If set to no, even when you press the Enter key in the post editor to start a new line, the next line will be displayed on the same line as the one above. So if you select "no", all your paragraphs will be squashed into one long paragraph. You should leave it as the default "yes". <br/><br/>You also chose whether to display the title Field or not. If set to "no" the title of your post will be the first line of your post. You should leave it as the default "yes" in which case, above the post editor will be displayed a box for you to type in the title of your post.<br/><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_sEyw6txVACs/RZElyFobBSI/AAAAAAAAAFk/XN-JiYcfNaM/s1600-h/Blogger+show+title+field.jpg"><img src="http://3.bp.blogspot.com/_sEyw6txVACs/RZElyFobBSI/AAAAAAAAAFk/XN-JiYcfNaM/s400/Blogger+show+title+field.jpg" border="0" alt="Blogger show title field" id="BLOGGER_PHOTO_ID_5012829402675479842" /></a><br/><br/>There will be a choice of whether to show link field or not. If you select yes, a box for the link field will be displayed as shown in the screenshot above, and you can enter the URL of the site that is connected to your post. You may also leave it blank.<br/><br/>You will also select whether to Enable float alignment or not. You should leave it as "yes" unless you are having problems with post layout.<br/><br/>Finally at the bottom there is a Post Template box. Anything you enter into the Post Template box will always appear in the post editor window whenever you create a new post.<br/><br/><h2>Comments</h2>In this sub-tab, you wil be given a choice of whether to show or hide comments (default is "show"), select who can comment - only registered Users (those who have a Blogger account), Anyone (anonymous) or only members of this blog (those you have invited to become an author and have accepted). Default is "only registered users". You can set this by clicking on SETTINGS > COMMENT, then in the "Who can comment?" section, use the drop-down menu to select your choice:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_sEyw6txVACs/RonAnIDQyiI/AAAAAAAAAmk/fI9w0Y1X00o/s1600-h/setting+comment.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://4.bp.blogspot.com/_sEyw6txVACs/RonAnIDQyiI/AAAAAAAAAmk/fI9w0Y1X00o/s400/setting+comment.jpg" border="0" alt="Blogger Settings: Comment"id="BLOGGER_PHOTO_ID_5082805432872913442" /></a><br/>You can also choose whether new post have comments enabled or not, to show or hide backlinks (sites which have linked to your post), whether new post have backlinks, the Comments Timestamp Format, whether to show the comments in a pop-up window.<br/><br/>You can choose whether to enable comment moderation or not. If you enable comment moderation, a box will appear for you to enter the email address to which notification of new comments for you to publish or reject. If you leave this blank, the only way for you to moderate the comment is via the sub-tab <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_sEyw6txVACs/RZEr81obBTI/AAAAAAAAAGA/KlzMQSJorhQ/s1600-h/blogger+moderate+comment.jpg"><img src="http://2.bp.blogspot.com/_sEyw6txVACs/RZEr81obBTI/AAAAAAAAAGA/KlzMQSJorhQ/s400/blogger+moderate+comment.jpg" border="0" alt="Blogger moderate comment" id="BLOGGER_PHOTO_ID_5012836184428840242" /></a>. This will not be good because unlike moderating via email notification, you will not know which post the comment was made, and will make it difficult to respond if you choose to.<br/><br/>There is also of whether to enable word verification or not. This is to control comment spam, so that only human who enter the text they see in a graphic correctly will get their comment posted. It is good to enable word verification to cut down spam comments, but if you have chosen comment moderation, you may choose to disable this to make it easier for your visitors to make comments.<br/><br/>There will be a choice of whether to display the profile photo of commentators in the comments. The default is "yes".<br/><br/>Finally, there is a box for you to enter an email address for all comments to be sent to. This is useful if you want a backup of your blog comment by creating an email address specifically to receive new comments. You may also choose to leave it blank.<br/><br/><h2>Archiving</h2>In this sub-tab, you can set the archiving to monthly, weekly, daily, or even no archiving at all. Then there is an important setting of whether to enable post pages or not. The highly recommended choice (the default) is "yes", in which case each post will have their individual post page URL (permalink). <br/><br/><h2>Sitefeed</h2>This sub-tab will give you the choice of having your sitefeed in full or short. If "full" is selected, then those who subscribe to the feed will receive your post in full. Some people prefer to set it to "short" in which case subscriber to the feed will only be given part of the post, and to read the rest of the post, they will have to visit your site.<br/><br/>There is also a window for you to type the feed footer (what appears at the bottom of the feed. For the few AdSense account holder who have the AdSense for Feeds or other third-party feed additions, they can paste their code in that window. For this to work, you must have enabled individual post page and set your sitefeed to "full".<br/><br/><h2>eMail</h2>In this sub-tab, you can enter a BlogSend Address (an email address to which new posts are emailed to whenever you publish a new post. This can serve as a backup of your blog as you will then have a full record of all your posts in that email Inbox. If you want to blog via email, you can also enter a secret email address to send your post by email without having to log into your Blogger account. This feature is useful if you plan to post-date your posts for them to be published in the future. See post <a href="http://blogger-tricks.blogspot.com/2006/08/how-to-prepare-post-to-be-published-in.html" target="_blank">How to prepare post to be published in the future</a> (close new window/tab to return to this page).<br/><br/><h2>Permissions</h2>This is the final sub-tab, and in this, you can set the blog to let anyone (default), only certain people you choose, or only the authors of the blog to be able to view your blog. However, if you choose to limit the blogs to certain people, they first have to log in to be able to view your blog.<br/><br/>You can also invite people to become co-authors of your blog by providing the email addresses of those people you want to invite. If they accept the invitation, they will then be able to publish posts on your blogs. They wouldn't be able to change any settings or template unless you make them administrators of the blog.

The empty lines that are present when I first prepare the post are replaced by <br /><br /> and all the sections and paragraghs are jumbled up into a huge paragraph, making finding things very difficult. And worst, if I want to get around the problem and switched to COMPOSE mode the code special code to display HTML imgage tag I use to display HTML tags like <img>, for example get changed to the actual HTML tags, which means they don't get displayed, and I will have to edit the post all over again.

Here is the scrollbox containing what is initially typed in the post editor window when in the EDIT HTML mode as I promised above to put, but this post content is very long because of what I put in the scroll box above, so I will replace it with an example:

<h3>This is section 1</h3>This is paragraph 1 of section 1.

This is paragraph 2 of section 1.

This is paragraph 3 of section 1.

<h3>This is section 2</h3>This is paragraph 1 of section 2.

This is paragraph 2 of section 2.

This is paragraph 3 of section 2.

<h3>This is section 3</h3>This is paragraph 1 of section 3.

This is paragraph 2 of section 3.

This is paragraph 3 of section 3.

I will publish this post, and if I remember, I will edit that post to see if Blogger did what I descibed above, and if it did, I will update this post with a scroll box containing what Blogger has replaced the above with.

Update 4 July 2007: The above test post was published at Peter's Private Blog. Opened up the post editor window for that post and the formatting had not been changed. I really don't know when and/or under what circumstances will Blogger mess up your post formatting in the post editor window.


HopeAbounds4Me said...

This post was very helpul. Thanks so much for your hard work. I am new to this and only know basic html. I'm trying to learn though. I'd really like to add the scrollbar to my posts as you have done. If you have time could you let me know how you did it?

Peter Chen said...

Refer to Make scroll bar. The first method result in a large gap between the top of the scroll box and stuff you put in the box. However there is a second method which don't give this problem and I may have added an update or posted a link to a new post. If it is not there, comment in the post and I will see what I can do.

Peter (Blog*Star 2006 and 2007)
Dummies Guide to Google Blogger
"online book" in progress