Sunday, February 28, 2010

Check broken links Xenu's Link Sleuth

Here is a very useful tool which I had meant to use for a long time and also had meant to tell you about it, but keep procrastinating. Well, finally here it is, the Xenu's Link Sleuth which you can download here.

Most of you probably already knows that search engines don't like dead links (Definition: A dead link (also called a broken link or dangling link) is a link on the World Wide Web that points to a web page or server that is permanently unavailable, usually 404). So if you are concerned about how search engines rank your blog, you should take the trouble to search for dead links in your blog, then correct them.

Wednesday, February 17, 2010

Web Host Rating comparison

There are now more and more businesses using blogging software as some kind of CMS (content management systems) to setup and manage their website, my son's security business for example which will be using Blogger.com. And for most cases where the requirements are not too demanding, it is sufficient. This is especially true now for Blogger.com since it has upgraded from using the old classic template to the new xml template plus teamed up with Google Apps.

Currently, that Blogger.com powered website is hosted free of charge by Blogger. Going down this route means no direct access to the web servers hosting his blog/website. But if ever he need direct access to the web servers such as for certain database operations, he will have to think of self-hosting his website which means the need to find a reliable web host at reasonable cost.

Fortunately there are websites offering web host rating making the task of selecting web host slightly easier. The more consistent the ratings, the more confidence we should have of their ratings. Below is a comparison between 2 web host rating websites:


RankWebHostRatingWebHostingGeek
1InMotion HostingInmotion
2FatCowiPage
3Just HostJustHost
4Web Hosting PadWebHostingPad
5HostClearFatCow
6IX WebhostingGreenGeeks
7BlueHostBluehost
8HostMonsterHostmonster
9AcenetGoDaddy
10GlobatYahoo

We can see that the ratings are fairly consistent. And similarly in the 2 sidebars, there are similarly links to different ratings according to different purposes or criteria such as Best Blog Hosting and Best Forum Hosting, something (forum) I am considering for this blog itself.

Why self hosted blogs and web host ratings

When you can register and use your own domain for you blog (custom domain) and Blogger can host your blog for you gratis (free), it makes me wonder why would anyone still wants to use the outdated classic Blogger template, host the blog themselves and use the more cumbersome FTP (File Transfer Protocol) to publish their posts. Hosting the blog ourselves means we have to pay monthly charges, amount of storage, worry about whether the bandwidth we purchased is sufficient, worry about the reputation of the web host, security, down time and a host of other issues.

In any case, old classic Blogger template will soon be history as Blogger is stopping support, so if you want to insist on hosting the blog yourself, you will have to migrate your blog to Wordpress.org or any of the other blogging software.

The question of why anyone would want self-hosted blogs still remains. I tried some research, but it mainly turned up posts that are way off track because they discussed pros and cons between free blogspot.com or wordpress.com blogs which are sub-domains of Blogger and Wordpress versus blogs like this (www.bloggertipsandtricks.com, no blogspot in URL) which even though uses my own domain, is hosted by Blogger.com free). One example of a post not hitting the mark is 10 Reasons to Self Host Your Own Blog.

That leaves to think up of old issues encountered in the past plus guesswork. I remembered us trying to Google sitemap for our blog. The method described is but a workaround using the RSS/Atom feed and is not a real Google sitemap. For that you need direct access to the server which we bloggers using custom domain don't have.

So the crucial item is direct access to the server which would be needed if whatever you want need you to directly control what goes on in the backroom behind the scene with your blog. Such as you need that when a visitor fills in a form and the database is altered, based on some preset conditions, some events are set into motion and displayed to the visitor.

At the moment, I am toying with the idea of creating a forum as a sub-domain of one of the blog I am helping manage and I suspect that may need to be self-hosted. If you know of any other reasons which forces self-hosting, please let us know by leaving a comment.

Very few bloggers would need that, but if you ever do, then it is time to self-host and its attending headaches. So I just wonder if this web host rating is at least a partial solution for your headaches. What caught my eyes are those Best this and Best that categories in that website, in particular, the Best Blog Host and since I am thinking of setting up a forum, the Best Forum Host. Unfortunately, I could not find any references as to why these 2 were chosen as the Best Blog Host or the Best Forum Host. I think I will shoot off an enquiary to them.

Create static Blogger Pages for Contact Form, About, privacy, etc


Definition of static page: A web page that is not modified by an application server before the page is sent to a browser. and do not employ dynamic technologies (like PHP, ASP, Perl...).

"I'm new to blogging, how do you create a contact me form on a separate page on your blog, without it showing up as a post or in the Archives."

The above question is the kick I needed to finally write this post about Static Pages which will be very useful for stuff like contact form or an About page, etc. especially if you don't want them to appear in the blog archive or irritate those who subscribe to your RSS feed with too much notifications as static pages will not be part of the normal post although the way to create these static pages is almost the same as ordinary posts.

To do this currently, you must switch to Blogger in Draft (UPDATE: According to Sean McCullough: Blogger Buzz, PAGES is no longer confined to Blogger in Draft to, and you can now create static PAGES in your standard Blogger Dashboard) and sign into your Blogger account and click on the New Post tab Blogger New Post tab to open the post editor. However, this time, you will see an extra tab in the Blogger in Draft post editor, namely Edit Pages tab Blogger Edit Pages tab and below that, a NEW PAGE tab.

Blogger new Pages tab in dashboard

Clicking NEW PAGE will open the PAGE EDITOR which looks exactly like the normal post editor except instead of POST TITLE there is a field for entering the PAGE TITLE. Prepare the static page just like you would a normal post and click publish. You would then choose get the link to the static page either in BLOG SIDEBAR or as BLOG TAB below the header or NO GADGET (link pages manually)

Blogger static pages multiple choice radio button

Click SAVE AND PUBLISH and your static page will be publish but not as normal post which will appear in the blog archive and will not trigger your RSS feed to inform your subscribers that there is a new "post".

I have chosen for this blog, NO GADGET (link pages manually) and what you will see in this blog header is the horizontal navigation bar I manually added and which currently has 3 tabs, | HOME | CONTACT | PRIVACY POLICY | of which only one CONTACT is a static page. The other 2 were created earlier as ordinary post (I may change it later).

If you want to link pages manually, refer to Creating simple text horizontal navigation bar. One advantage of using this option is that you can link to any website you choose like what I have recently done and will not be constraint to only pages create in this blog which would be the case if you choose the following 2 options.

To show you what the other 2 choices would look like, refer to the screen shots below:

static blogger pages tabs below blog Header

Blogger static pages tabs in sidebar
Static page tabs (HOME CONTACT PRIVACY) in sidebar


Now I experiment with dragging the Pages gadget from below the blog Header right into the blog Header itself, hoping to create a horizontal menu bar inside the blog Header itself, but unfortunately that is not to be, for the horizontal tabs arrangement change into a vertical one (see screen shot below). If you prefer the pages tabs created by Blogger to be within the Blog Header, you will have to use the manual method plus create a horizontal navigation bar.

Blogger static pages tabs dragged from below blog header into the header
Static Pages tabs (HOME CONTACT) changed into vertical bar of tabs


Related posts:

How to include active link to your Twitter page in navigation bar

Sunday, February 14, 2010

Tip: Editing old post and using the HTML comment tags to hide the original

A blogger asked: "if a do a post/message in blogger. And after I rewrite this post. But more later I want to replace (substirute) the rewrited post by the first original post. How can I do it?"

I assume the above implies frequent editing of old post and the possibility of reverting to the earlier/previous edition after editing. Now the problem is the previous edition would most probably have been overwritten by Blogger.com's automatic saving, so how to revert to the earlier/older edition?

Here is what I would suggest. Suppose I now want to edit an old post. What I would do will be to first copy-paste the whole original post within the same post under editing with one following the other so that there will be 2 duplicate copies of the post with duplicate below the original.

Now I would surround duplicate with a pair of the comment tag <!-- and --> like this (anything that is surrounded by the pair of comment tags will not be displayed by any browser):

Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
<--
Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
-->

Perhaps for extra measures, we may append an Version note and date, like for example, Version 1.0 14 February 2010, so it become

Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
<--
Version 1.0 14 February 2010:
Enviroman says: "We must take very good care of our 1 and only Spaceship Earth without lifeboat. Where can we go if something terrible happen to our spaceship and it become unlivable? What will we leave behind for our children, grandchildren, great grandchildren? What kind of legacy are we leaving behind?
-->

And now we can confidently edit the first duplicate and if we don't like what we did, all we have to do is to discard it and remove the pair of comment tags to make the original display.

If you don't like the above method, perhaps you can copy-paste the original post to be edited into a new post, then save the original as draft. If you don't like the new edited post, then discard it, go back to the draft and republish it.

Tuesday, February 09, 2010

Alert: Change in Twitter username and account

Hi folks,

Sorry to disturb you and if you are subscribing to this blog's feed, apologies for interrupting you, but it can't be help. If you are a subscriber, I hope you do not unsubscribe.

Reason, I need to alert readers who had followed my first Twitter username @enviroman that for blog related tweets, I have changed username to @bloggerfordummi. So if you have been following @enviroman previously and you wish to continue receiving blogs and Blogger.com related tweets, please follow @bloggerfordummi.

And of course you are free to unfollow @enviroman or continue as this Twitter account (my first Twitter account) is still active, but if I ever tweet again here, it will be for things other than blog related stuff (may change later, don't know).

Reasons for this was @enviroman was suspended for a long time and when I got tired of appealing a waiting, I started @bloggerfordummi. Not too long after that, my suspension was lifted and since I had followers, I continues to twit here on blog related matters.

However, noting that @bloggerfordummi has the words blog and Blogger and phrase "for Dummies" (incidentally Blogger for Dummies was my first blog related blog, but decided to start this Blogger Tips and Tricks because of trademark related issues ("for Dummies" is a trademark of Wiley Publishing).

However, the aim of Blogger Tips and Tricks remains the same, namely as a source of easily understood information and instructions for blog, blogging and Blogger.com related matters. The blog title of Blogger for Dummies will now be changed to Blogger for Dummies (for blog) since the trademark "for Dummies" I assume is for books, so using the same term for blog means there is no violation of their trademark "for Dummies (for book). And Blogger for Dummies (for blog) will continue to be updated but for stuff which are relatively simpler.

There are some who may be sort of offended if the read Blogger for Dummies, but to me and I hope to you, let us regard "for Dummies" as a phrase which conveys something which (no offence) indicate something anybody view himself as a dummy (no offence) can understand easily.

To me, it is no problem at all if I call myself a dummy but the person I address then proceed to give me very clear instructions or information. I fact, I am happy to call myself a dummy as long as everybody including anyone more "dummy" than me continue to educate me as I consider myself a lifelong learner.

So folks, call me a dummy if you want but please if you have anything to teach me, I beg you not to hesitate. Cheers.

Peter @ Enviroman (Blog*Star)
(think I will leave a graphic signature as well):

Peter Chen's nice graphic signature

Sunday, February 07, 2010

Simple text horizontal navigation bar


Skip to instructions if you are only interested in reading the instructions on how to do create the navigation bar. You may also be interested in How to create static pages as things like contact forms, About this blog, etc is ideally suited to using Pages and the horizontal navigation bar.

Preamble
There are 2 things that we want in designing a blog or website. One is to make it easy for visitors to find content and the other is to make full use of the portion above the fold. And both of these can be fulfilled by creating a horizontal navigation bar either just below the Header or even within the Header itself.

Because I am comfortable with tables (<table>) I have used I have used table to create horizontal navigation bar before. However, current opinion is table should be used for data, and navigation bar which contain links are not data and the proper HTML tag to use for navigation bar should be list (<ul>). This has to do with web sematic which I think relates to how a computer, not a human, see a website. However, this will involve CSS (Cascading Style Sheet) and a lot of coding. The method I am going to describe here just use a simple <div> tag and http://bloggerfordummies.blogspot.com/2008/07/dummies-guide-html-tutorial-hyperlink.html" target="_blank">hyperlinks and is simple to do.

I am not a trained programmer so don't know yet the significance of web sematic and don't know yet what is the significance of using this method on the blog, SEO, whatever, but any significance I doubt it will have a large bearing on the blog, and I quite like the simplicity. If you have doubts regarding using this method, perhaps you can wait until I publish a new post on using CSS. In the meantime, I am very happy using this method for my blog.


How to create simple text horizontal navigation bar without CSS

Step 1: extra "Add a gadget" in the LAYOUT for the blog Header. Briefly, this just involved the simple step of finding editing showaddelement='no' to showaddelement='yes' in the template.

Step 2:Go to LAYOUT, click ADD A GADGET in the blog Header section and choose a HTML/Javascript gadget (formerly called page element). Then type in this HTML, with any number of links you wish(the first code is just to show how it is done, the following codes are to show how to make it look better):

<div>
<a href="URL 1">Link 1</a>
<a href="URL 2">Link 2</a>
<a href="URL 3">Link 2</a>
</div>

where you should change the URL and the "Link 1" to any text that describe the page you want to link to like HOME, ABOUT US, etc.

Now if you use the code above, the links will all be bunched together. If you don't like that, you will have to add space by using the space bar. You can only use the space bar once. If you want to add more space, then you will have to type where nbsp stands for non breaking space.

Further, you may also want to consider putting a vertical bar | (one with the backslash key) to separate the links like what I have done for this blog. I have also experimented with [ ] as separator and if you want to see how it looks, refer to FAQ for Blogger Tips and Tricks

The codes for the above will be something like this:

<div>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>


Step 3:If you are happy with the navigation bar above the Blog Title, you may leave it as it is. Otherwise, go back to LAYOUT and drag the gadget to wherever you want.

If you still want to embellish the navigation bar, perhaps you may want to add background color to distinguish the navigation bar from the rest of the blog Header. You can add an attribute background-color:red to the div tag like this

<div style="background-color:red;>
| <a href="URL 1">Link 1</a> |
| <a href="URL 2">Link 2</a> |
| <a href="URL 3">Link 3</a> |
</div>


I have used the example red for the color, but you can use any color or use HTML color code #E1E1E1; for more color choices. For tasks related to color, I have found the free Iconico Color Pic and Color Blender invaluable. For color, I may write a general blogging tip on colors for blog later. In the meantime, this getting started with Color Pic may be useful.

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics