Wednesday, December 29, 2010

How to link to a location in same page

It is often convenient to create a hyperlink to another location in the same post or webpage. For example, in a post explaining AdSense Privacy Policy Generator for AdSense publishers, there is a whole section on the relevant portion of AdSense Program Policies before the actual content on how to use an AdSense Privacy Policy Generator. For the convenience of visitors who have no interest in reading about AdSense Program Policies and just want to learn how to easily create the required policy for their blogs, it is thus good to create a hyperlink at the beginning of the post so that they can click on it to bypass the unwanted portion of the post and jump straight to the portion explaining how to create the AdSense Privacy Policy with the generator.

Tuesday, November 30, 2010

Styling the blog date header

A reader asked: " I really want to make a different date header!"

Well this can be done via editing the

HTML textarea tag replaces scroll box

A blog reader by the name of Kevin of alerted me to the <textarea< tag in place of the more complicated codes for scroll box. I tested it at Testing Blogger: testarea tag in place of scroll box.

The code is as follows:
<textarea cols="50" rows="30">type your text here</textarea>
where cols="50" defines the box for the text area to be 50 characters wide and rows="30" defines the number of rows to be 30. Note that the test shows that you should type the text without using the ENTER key otherwise the line break will be represented by the line break tag <br />

More details on the usage of the textarea tag at W3schools: HTML textarea tag

Thursday, November 11, 2010

How to include link to Twitter page in your navigation bar

"Is it possible to have a RSS feed of another blog as Blogger page? I noticed also that one of your Page is just a link of your Twitter account. How do you do that?"

I assume you are referring to that link to my Twitter "tab" that you see just below this blog Title as highlighted with a yellow arrow in the screen shot below:

Tuesday, October 05, 2010

Make Amazon banner (iFrame) open in new window

"Do me a favor, explain how to open an Amazon banner in a new window. Thanks."

The question would be as the same as asking how to make an iFrame open in new window because Amazon uses iFrame for its banner.

Let's take the Amazon gift card banner below.

Monday, September 27, 2010

How to center post title (customization)

If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

Reminder: Always backup template and backup gadgets before editing the template.

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;

The just add this line text-align:center;

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;

preview and if OK, save template.

Update: Different template may define post title differently. For example, a commentator found that for her, it was {

If you want to align the post title to the left or to the right, just substitute text-align:center; with either text-align:left; or text-align:right;

Note: If you can't find the relevant code, let me know what template you are using via my contact form

How to hide blog date header

Update: There is an easier way to do this without editing the template directly. See Blogger "Edit posts" options

I have tested "unticking" the date header by testing at Testing Blogger Beta without editing directing the template directly at Testing Blogger Beta and you can check a label page eg Label: Comments you would see that there are no date header. Also read the comment: puluth® has left a new comment on your post "How to hide blog date header":

Thanks. but how to remove it from blogger label page?

While blogs started as web logs or weblogs (chronological publication of personal thoughts or diary) and thus characteristically have a date header like the one above this post, but because blogs have now become a convenient way of putting content online, many have been using blogs for other purposes more like a typical website, many bloggers want to get rid of the typical date header.

That is not difficult to do. Sign into Dashboard > Design > Edit HTML to open the template editor and look for the block of code like the one below (for the Minima template, yours depending on your template may be slightly different):

/* Posts
*/ {
margin:1.5em 0 .5em;

and just add this line: visibility:hidden; for example like below:

/* Posts
*/ {
margin:1.5em 0 .5em;

and the date header will be gone.

Tuesday, September 21, 2010

Make images uploaded via Blogger unclickable

Many bloggers want their uploaded images not clickable probably because they don't want their images especially the enlarged version to be copied. Previous post How to make images not clickable (not enlarge) provided a method in varying circumstances may not work.

Here is a more efficient method and failsafe method. All one need to do is after uploading an image via Blogger image upload icon to switch to Edit HTML mode if one is not already in this mode.

Now depending on which post editor you had use, the HTML codes used to display images that Blogger generate upon uploading is different. We will deal with the old post editor (my preferred post editor) first as it is easier to explain and deal with the new updated post editor later:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" /></a>

Please note that only the code in black is needed to display the image. Those highlighted in red are not needed to display the picture and can be removed safely leaving only
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 178px; height: 67px;" src="" border="0" alt=""id="BLOGGER_PHOTO_ID_5373085274943228530" />.

Thus to make the image not clickable, all you need to do is just to delete those codes highlighted in red. I have tested that successfully over at Test to make images uploaded via Blogger not clickable.

New post editor

We will now deal with the new post editor which is not my preferred post editor. The codes to display the uploaded image generated by Blogger with the new post editor is as follows, again with the code to display the image in black while the codes in red are to make the image clickable to display an enlarged image. The codes in blue is to center the picture and can either be removed or left in place (note: center will be replaced by left or right if you had elected to float the image to the left or right but that will not affect the explanation to make the image not clickable):

<div class="separator" style="clear: both; text-align: center;">
<a href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="" /></a></div>

Again, only the code in black is needed to display the image while those in red are used to make the image clickable to enlarge the image while those in blue is meant to center the image. Thus if you want the image not clickable, just delete those highlighted in red (<a....> and </a>) and those highlighted in blue too leaving those in black intact and the image will still be displayed. Alternatively we can just delete those codes in red to make the image unclickable while leaving those in blue intact to center (or float) the image.

Friday, August 13, 2010

Easily make HTML sitemap table of content javascript

Update: the script created by/hosted by Abu Farhan has been found to cause blogs using it to automatically create HTML Sitemap/Table of Content has been found to cause the blog to be locked for malware (if you still want to use it, perhaps use it for a test blog to see if the problem still persist).

Alternatively use the methods outlined in How to make Table of Content with Link List to create your Table of Content manually.

A commentator at Blogger Tips and Tricks (HTML) Sitemap (Table of Content) said: "Hi Peter, This sitemap is really good and helpful. I would like to add a sitemap like this one to my blogger blogs. Can you please give me a detailed reply on creating a sitemap like this and loading it to blogs and then to Webmaster tools."

Fortunately for me, that is not difficult a task for all you need to do is to first create a post or better, a static page, making sure you are in the Edit HTML mode, copy the following Javascript:

<script style="text/javascript" src=""></script>
<script src=""></script>

making sure to replace with the actual URL of your blog. To make this clearer, below are 2 examples of the codes I used to create such HTML sitemaps of 2 of my blogs, one of which is Easily make HTML sitemap for your blog using Javascript

Monday, July 05, 2010

How to set comment option for individual post

"Is there a way to not have comments for a post in the body of the blog or post? I would like to have a "comment" page that readers can go to and comment there, but not on the post itself."

You can easily set any individual post to either allow or don't allow comments. You will have to first go to Dashboard, click SETTINGS > COMMENTS and set the blog to show comments:
Comments (.) Show ( ) Hide

All you need to do now when publishing a post is to click POST OPTION at the bottom left corner of the post editor and select one of the 3 options:
( ) Allow
( ) Don't allow, show existing
( ) Don't allow, hide existing

Blogger comment option for individual post

Related posts:
How to remove "nofollow" attribute for comments

Friday, June 18, 2010

How to change post title background color with template designer

"And how can I give my post title a colour background?"

The first thing I thought of trying is to go to LAYOUT > FONTS AND COLORS as described in my previous post Changing fonts and colors for New Blogger (xml).

However, Blogger for better or for worse is constantly evolving and the LAYOUT tab is no more, replaced by a DESIGN tab and apparently have moved the template designer from Blogger in Draft to standard Blogger.

I believe that it is still possible to edit the template direct to add CSS (Cascading Style Sheet to control the post title background but found that Blogger Template Designer has provided a "Advanced" option to do that via the template designer with INSTANT PREVIEW. And apparently some of the functions of the new Blogger Template Designer can be used even if the template you are using for your blog has not been designed with Blogger Template Designer

Sunday, May 16, 2010

Recover blog deleted as splog, TOS violation

Blogger is really going all out to delete blogs which are splogs (spam blogs) and those not confirming to their Blogger Terms of Service which unfortunately is resulting in many false positive (blogs deleted which are not splogs). I was a victim too when one of my environmental blog - Aerator - an environmental blog was deleted for supposed "TOS violation" which it is not. It is an environmental blog with an original innovation Method to increase efficiency of wastewater aerator

If yours too had been wrongly deleted, follow the steps below which I used to get my blog restored:

How to enable comments for pages

"I have created new pages and would like people to be able to leave comments"

To enable comments, go to Dashboard, click EDIT POSTS, then EDIT PAGES and you will see the pages you have added to your blog:

Blogger Edit Pages in Dashboard

Click EDIT for the page which you want to enable comments, then at the bottom left corner of the resulting "page editor", click POST OPTIONS and in the options under READERS COMMENTS:


tick (.) Allow to allow readers comments, then click PUBLISH.

Update: Blogger seems to have blocked comments for static pages. I have tested allowing comments for some page and found that what many commentators complained about - that it immediately revert to not allow is true. In fact on previous pages where I have allowed comments and the Dashboard showed that there comments, however, on loading the page, the comments are nowhere to be found.

Note: Blogger is aware of the problem and is working on it. See Blogger Help Forum

Saturday, May 15, 2010

Tool - Cover live events with blog

Here is another very useful tool for blogger which will enable you to conveniently cover a live event such as a sport event, court trial proceedings, elections, disasters etc. This can be done either in person, invited panelists, Twitter accounts, XML feeds, readers comments so you have lots of choices for its content. That tool is which can either be a free tool with ads or a paid for tool.

To see an example, surf over to Anil Netto: Live - Polling day for Sibu by-election. Apparently, one can select either chronological order (newest events first) like in the above or reversed chronological order (oldest events first) like this post which covers the same event - LIVE Sibu By-Election On Polling Day. And if you want to compare how different bloggers can cover the same event, see also Lina Soo: Sibu by-election live coverage (same event but content different among others, due to different feed).

Monday, April 26, 2010

Guest post: Animated gif images, Blogger and Photoshop

Welcome to Steve Wallet, Architect, Blogger Tips and Tricks first guest blogger with his post on working with animated gif images, Blogger and Photoshop. As for me, I only use free software, namely Irfanview and PC Paint, so I hope Steve's post will provide useful information which I am not able to provided for those who like graphic heavy posts or blogs:

I saw Peter's article about adding .gif's to blogger (Uploading animated .gif images to Blogger post), and thought I'd give it a try. I wanted to make .gif's and post them directly to my blog, without all the complicated html and uploading from other websites. After much trial-and-error, I have created simple .gif's for my blog.

I use Adobe Photoshop and ImageReady, version 7. This article will make much more sense if you are familiar with Photoshop.

What I've learned so far.

Friday, April 09, 2010

Blogger video upload icon and the old post editor

Many bloggers have asked why they cannot upload video via Blogger post editor anymore? Or they ask, what happened to the "filmstrip icon" which I believe is the Blogger video upload icon at the end of the toolbar you see in the screen shot below:

Blogger's toolbar with video upload icon

In practically every case, I have found that the reason their "filmstrip icon" disappeared is because they are using the new updated post editor which do not provide for video upload.

The solution is simple. Just go to SETTINGS > BASIC (the Basic tab is the very first "sub-tab" for SETTINGS which you will be in once you click the SETTINGS tab) and scroll to the bottom of the page. There you will see the options to select the new updated post editor or the old post editor:

Blogger radio buttons to select new updated post editor or old post editor

Select the old post editor, save, go to your post editor and there you will see your "filmstrip icon".

Saturday, April 03, 2010

How to embed webpage in blog with iFrame

Suppose you want to integrate a website or a particular webpage with your blog. Some possibilities, you may be auctioning some items on eBay and you want your ebay offering in your blog or perhaps you have an Amazon AStore and want to embed the AStore into a post in your blog. Click here to see a sample.

Note: Embedding a webpage in an iFrame in your own blog of website is equivalent to copying that webpage into your own website or blog so it is good to ask permission of that webpage you want to embed. In the example below, I uses my own Amazon's Blogger's AStore Bookshop so there no copyright issue as it is my own webpage.

What you can do is to first obtain the URL of that webpage and put it in an iFrame as follows:

Monday, March 22, 2010

Post in chronological order hack

Update: Hacker has an updated script. His message: "Although the previous version worked for me, I decided to rewrite the script, here: Blogger posts in chronological order, 2011 version. Please use this revised script, it is better :)

Blog posts are by default arranged in reversed chronological order in the home page, that is, the newest (latest or most recent) post right at the top and followed by older post. A very common request from bloggers is to have the posts arranged in chronological order instead, that is, the oldest post at the top to be followed by earlier posts.

Up till now, the best solution we had been able to offer is to ask the blogger to play with dates and time or alternatively, edit the template to add extra "add a gadget" and then make a "sticky" post.

Now apparently the David Merriman had come up with a Blogger Hacking: Chronological Order where apparently all you need to do is to copy some script and paste it into your blog template just before the </body> tag and it will make posts in the home page display in chronological order instead of the usual default reversed chronological order of blogs.

Saturday, March 20, 2010

Advice: Never delete blog or post (And if you ever did, what to do?)

One very good reason not to delete a blog or a post, especially if the blog or post is not a relatively new one, is that deletion will lead to dead links. Take Prabha's problems for example (from a comment at Permalink SEO:

Friday, March 19, 2010

Create sub-domain with custom domain

If you are just interested to know how to create sub-domain, skip directly to How to create sub-domain

A blogger's complaint that the static page he created has unwanted expandable post summary (if I understand him correctly is the push I needed to finally write this post on sub-domain. He suspect it may have something to do with the fact that he is using a template with built-in expandable post summary (again if I understand him correctly. He may be right but it looks that the static page one created via Blogger uses the same template.

Anyway I figure his solution might be to abandon blogspot and upgrade to custom domain and create a sub-domain instead as the sub-domain can use any template which may or may not be the same as the original. It is practically a separate independent website. Look at the one I created recently (still under construction). If you go to BT&T FAQ which is the title of that sub-domain, you may see me using the same template, but the blog title, sidebars, etc are different from Blogger Tips and Tricks.

A bit more rambling. While for a long time, was negatively compared with Wordpress, since it abandoned the old classic template and forced everyone to upgrade to the new Blogger xml templates, Blogger has improved by leaps and bounds. Not only that, now coupled with Google Apps, you have a very easy "content management system" to create many things without getting too technical. In fact, I know that Google (here in Malaysia anyway) is working with a students from a University to help SME (Small and Medium Enterprise) using Blogger and Google Apps to create >websites for businesses.

How to create sub-domain

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 And for most cases where the requirements are not too demanding, it is sufficient. This is especially true now for since it has upgraded from using the old classic template to the new xml template plus teamed up with Google Apps.

Currently, that 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:

1InMotion HostingInmotion
3Just HostJustHost
4Web Hosting PadWebHostingPad
6IX WebhostingGreenGeeks

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 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 or blogs which are sub-domains of Blogger and Wordpress versus blogs like this (, no blogspot in URL) which even though uses my own domain, is hosted by 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'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 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 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.

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

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

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:

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

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

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.

Sunday, January 24, 2010

Creating Contact forms with Kontactr (plus comparison with Google Docs)

Rather than publishing your email address which may attract robotic email harvesters and spam, it is wise either to display a graphic of your email address or even better, a contact form (which I have done at Contact form for Blogger Tips and Tricks which don't reveal your email address. This post will discuss the pros and cons of using either plus how to use Kontactr for your contact form. I think I will leave a post about how to use Google Apps for contact forms till later since I have opted for Kontactr for contact form.

Kontactr for contact form

It is very easy to create a contact form with Kontactr. All you need to do is to sign up for an account, using the email address which you wish to receive emails sent from the contact form. On successful registration, an email will be sent to that email address with an activation link which you must click to activate your account. If after some time you still haven't receive the activation email, click RESEND and it will be sent to you again.

Once your account is activated and you successfully signed in, there will be a total of eight choices out of which 3 will send your respondent to Kontactr's website and the other 5, your respondent will not leave your website. I have put demonstration contact forms, links and buttons over at my test blog with the eight possibilities in the exact order as they occur over at Kontactr

The very first one is uses AJAX Embed Widget and is highly recommended.

Kontactr Ajax Embed Code for contact form

You can also customize the color to blend with your website's colors. All you need to do is to copy and paste the script into the post editor and publish the post and if you want the contact form in a post or alternatively, into a HTML/Javascript gadget (page element) if you want it in your footer, sidebar or whatever, but the place where you embed it must be wide enough to contain the contact form. However, the good thing is it will not send your respondent to Kontactr website, but will remain in your website.

The last one at the bottom of the page is the HTML embed widget which I do not recommend

Kontactr HTML embed code for contact form

as you will have to edit the HTML to get rid of all the line breaks, otherwise you will get lots of blank spaces above your contact form.

Somewhere in the middle of the page will be the codes for the "button contact form" which is what you should choose if you don't want a large contact form and a little non space invading button that fits nicely into a little space in your sidebar. Don't take those three codes on the left. Pick any of those 3 "KPU form" with KPU a short for Kontactr Pop Up. If you install these either somewhere in a post or in the sidebar or anywhere, clicking on the button will cause the contact form to pop up with the respondent staying on your site.

Pros and cons of using Google Docs and Kontactr for contact forms

I have used Kontactr before for contact forms for other blogs except for this blog until recently. In fact, I made a small donation to Kontactr in gratitude.

Kontactr gives a "true contact form" in the sense that when someone enters his true email address into the Kontactr contact form, what you receive is actually an email from that email address and not a message from Kontactr that someone has sent you a message and you have to go to Kontactr's website to read the message. With that email message, if you so choose, you can respond direct to that email address. In addition, Kontactr provides a captcha (word verification) to help you reduce spam from the contact form.

What I don't like is that you will be dependent on Kontactr, a third party not as big or as strong as the mighty cash cow Google. If Kontactr services or website goes offline, there goes your contact form. Not many people provide services and products for charity, and if a provider is not making any money or worst, losing money, it is very likely to cease to provide support. This is exactly what happened in the case of a Philippine online favicon generator and host.

Google Apps: While Google Docs is still a third party provider, I have confidence in Google Apps because it is backed by that cash cow Google and so unlikely to go bust anytime. Another pro if you consider it a plus is that all the fields created in that contact form when someone fill in and submit will go to an online Google Spreadsheet which tabulates them neatly into searchable rows and columns. That can be mighty handy for you to organize all the data collected.

Unfortunately, using Google Docs don't give you a "true" contact form because it only provide you with the possibility that when someone fill in that contact form, an email message is sent to you plus a link to read the fields (such as name, email address, message) that you included in the contact form at the Google Spreadsheet that is created when you create that contact form.

Saturday, January 23, 2010

Contact Form

Related post:
Create static pages with Blogge in Draft
How to create simple text horizontal navigation bar
Creating contact form with Kontactr plus comparison with Google Docs
Contact form
Kontactr for your contact form to avoid email harvesting
email COntact form for Blogger

Blogger Tips and Tricks Privacy Policy

Privacy Policy for Blogger Tips and Tricks:

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at .

At Blogger Tips and Tricks, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by Blogger Tips and Tricks and how it is used.

Log Files (Visitor counter)
Like many other Web sites, Blogger Tips and Tricks makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons
Blogger Tips and Tricks does not use cookies.

DoubleClick DART Cookie
.:: Google, as a third party vendor, uses cookies to serve ads on
.:: Google's use of the DART cookie enables it to serve ads to users based on their visit to and other sites on the Internet.
.:: Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL -

Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include ....
Google Adsense

These third-party ad servers or ad networks use technology to the advertisements and links that appear on send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see. has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices.'s privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

Saturday, January 16, 2010

Simple adjustable way to hide Navbar

An email from a blogger regarding his problem with hiding the navbar caused me to revisit the hiding the navbar issue plus recheck the Blogger TOS (Terms of Service) plus discovered a very simple way to hide the navbar which I tested at A-Z Products and adapted from Disable/hide navbar.

In order to hide the Blogger navbar, all you have to do is to sign into Blogger dashboard, click LAYOUT then EDIT HTML to open the template editor. Look for the body section in the stylesheet which in the standard Blogger Minima template is as follows:

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

Now all you need to do is to copy and paste this small bit of CSS

position: relative;
top: -40px;

and paste it, say, at the bottom of the above script just before the last } like this:

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
position: relative;
top: -40;


Depending on your template, you can play with the variable -40 until the extreme top of your blog header sits right at the top of the browser window or at any position according to your desire. To illustrate, see the screen shots below showing the original, the appearance with the variable as -50, then -40:

original appearance navbar with Minima template
Original appearance with standard Blogger Minima template with Blogger Navbar plus space visible

navbar plus part of Header hidden
Blogger Navbar plus part of Header hidden

Blogger Navbar hidden and no space above blog Header

Update: A commentator commented that the comments of J and Carol helped him, I think, with the new Blogger Template Designer, so I figured I will add their comments into the post proper:

For those using the new Template Designer, go to Design - Template Designer - Advanced - Add CSS.
Paste this code:

div.navbar {
position: relative;
top: -50px;

Curse Blogger for making me spend two days on this!!!!

Carol Schultz said...
I tried yours and the only modification I needed to make was the last line from top:-50px; to top:-40x;
Maybe it's different depending on the template? Thanks for your help

Related posts:
Another way of hiding the navbar (February 2007)
How to hide Navbar for New Blogger (May 2007)
How to hide New Blogger Navbar (October 2008)

Thursday, January 14, 2010

Blogging tip - search definition (general)

I plan this to be a series of tips and tricks for blogging in general, not only related to platform, but applicable for any blogging software including Wordpress, Live Journal, Jomlah, etc.

I will start off by one simple little search engine trick I often use. Frequently, I like to define some word before writing about something related to that word. What I will do is just to type the word "define" before the word in a search engine.

For example, I want to publish a post about diabetes. Searching for [define diabetes]. Further, you can use different search engines depending on what kind of results you want.

If you use, the very first result will usually be the Web definition:

Web definitions for diabetes
a polygenic disease characterized by abnormally high glucose levels in the blood; any of several metabolic disorders marked by excessive urination ... - Definition in context

If you use other search engines, the first result will not be as consistent. For example, using, first result was from

American Diabetes Association Home Page - Aerican Diabetes ...
The American Diabetes Association is leading the fight against the deadly consequences of diabetes and fighting for those affected by diabetes. Cached page

but the first result for asthma was from

Asthma UK - Homepage
Asthma UK is the charity dedicated to improving the health and well-being of the 5.4 million people in the UK whose lives are affected by asthma. Cached page

Friday, January 01, 2010

Cannot add gadgets with template designer? - solution

A blogger who was unable to add gadgets when in design (clicking on "add gadgets" takes me the blogger back to my dashboard page). Also, if he try from layouts, thru new template designer, all options are deactivated.

The blogger solved his problem quite simply in the end:
(1) adopted new template, and
(2), changed to mozilla firefox browser... "add gadgets" got enabled again...

Well if you have a similar problem, perhaps his experience can help you solve the problem

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