Sunday, April 29, 2007

DMOZ, the most important directory - Blogger Tips and Tricks got listed even without submitting

Today, I received an email from a DMOZ editor, informing me that he found this blog informative have listed it in the most important directory and the most difficult one to get listed - DMOZ (Open Directory Project). You can find my blog listed here: Computers: Internet: FAQs: Help and Tutorials. And I didn't even submit my blog to the directory! (I have actually wanted to submit a long time ago, but I couldn't decide on what category to place it in. For submission to DMOZ, choosing the right category is important). I indeed feel greatly honored.

The editor also inform me that many bloggers do not know about the basics of submission to DMOZ (Open Directory Project) and pointed me to a site providing tips for getting listed in the DMOZ Directory (Open Directory Project. Google uses the DMOZ listing and has a similar directory called Google Directory and an examination of the two directories showed that it has the same categories, but arranged in different order.

You can find tips at Tips for getting site listed in Google Directory on getting faster approval of listing. Surf over there and read the useful tips before you try to submit your site to the most important directory.

I do feel I deserve it. Just refer to the notes of appreciation and thanks I have compiled at Compilation of comments in Blogger and emails received (click BACK button to get back to this page).

Saturday, April 28, 2007

Another way of adding graphic to your blog Header

I have previously posted various ways of adding a graphic to your blog Header. See

New Blogger: Adding a graphic to your blog Header
New Blogger: Adding graphic background to your blog Header (click BACK button to get back to this page).
Special fonts for your graphic Header and without removing the text title

I have found another way to add a graphic header, however a test showed this to be an unsatisfactory way. See Testing adding graphic header. Maybe you can experiment to make the result acceptable, but I don't want to try as the above methods are well acceptable to me. (Note: You will see the blog text title together with the graphic. If you have incorporated the blog text title into the graphic and want to remove the blog text title, in the method described below, you can delete the text from the "Blog Title" field). I will be repeating this test again later when I have the time and either update this post or publish a new one. Also in the example above, you see the graphic extending beyond the boundary of the Header. If you don't want this to happen, you should resize the graphic with a photo editor or use the free and very good Irfanview as described in the post: Using Irfanview photo editor for your blog. Click BACK button to get back to this post. I will probably have to redo this post or do a new post to explain this method better).

Anyway, if you want to do it, this is the way. First you have to have the graphic saved in your computer or uploaded to the web. Sign into Dashboard. Click Layout for the relevant blog. You will see a Page Element right at the top of the Layout with the title of your blog. Click edit and you will get this pop-up:

Another way to add a graphic Header

Click BROWSE and locate the graphic you have saved in your computer or type in the URL of the hosted graphic on the web. Then click "Save changes".

Friday, April 27, 2007

eMail Contact Form Part 2

I have written an earlier post on this subject: eMail Contact Form for Blogger (click BACK button to get back to this page), but the site that offered the contact form required me to download a program, which I was reluctant to do. In that post Amit suggested another alternative - Contactify where you don't have to download any program, but you will have to divulge your email address as well as the password. I was not willing to do this for my normal email address, so I created a new gmail address to test it out. I have in this way created a way for the blog visitors of Blogger Articles to contact me (at the new gmail address) without having to reveal that email address. The "email me" link to the contact form is at the bottom of the left sidebar of the above blog. Try it out, click on it and see what is the result. (Note: turned out that the password to to log into Contactify, and not the password to sign into your email Inbox).

To creat the link to the contact form, what you need to do, as mentioned above, fill in the field for your email address, your email password (twice), then click a "Create link" button and you will be taken to a page for word verification, then click "I agree, create link" and you will be taken to a page where you can copy the link (URL) to your contact form. Then all you have to do is to sign into your Blogger account to get to the Dashboard, click LAYOUT for the blog you want the link to the contact form to be displayed, click "Add a Page Element", then select either LINK LIST or HTML/Javascript to create the hyperlink. I used LINK LIST to create the hyperlink to the contact form in this blog: Blogger Articles

Update 28 April 2007: Shawn of Stock Blog Hub commented you don't need to give the password to your email address, but an email address to log into Contactify. I tested that by creating a gmail address, register with Contactify and gave my email address plus a password different from the gmail address to create the link. I copied the link, click a Add a Page Element and selected Link List to create a link to the Contactify contact form. You can see the link at the bottom of the left sidebar of the blog Career and You. Try clicking on that link and see what happens. I did that and found the responses were instantaneous.

Thursday, April 26, 2007

Alert: Pop-up, don't give your username and password

Today, something is going on with Blogger. Even when I am already signed in, whenever I attempt to get to the Dashboard, a pop-up appears which asked for the username and password, and foolishly, I gave my username and password. However, I think that that is a foolish and unneccesary thing to do because if you click the [x] (cancel), you will still get to the Dashboard. I am wondering if this is an attempt by some hackers to get our Blogger username and password for spamming, hijacking and other purposes.

If you get that pop-up, my advice is to click [x] (cancel) and not give your username and password. Because I gave it the first time, I have quickly changed my Blogger (Google) password, and now I believe I can sleep better.

Update 3 May 2007: Blogger Employee at the Google Blogger Help group have informed us the pop-up was from Blogger, but it had been fixed. He also assured that their username and password had not been compromised. However, I am still of the opinion that I did right in changing my password immediately as it is always better to err on the side of caution, especially when you don't have all the facts in front of you.

Countdown clock for your blog


Here is an example of a post which have a countdown clock with post title Countdown to Malaysia Vision 2020. I made it in response to a request from a member of the Google Blogger Help group. I thought I might as well make a post out of it so that more people will know about it.

You can generate the script for free from A free countdown clock for your Website. You choose the type of clock you want ("countdown to a date in the future" or "Time elapsed since date in the past"). You can set the year, month and day you want to countdown to. The default for hour, minute and second is set to 0,0,0, but you can set them to any figure you want. You choose the countdown mode (see Countdown clock help page. The is also a choice of 17 languages for the countdown clock. Choose the background color (HTML color code), text color and whether you want a border or not. For choosing a background color to match the colors of your site the following will be useful:
ColorPic and
Color Blender.

You are then ready to generate the script to paste into your post, or generate a link to the clock if you don't want the countdown clock on your site. You can also add it to the sidebar by pasting into a HTML/Javascript Page Element (click Add a Page Element in the LAYOUT). Page Element is now referred to as Gadget. You may have to do some adjustment to the dimensions of the countdown clock in this case. Later, I will probably do a demonstration and write more about it.

Wednesday, April 25, 2007

3 column New Blogger templates by Thur

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template

Thur has created 2 3-column New Blogger templates. One is a fixed width template and one a fluid width template. I will explain later, and also how you can observe the difference.

DownRight v3.0 3 column New Blogger template with all columns fixed

One is the DownRight v3.0 3-column, all columns fixed, width 960px template. You can see an example blog using this template at Articles on Fitness. If you are viewing the blog with a wide screen (most popular is 1024 X 768 screen resolution), you will see the contents fill the whole width of the screen. A visitor with a smaller screen (800 x 600) will see only part of the content and a horizontal scrollbar at the bottom of the screen. To see the rest of the right side of the content, he will have to scroll there. If you are using a large screen, and you will like to observe how the small screen visitor view it, type or copy-paste

javascript:top.resizeTo(800,600)

into the address bar and press the ENTER key. The window will resize to 800 x 600.

I hope you have a traffic counter installed for your template. It can give information about your visitors - from where they come from, what browser or Operating System they are using, if they got to your site, what search terms they used to find your site, the most popular pages, WHAT SCREEN RESOLUTION they are using. If a large percentage are 800x600, you may not like this template because part of your page will be hidden, and to see them, your visitors will have to scroll horizontally. Surfers are often lazy. Unless they are seriously interested in a site, if they don't see the hidden parts, they may not bother and surf over to other sites. This is the reason I use this Hackosphere 3 column New Blogger Minima template as 5-20% of this blog visitors are still using the 800x600 screen, and I don't want to discourage them from coming back. If you are reading this blog, you will probably see white spaces on both side, but not for 800x600 visitors who will find the content fit into their screen just nicely. Further there is this readability study mentioned in this post What is the best template for a blog (click BACK button to get back to this page), which says content corresponding roughly to the width are found to be more readable than wide column.

If you are interested in installing such traffic counter like the one I used and which give me the kind of statistics I want without too much information, try Statcounter. Others use Google analytics which provide a lot of information including many pie charts which I found too much. But I think analytics would be good for those in e-Commerce an using AdWord for their advertising campaign.

If you want Thur's DownRight v3.0 template, you can get it at DownRight v3.0 xml template.

Backing up and changing the template

It is always wise to backup your current template before you edit or change template. Refer to Backing up and changing New Blogger template. Blogger do not backup all Page Elements (widget) and it is likely when you try to save the new template, you will receive the warning "Such and such will be deleted". If not already mentioned in the above post, let me repeat it will be a good idea to edit your Page Element one-by-one, copy the content of the Page Elements into Notepad files and save them. Then when you have changed to the new template, you can put back easily whatever is missing.

It will be good if you have a browser with tabbed browsing like FireFox, then you can be in the Blogger page in one tab and in Thur's template page in another. First you will have to copy Thur's template at the download page (click on the page, press ctrl+A to highlight all the template, right-click and select "copy" to save it into clipboard.

To change to the new template, sign into Blogger Dashboard, and in the list of blogs, click LAYOUT in the section for the relevant blog, then click the EDIT HTML sub-tab. This will open the template editor. Click inside the template editor window to highlight all the current template, press the "Delete" button. Then right-click inside the now empty template editor window, chose "Paste to paste what you have copied into clipboard from above into the template editor window. Preview, and if satisfied, click "Save template".

Thur's DownRight v1.4 3 column fluid width New Blogger template

Another template is DownRight v1.4 3-column, main fluid, sidebars fixed template. You can see an example blog using this template at Weight Control Tips. Again, if you are using the wide screen, you will see the whole width of the content. A visitor with a small screen (800 x 600) will also see the whole width of the content, but with the main column squeezed into a narrow column. If you are using a wide screen and want to observe this, type or copy-paste

javascript:top.resizeTo(800,600)

into the address bar and press the ENTER key.

Fluid width template has the advantage of the page automatically adjusting to a visitor's screen resolution, but you have to be careful when putting things like photos, scroll box, etc, to adjust the width to accommodate the 800x600 screen resolution users.

Note the difference in the Google sitesearch box in the two blogs. In Weight Control Tips, I have to make the search box narrower as it uses the main column is fluid width, and wider search box will cause problems when viewed with a small screen (800 x 600) if I make it wider.

If you want to use Thur's DownRight v1.4 template, you can download it here.

The proceedure to change the template will be the same as described above.

Note: The blog using the above template will appear OK in Internet Explorer and Opera, but in Flock, the left sidebar is shifted to the left so that it overlaps the main column. However, this should not be too much of a problem as very few surfers use Flock. Anyway, I put below a screenshot of the blog as it is displayed in Flock:

Articles on Fitness blog as displayed in Flock browser

Hackosphere 3 column Minima New Blogger template

This blog uses Hackosphere 3 column Minima New Blogger template. If you want to know the reasons why, refer to What is the best template for my blog.

More New Blogger templated


New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
Ramani's New Blogger Neo template
New Blogger template by Final Sense
New Blogger templates by BloggerBuster

Monday, April 23, 2007

email contact form for Blogger

I have created a special gmail address for reader of this blog to contact me using mailto link:
<a href="mailto:email address">Click here to email Me</a>
and I am fine with it even though the email address do get harvested by email harvester and I do get spam. But gmail spam filter is so good all of them ends up in the spam folder, so it don't trouble me.

However, if you are picky, you may want to create an email contact form for your visitors to contact you without revealing your email address. You can get it by going to Create a Contact Form for Blogger. I had originally intended to use it to demonstrate, but what I didn't like about that site was when I landed on the site, I got a message that IE7 blocked a pop-up which may cause security risk, and also the fact that one need to download a Webform Designer software which I didn't want to do.

If you don't mind that, and you want a contact form badly enough, you can go to the above site which will give you a link to the page to download WebForm Designer, and if you don't want to set up your own script to email you the form's data, you may also be interested in our free form-to-email service.

Update 29 April 2007: Here is an alternative for you if you have no appetite for downloading a program to get a contact form: eMail Contact Form Part 2 (click BACK button to get back to this page).

Sunday, April 22, 2007

Another way to bring more traffic to your blog and improve your PageRank

I have a Paypal account. Unfortunately in my country, I can't withdraw funds from my Paypal account. In order to do that, I need a US Bank. I did a search for ways for non-US residents to open US bank account using the searh terms "non-resident US open US bank account" and the first result was a page which is a hubpage created at Hub Pages. I figured that if someone can create a hub page and have it so easily found by search engines, I can also make a hub page to help publicise my blogs. So I signed up for an account and created two hub pages:

Help for bloggers using the Google Blogger platform for their blogs

and

Environmental Blogs.

Let's hope that these pages will also appear high in search engine result pages and bring more traffic to my blogs. Plus in the hub pages, I have created links to my blogs, and I suppose that will help in my PageRank.

Hope over to Hub Pages to sign up for an account and create your own hub pages, and probably that will help bring more traffic to your blogs and increase your blogs PageRank.

Tuesday, April 17, 2007

Alert: Problem with using Google group for hosting images for posts, etc.

I prepared a post Uploading and manipulating images Part 2 (click "BACK" button to get back to this page) and used a Google group Photostore to host the photo. When I first previewed and published the post, the image appeared OK. Then for some reasons, I checked the post and found the photos to be replaced by blank boxes. I then proceed to upload the photo to My Photo Store - More cats in town, a blog created specially to host photos, obtained the URL of the photo as outlined in this post Getting New Blogger (formerly Blogger Beta) to host photos for the profile, sidebar, header, etc. (click "BACK" button to get back to this page). Now the photo appeared OK in the post. Now I would be much more careful about using Google group to host photos for my blog.

Monday, April 16, 2007

New Blogger 3 column templates by Isnaini

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template. All templates here will give blogs without the navbar

Here are some 3 column templates for New Blogger by Isnaini, examples of which can be seen at Wedding Tips (using the Nyoba 780 template) and Money and Finance (Using the Nyoba template). Note that the graphic header didn't come with the template and you will have to make your own graphic header and save it into your computer for later uploading. When you first load the template, your blog Header will just be a blank grey rectangle, waiting for you to add the graphic Header.

The templates can be downloaded from Free Templates. There are other templates available there, but they are old classic Blogger templates. To download the template, right-click on the "download" link and select "Save target as.." (wordings will be slightly different for different browsers), and then save it to a suitable folder in your computer.

Computers, Add-ons, handhelds and PDAs, software

To change your template to the newly downloaded template, in the Dashboard, click LAYOUT. You will see a Layout like the screenshot below (click to enlarge). Yours will be slightly because I have added various Page Elements. What I want you to note is the PICTURE Page Element in the Header. Click Edit, then browse to the graphic header you have saved in your computer, then click "Save Changes".

New Blogger Nyoba template layout

Update April 17 2007: I found the gray space in the header too deep for Wedding Tips. I thus went into the template editor and found this block of codes

#header {
height: 180px;
margin: 0px;
padding: 0px;
background-color: $headerBgColor;

and changed height: 180px; to height: 115px;
The codes thus became

#header {
height: 115px;
margin: 0px;
padding: 0px;
background-color: $headerBgColor;


The Header for that blog is as I want it now. Save valuable above the fold space.

More New Blogger templated


New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
New Blogger templates by BloggerBuster

Sunday, April 15, 2007

Making "About Me" a single line that link to full profile

Received a request to make "About Me" a single line which when clicked takes one to the full profile. This can easily be done.

First you need to get the URL of your full profile. Sign into Dashboard and in the top right corner are details of your profile. Right-click on the "VIEW" link and choose "Copy Link Location" to copy the URL of your full profile into clipboard. If you wish, you can open Notepad and paste it there in case it is cleared from clipboard, then you can get it from Notepad.

Blogger Profile URL

Then click "Layout" in the Dashboard and click "Add a Page Element" and you have a choice of either choosing "Link List" or "HTML/Javascript" in the pop-up. In the demonstration blog Furniture Center, I have chosen "HTML/Javascript" as I will then have a choice of whether to make the link open in the same window or a new window. The "About Me" link is at the bottom of the left sidebar of the demonstration blog Furniture Center. Click on it and see what happen.

I then typed <a href="profile URL" target="_blank">About Me</a> into the HTML/Javascript window and licked "Save to Blog". If you don't want the Profile to open in a new window, you can leave out target="_blank" from the above HTML.

I have also created another demonstration blog Alternative Medicine to demonstrate another way of doing it. The "About Me is also at the bottom of the left sidebar. Click on it and see what happen.

In this case, I chose "Link List" rather than "HTML/Javascript" and made a special blog for a purpose written Profile which give me more flexibility to format the profile in whatever way I want. Again, I will have to copy the URL of the purpose created profile blog from the address bar (or VIEW from the Dashboard) to the clipboard. In the Dashboard for the Alternative Medicine demonstration blog, I clicked "Add a Page Element" in the Layout and clicked "Add a Page Element". In this case, I selected "Link List" and thus don't have to bother with writing my own HTML. I just paste the Profile blog into the field for the URL, then typed "About Me" in the field for the "New Site Name" and click "Save to Blog". The disadvantage of using Link List is that you have no choice over whether the link open in the same or new window. It will open in the same window.

Saturday, April 14, 2007

Making Pull Down Menu

A blog reader asked (desperate) for a way to create a pull down menu for his posts of recipes. I have got good and bad news for him. The good news is that there is a simple way to get a drop-down menu. Use Drop-down Menu Generator, which I used to generate a script to paste into a HTML/Javascript Page Element. The bad news for me is that the width of the drop down menu is dependent on the description (post title or anchor text) you put for the link to the post. I used it to do a drop-down menu for the posts in this blog: Food, Drinks and Recipe. It is at the top of the main column and will be displayed in the main page as well as the individual post pages (permalinks). I had originally planed to put it in the sidebar, but because the post titles were long, the width of the drop-down menu generated was too wide for the sidebar, so I had to put it above the main column. If you want something similar, you will need to know how to add an extra "Add a Page Element" for the main column by referring to this post: How to add AdSense ads, search box, "sticky post, etc. above the main column (click "BACK" button to get back to this page).

The bad news for him is that there is only a limited number of posts he can put in the drop-down menu, and I doubt that would be sufficient for his long list of recipes. However, I suppose this drop-down menu can still be useful for making drop-down menus like for blogs, etc.

If he is still interested in doing it, this is how to proceed to generate the drop-down menu. For this task, it will be helpful to use a browser like FireFox which have tabbed browsing. In one tab, log into the Blogger account and click "POSTS" for the relevant blog. A page with with a list of posts will appear. Right click on "VIEW" on one of the post and select "Copy Shortcut" to copy the post URL into the clipboard.

Blogger Dashboard with list of posts of a blog

Open another tab and surf over to Drop-down Menu Generator. Paste the URL into the "Link URL" field. Then type the title of the post into the field for "Text shown". Continue the same process until you have entered all the post you want to appear in the drop-down menu, or you run out of fields to paste the Link URL.

Drop-down menu generator

Click on "Generate" and the script will be generated into the window below. Highlight all the script, copy into clipboard, then in the tab for the Blogger account, paste it into a HTML/Javascript "Add a Page Element" window and save.

Update 22 April, 2007: Phil provided an another drop-down menu (see comments). He gave a link to Drop-down menu creator by Hackosphere. I tried putting a drop-down menu on this blog Articles on Beauty. What you have to do is to provide a title for your drop-down menu, type the title of the link, the URL of the link, then click "Add Option". Make sure you don't click on "Add Option, or the link will appear more than once in the drop-down menu. To add another link, repeat above, and in this way, you can add as many link as you want - an advantage over the drop-down menu described in the post above. However, the drop-down menu width will expand with the text that you add, and it doesn't generate a script for you to paste into an "Add a Page Element" but add the widget direct into your Blogger account (you can choose the blog if you have more than one). Plus apparently, it add the widget to the first section in the template, which in the case of Articles on Beauty was the left sidebar. It ended up at the top of the left sidebar and was too wide for the sidebar. In the Layout, I tried to drag it to the footer, but for some reasons, the widget refused to be dragged. I had to delete the drop-down menu. There is further disadvantage. Even after deleting the pull down menu, Page Elements cannot be dragged and dropped. Looks like I will have to redo the whole template for Articles on Beauty again.

Making a bookcover image link to Amazon page

Some of you may be Amazon Associate. Someone in the Google Blogger Help group asked on how to create an image of a book cover to link to an Amazon page for that book. The best way to explain is to show how I made that Digital Photography Book image in the bottom of the left sidebar of this demonstration blog Digital Photography Articles.

It is best if you have a browser like FireFox which has tabbed browsing. In one tab, sign into your Amazon Associate account and select "Build Links". The select "Product link" and click on the "Build links" Amazon Associate Build Links icon icon. A new page will open where you can search for products. Just type in the search term as shown in the screenshot below:

Amazon Associate Product Link Search box
Click go, and you will be taken to a list of relevant products. If you see a suitable product, click the "Get HTML" Amazon Associate Get HTML icon icon.

You will be given 3 choices - text and image, image only, and text only. Since this post is about using a book cover image only, click the "Image Only" radio button and wait for a new page to open. There, there will be an image of the book cover plus the HTML to display it. If you use that HTML, you will have to save the image to your blog server, which in the case of blogspot user, is not possible. I don't use own domain and host with a third party web host, but if you are doing that, perhaps you may be able to use the HTML generated by ticking "Image only" by saving it to the server of your web host, but I am in no position to confirm as I use only blogspot and have no access to Blogger's server.

If you use blogspot or custom channel where the blog is hosted by Blogger, there is still a way to do it. Copy the HTML and save it to NotePad. I will show the image of the HTML with the link (URL) to the Amazon Product highlighted in blue below (click on screenshot to enlarge):

Amazon Associate Product Link HTML with URL highlighted

Highlight the link, copy and paste it either in the same or different NotePad for future use. Now you need an image of the book cover. Press the Printscreen key and open a suitable photo editor like the very good and free Irfanview (click "BACK" button to get back to this page). Paste it into the photo editor and crop the book cover image. Save it into a suitable folder in your computer. I saved it in a specially created "Temporary" folder which I can easily find.

Actually, although I ticked the large image, for the book cover image I did for Digital Photography Articles, I actually didn't do it that way, but opened a new tab and went to http://amazon.com/ and made a search for "The Digital Photography Book" and printscreen there and pasted and dropped the image of the book cover as described above. This is because I wanted a larger image.

Now you will have to host the picture on the web somehow. You can use Blogger as described in the post Getting New Blogger to host your image for the profile, sidebar, etc. (click "BACK" button to get back to this page). You can also use Photobucket or other third party photo host. I have actually posted it to a special blog My photo store: The Digital Photography Book for hosting the image.

Now to create the book cover image link in the sidebar. I clicked "Add a Page Element" for the left sidebar in the Layout of the Dashboard, selected HTML/Javasript, then typed <a href="Amazon product URL" target="_blank"><img src="book cover image URL"></a> into the HTML/Javascript window where the Amazon product URL is the URL I mentioned (and highlighted in the screenshot) above. To make things clearer, I will put the actual HTML into the scroll box below:

<a href=""http://www.amazon.com/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.com%2FDigital-Photography-Book-Scott-Kelby%2Fdp%2F032147404X%3Fie%3DUTF8%26s%3Dbooks%26qid%3D1176421784%26sr%3D8-1&tag=bloggerfordum-20&linkCode=ur2&camp=1789&creative=9325" target="_blank"><img alt="Digital Photography Book" src="http://4.bp.blogspot.com/_jizoPL28qCY/Rh8J6-trSdI/AAAAAAAAAJ0/iP24qefngLk/s1600/The%2BDigital%2BPhotography%2BBook.jpg"/></a>


with the Amazon product link (URL) highlighted in red.

Friday, April 13, 2007

Putting an Amazon text link, AStore, etc. in the sidebar

Someone in the Google Help Group asked for ways to do the above. As it will be difficult to answer in the group, I have decided to answer the question in a post in this blog.

Now, let's say you have a blog Digital Photography and you are an Amazon Associate. You want to put a link to a book in the sidebar. What you have to do is to sign into your Amazon Associate account, click "Build Links" and select "Text link".

To do this, it will be best if you have a best if you have a browser like FireFox which have tabbed browsing. You open another tab and surf to amazon.com and put the search term for that book, then click on the book you want to link. Copy the URL from the address bar at the top of the page, go back to your Amazon Associate accoount (in a different tab) where you have "Build Links" already opened. Scroll down to "Build Text Link" and paste the URL you have copied into the appropriate field and then type the description of the link you want to be displayed in the other box (see screenshot below, click to enlarge):

Amazon Associate: making text link

Actually the screenshot showed the correct field, but the URL and the description I put is not for a particular book, but for a search result. I believe text link to a particular book has a "shelf life", that is, you willl probably get a message "book no longer available" or something like that when the book goes out of print, or used books are not available. I prefer to link to something like a search result page. I have a demonstration blog Digital Photography Articles and for this post I am going to demonstrate a link to a search result page for "digital photography". I opened a third tab and surfed to amazon.com. There I typed in the search term "digital photography" and got a Digital Photography Articles search result page. Instead of an URL for a book, I thus have an URL for a search result page with many different products related to digital photography, and as long as Amazon has digital photography related products, this will never be a "dead link" and I don't have to worry about checking the link to see if it leads to a "product not available" message or something like that.

(to be continued, with some editing of the above plus further explanation. Got a meeting to attend)

Thursday, April 12, 2007

Uploading and manipulating images Part 2

I have published a previous post on Uploading and manipulating images in Blogger (click "BACK" button to get back to this page). This will describe using the <img> tag to display images.

First you will have to host your images on the web. This can be done by creating and uploading your images to a Google Groups, or getting New Blogger to host your images (click "BACK" button to get back to this page), or use a third party free photo host like Photobucket. Once you have uploaded your image to the web, you will have to get the URL of the image ready.

This post will describe getting the image in the midst of the text.

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island.

The above images was displayed by typing the following HTML in the middle of the text as shown below:

A town called Kuching <img src="photo URL" align="bottom" width="48"> (cat) in the Borneo Island.

A town called Kuching <img src ="photo URL" align="middle" width="48"> (cat) in the Borneo Island.

A town called Kuching <img src ="photo URL" align="top" width="48"> (cat) in the Borneo Island.

Note that the attribute height="W" has been left out of the <img> tag. The width is automatically adjusted to keep the aspect ratio constant so that the image is not distorted. Also, the default is align="bottom" and if you want this alignment, you can actually leave out that attribute as done below, where I display images in the beginning, the middle and the end of text:

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island

The above was produced by typing the following text and HTML tag as follows:

<img src="photo URL" width="48"> A town called Kuching (cat) in the Borneo Island.

A town called Kuching <img src="Photo URL" width="48"> (cat) in the Borneo Island.

A town called Kuching (cat) in the Borneo Island <img src="Photo URL" width="48">

Note that the attribute align="bottom" has been left out in the <img> tag.

Update 17 April 2007: When I checked the post, the images were blank box, although when I first made the post, the images appeared fine. This perhaps was because the photo was uploaded to a private Google group. I thus reupload the photo to a blog specially created for uploading photos - My Photostore - More Cats in town, clicked on the image, and in the page containing only the photo, click VIEW > PAGE SOURCE and copied the real photo URL from the page source and replaced all the photo URL in the post. The image shoudl appear fine now.

Wednesday, April 11, 2007

Another way to get indent for your post

     I have written a previous post How to get indent for your paragraphs" (click "BACK" button to get back to this page. It has worked for most, but a reader commented it didn't work for her and asked for an alternative. As I can't answer in the comment, I have to do a new post.

    Try using the non-breaking space tag in the first few of the paragraphs. I will take a screenshot of the post editor to show how I got the indent in the above paragraph with a screenshot (click to enlarge).

first paragraph showing non-breaking space tag to get indent

Tuesday, April 10, 2007

Poll: Is New Blogger an improvement over old classic Blogger?

Did a previous poll Should links open in new windows? (click "BACK" button to get back to this page. DarkUFO of DarkUFO in a comment recommended another one - http://polls.blogflux.com/ which he says is better. So I am making a new poll both to gauge readers opinion and to demonstrat what DarkUFO recommended. If you have any opinion as to which one is better, I hope you will take a little time to put your opinion in the comment section.

OK, here is the poll:

Should links to external sites open in new Windows

Got a tip about a site that offers polls (without the irritating pop-ups that normally comes with a Bravenet feature) from Sherry of Beta Blogger Resources who suggested thypoll.

I have previously done a similar poll at Poll: Does making links open in new windows piss you off? on whether links opening in new windows irritates readers, but did it using the comment system for feedback, but the overall conclusion from that "poll" was that most prefer links to open in new windows.

thypoll allows one to actually embed the poll in the post, so I just thought I would do the poll again:



Note: This is a poll as well as a post about how to conduct polls, so I have a further note to add. Originally I typed

"Links in my blogs open in new windows. Does that irritates you?"

in a single line, and after embedding the poll in the post, I found that the question extent into the right sidebar, so I redid the poll and put the question as:

"Links in my blogs open in new windows.<br /> Does that irritates you?"

Now you see that the question no longer extend into the right sidebar.

Update 22 April 2007: DarkUFO commented pointing out that there is another site that offers poll. I did a new poll both as a real poll as well as to test what DarkUFO recommended and the second poll is at Is New Blogger an improvement over old classic Blogger? (click "BACK" button to get back to this page). Result of that test? I found out that Blogflux (the poll recommended by DarkUFO produced a poll where clicking on "Results" resulted in being able to see the results in the same post, unlike Thypoll, which opens the result in a new window.

Update 14 August 2007: I am trying out a new site for making poll. See Anther way to add Poll to your blog post.

Saturday, April 07, 2007

New Blogger 3 column templates modified by Ramani

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template. Further, I checked the links to download the templates. All led to 404 (page not found). If you have the same problem and need the template, email me. The link is in the sidebar

downloading Ramani's 3 column Minima template
Ramani of Hackosphere initially started with one the Minima New Blogger template modified to 3 columns, but now has added Denim and Dots Dark to his collections of 3 column templates. If you are interested in using Ramani's 3 column templates, go to Hackosphere, right-click on the template you are interested in, select "Save Link As..." (this is for FireFox. The wordings will be slightly different for different browser), and save the template into a suitable folder in your computer. Then sign into your Blogger Dashboard, for the relevant blog, click LAYOUT, then under the TEMPLATE tab, click the EDIT HTML sub-tab. Click BROWSE and select the template you just downloaded and saved, then click UPLOAD:
New Blogger upload new template
and your new template will be saved into your blog template editor.

Hoever, note that if you use Ramani's template, there will be no provision for you to add anything to the Header or to the Main Column, and further, the Header will not extend the full width of the content. For illustration, have a look at this blog: Articles on Beauty. The LAYOUT of your blog will look like the screenshot below:
Hackosphere original 3 colum template LAYOUT
which has only 3 "Add a Page Element" links.

This blog (Blogger Tips and tricks) uses Ramani's modified Minima template, but was further modified by me to enable me to add things to the Header and the Main Column, plus make the width of the Header to be the same as the content of the blog. If you want something like this, I have uploaded the modified template and uploaded it to Photostore. The file name is Ramani's minima3col modified. Download that, save into a suitable folder, sign into Blogger Dashboard, click LAYOUT, then TEMPLATE, click BROWSE, select the xml file you just downloaded, then click UPLOAD.

If you do it correctly, the LAYOUT of your blog will be like the screenshot below. Note the 2 extra "Add a Page Element" in the Header and the Post section:

Hackosphere modified 3 column Minama template LAYOUT

Update 15 April 2007: There were a few comments and emails about accessing that Photostore Google group as to get access, you need to be a member. Somehow, when I set up the group, Google set it to membership having to be approved by me. However, that should be no problem as I approve ALL membership. If ever you had your application rejected, it can only be a mistake, and all you need to do is to reapply again (hasn't happen yet). I thought I would leave it as it is as it is acting as a sort of hit counter for me as I get informed of how many people wants to get access to the group.

Further update 14 September 2007: Some have complained that they get error message when trying to upload the template. By right you should not have such problem, but New Blogger seemed to be extremely fussy. Many times I have done what I think is completely correct, but still get error message when saving template. If you face such problem, maybe you can go to Template Store, apply, then get my backup template from there. However do remember to BACKUP your current template PLUS Page Elements as explained in Backup and change New Blogger template, including Page Elements


Update 7 October 2007: I have received quite a few questions regarding getting error message (template cannot be parsed, etc). New Blogger is extremely fussy and sometimes we just don't know why we get error messages even when we are quite sure of doing the right thing.

In one case, a blogger was trying to do the old way - copy-paste. You should download, go into EDIT HTML, browse, locate xml file, Upload. If you still have problem, the only thing I can do for you is to ask you to give me your email address (in form of me at gmail do com or something) and I will send a mail and attached the exact xml file I used for numerous blogs. Some of them is this one plus:

Blogger for Dummies

Testing Blogger Beta (now New Blogger)

Dummies Guide to Google Blogger

Generating Revenue from your Website

The easiest way to earn something for your blogging efforts

Alternatives to AdSense

Guide to Malaysia

Natural Remedies

Good Health Information

Successful insurance agents (done for a relative who asked for help as demo, but never gave feedback as to whether that was what she wanted, so nothing else was done. Don't believe the nonsense I wrote in that blog)

Good Hobby Ideas

My Photo Store

Peter's Home Business (demo blog)

Good Health Magazine (demo blog)

Podcasting Magazine (demo blog)

Firefox with Google toolbar (same template, but main column widened to accommodate Firefox button)

Google Pack components (not finished yet)

What is Google Pack (more complete than above, but doing so many things, sometimes I forget what I already done)


Amazon products for Blogger

Hackosphere's 3 column Denim New Blogger template

Hackosphere's 3 column Denim template is designed to take into consideration of those using the small screen (screen resolution 800x600 pixels). This blog Work at Home Articles is an example of a blog using Ramani's 3 column template, but with some modification to allow things like image Header, AdSense ads and search boxes, "sticky post", etc., to be added to the blog. If you are interested in how to do it, refer to Adding graphic to your New Blogger blog Header and New Blogger: Adding AdSense ads, search box, "sticky post", etc. to the Main Column

If you are viewing Work at Home Articles with a wide screen, you will notice blank spaces on both sides of the contents. If you want to observe how someone with 800x600 screen resolution view that blog, type or copy-paste javascript:top.resizeTo(800,600) into the address bar of the browser and press the enter key. The screen will resize to 800x600 pixels and you will notice that the whole width of the blog fits nicely into the screen. So if a significant number of your blog visitors are still using the 800x600 screen resolution, you may want to use this template in consideration of those with small screens. (You can get such information (percentage visitors using various screen resolution) by installing a hit counter like Statcounter.

If you are viewing that blog with a wide screen and you are bothered by the blank space, look at this blog which also uses a modified 3 column template: Blogger Articles but with a wider content. If you put javascript:top.resizeTo(800,600) into the address bar and press ENTER, the window will resize and you will see that part of the right sidebar is hidden, and if you want to view that, you will have to use a horizontal scrollbar at the bottom of the page.

You can get the template for the wider Denim 3 column fixed width template by referring to New Blogger 3 column templates modified by Charlemagne Stavanger of Blogcrowds (click "BACK" button to get back to this page). There are lots of other 3 column templates, some with fixed width, some with fluid width (main column resize to fit screen resolution).

Hackosphere's 3 column Dots Dark template

Here is a blog which uses Hackosphere's 3 column Dots Dark template: Articles on Real Estate but modified to allow me to add an AdSense link unit to the top of the main column. If you want to do that, get the instruction from How to add AdSense search box, "sticky post", etc., to the top of your blog main column

More New Blogger templated


New Blogger template modified by Stavanger
Dots New Blogger template with Header
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
New Blogger templates by BloggerBuster

Friday, April 06, 2007

How to get free traffic to your blog

This is how you can get 100 free visits to your blog. If you are not already a member of BlogExplosion, join it now, then write a post in your blog with at least 2 paragraphs and 3 active links to any of the blogs below (homepage or individual post page, ie., permalink). When you are done, comment in this post giving the link to the post and your BlogExplosion user-name, and I will transfer 100 credits (which means 100 visits) to your BlogExplosion account if your blog PageRank is 1 and above, and 50 credits if your blog PageRank is 0. You can write anything. You can praise them, just describe them, or even criticise them. However, the post must be a permanent post, and not deleted after you get your free credits.

I have been getting posts with just a few lines and the minimum 3 links. It will be greatly appreciated if you can write more, especially if you find this blog helpful. I find this blog has been helpful from the comments I have received, and I have created a special post to record them. You can see them at Comments about Blogger Tips and Tricks (click BACK button to get back to this page).

The blogs that I am referring to are:
http://bloggerfordummies.blogspot.com
http://blogger-tricks.blogspot.com
http://testing-blogger-beta.blogspot.com
http://dummies-guide-to-google-blogger.blogspot.com

Important note: Those who are AdSense account holder and have AdSense ads in their blog should know that AdSense don't encourage traffic coming from traffic exchange programs like BlogExplosion. I have written to AdSense Help about it and they are vague about whether they allow BlogExplosion. I myself now do not use BlogExplosion to get traffic to my blogs which have AdSense ads.

Update 7 April 2007: Atul of Masti World gave a very good suggestion (see comments). Use BlogExplosion to build up your readership first, then put AdSense ads. This may make sense because BlogExplosion is a bit selective. If they find too many ads on your blog, they may not accept. Further, there is still the question of whether you want to risk your AdSense account.

Tuesday, April 03, 2007

Dots 3 column with header template for New Blogger

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template

There is a previous post New Blogger 3 column templates modified by Charlemagne Stavanger (click "BACK" button to get back to this page). However, the post is becoming very long, and the Dots template posted there has no Header. So here is a new post about another New Blogger template.

This blog Alternative Medicine Articles is an example of Dots 3 column template for New Blogger that has a Header. It was modified mostly by Charlemagne Stavanger of Blogcrowds, but with some input from me. With Stavanger's permission, I put the template below for your convenience. The template has been modified to have 2 additional "Add a Page Element" - one for the Header, and one for the main column. With that modification, I have managed to put an AdSense link unit just below the title in the above blog, and a disclaimer plus a sitesearch box above the main column.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Dots
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 24 Feb 2004
Updated by: Blogger Team

Modified By
Designer: Charlemagne Stavanger
URL: http://www.blogcrowds.com/
Support: http://www.blogcrowds.com/
----------------------------------------------- */

/* Variable definitions
====================
<Variable name="textcolor" description="Text Color" type="color"
default="#333" value="#333333">
<Variable name="pagetitle" description="Blog Title Color" type="color"
default="#353" value="#335533">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#996" value="#999966">
<Variable name="posttitle" description="Post Title Color" type="color"
default="#996" value="#999966">
<Variable name="linkcolor" description="Link Color" type="color"
default="#488" value="#448888">
<Variable name="vlinkcolor" description="Visited Link Color" type="color"
default="#885" value="#888855">
<Variable name="dateheadercolor" description="Date Header Color"
type="color" default="#663" value="#666633">
<Variable name="sidebartitle" description="Sidebar Title Color" type="color"
default="#663" value="#666633">
<Variable name="borderColor" description="Border Color"
type="color" default="#9b9" value="#99bb99">
<Variable name="bodyfont" description="Text Font" type="font"
default="normal normal 100% Verdana,Arial,Sans-Serif" value="normal normal 100% Verdana,Arial,Sans-Serif">
<Variable name="pagetitlefont" description="Blog Title Font" type="font"
default="normal normal 250% Georgia,Serif" value="normal normal 250% Georgia,Serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 100% Verdana, Arial, Sans-Serif" value="normal normal 100% Verdana, Arial, Sans-Serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font" default="normal normal 95% Georgia, Serif" value="normal normal 95% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font" type="font"
default="normal normal 100% Georgia,Serif" value="normal normal 100% Georgia,Serif">
*/
body {
margin: 0px 0px 0px 0px;
background:#fff url("http://www.blogblog.com/dots/bg_dots.gif");
background-position: 50% 31px;
text-align:center;
font:x-small Verdana, Arial, Sans-serif;
color:$textcolor;
font-size/* */:/**/small;
font-size: /**/small;
}


/* Page Structure
----------------------------------------------- */
#outer-wrapper {
width:890px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
width:890px;
height:50px;
margin-bottom:20px;
background: #fff url("http://www.blogblog.com/dots/bg_dots2.gif");
}

#header{padding:0 20px 2px;background: #fff
url("http://www.blogblog.com/dots/bg_dots2.gif") -5px 0px;}

#main-wrapper {
width:450px;
float:left;
margin:0 10px;
padding:0 0 20px;
font-size:85%;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}
#main {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -100px
-100px;
padding:20px 10px 15px;
}
.sidebar-wrapper {
width:200px;
float:left;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in
IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}
.sidebar {
background:url("http://www.blogblog.com/dots/bg_dots2.gif") -50px
10px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

/* Title & Description
----------------------------------------------- */

.Header h1 {
margin:0 0 .5em;
line-height: 1.4em;
font: $pagetitlefont;
color: $pagetitle;
}
.Header h1 a {
color:$pagetitle;
text-decoration:none;
}

.Header .description {
margin:0 0 1.75em;
color: $blogDescriptionColor;
font: $blogDescriptionFont;
}


/* Links
----------------------------------------------- */
a:link {
color:$linkcolor;
}
a:visited {
color:$vlinkcolor;
}
a:hover {
color:$vlinkcolor;
}
a img {
border-width:0;
}


/* Posts
----------------------------------------------- */
h2.date-header {
margin:0 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
text-transform:uppercase;
letter-spacing:.3em;
color: $dateheadercolor;
font: $dateHeaderFont;
}
.post {
margin:0 0 2.5em;
}
.post h3 {
margin:.25em 0;
line-height: 1.4em;
font: $headerfont;
font-size: 130%;
font-weight: bold;
color:$posttitle;
background:url("http://www.blogblog.com/dots/bg_post_title.gif")
no-repeat 0 .25em;
padding:0 0 1px 45px;
}

.post h3 a {
text-decoration:none;
color: $posttitle;
}
.post h3 a:hover {
color: $textcolor;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin:0;
}

.uncustomized-post-template .post-footer {
text-align: right;
}

.uncustomized-post-template .post-author,
.uncustomized-post-template .post-timestamp {
display: block;
float: left;
margin-right: 4px;
text-align: left;
}

.post-author, .post-timestamp {
color:$posttitle;
}

a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
so we hide these two declarations from it */
background/*
*/:/**/url("http://www.blogblog.com/dots/icon_comment.gif") no-repeat 0 .25em;
padding-left:15px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/dots/icon_comment.gif")
no-repeat 0 .25em;
padding-left:15px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid $borderColor;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

/* Comments
----------------------------------------------- */
#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
border-top:1px dotted $borderColor;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:url("http://www.blogblog.com/dots/icon_comment.gif")
no-repeat 2px .35em;
margin:.5em 0 0;
padding:0 0 0 20px;
font-weight:bold;
}
.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-footer {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}


/* More Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin:2em 0 .75em;
padding-bottom:.35em;
border-bottom:1px dotted $borderColor;
line-height: 1.4em;
font-size: 95%;
font: $headerfont;
text-transform:uppercase;
letter-spacing:.3em;
color:$sidebartitle;
}
.sidebar p {
margin:0 0 .75em;
line-height:1.6em;
}
.sidebar ul {
list-style:none;
margin:.5em 0;
padding:0 0px;
}

.sidebar .widget {
margin: .5em 0 1em;
padding: 0 0px;
line-height: 1.5em;
}

.main .widget {
padding-bottom: 1em;
}

.sidebar ul li {
background:url("http://www.blogblog.com/dots/bullet.gif") no-repeat
3px .45em;
margin:0;
padding:0 0 5px 15px;
}
.sidebar p {
margin:0 0 .6em;
}

/* Profile
----------------------------------------------- */
.profile-datablock {
margin: 0 0 1em;
}

.profile-img {
float: left;
margin: 0 8px 5px 0;
border: 4px solid #cc9;
}

.profile-data {
margin: 0;
line-height: 1.5em;
}
.profile-textblock {
clear: left;
margin-left: 0;
}

/* Footer
----------------------------------------------- */
#footer {
clear:both;
padding:15px 0 0;
}

#footer p {
margin:0;
}

/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}
body#layout #sidebar, body#layout #sidebar-wrapper {
padding: 0;
width: 240px;
}
]]></b:skin>
</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='content-wrapper'>

<div class='header-wrapper'>
<b:section class='header' id='header' preferred='yes' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='Alternative Medicine Articles (Header)' type='Header'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList1' locked='false' title='Link' type='LinkList'/>
</b:section>
<p>Modified By <a href='http://www.blogcrowds.com/'>Blogcrowds</a></p>
</div>

<!-- spacer for skins that want sidebar and main to be the same
height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> <!-- end outer-wrapper -->
</body>
</html>


For other New Blogger 3 column templates, refer to
New Blogger 3 column templates modified by Stavanger

Dots New Blogger template with Header

New Blogger templates modified by Ramani

New Blogger templates by Isnaini

New Blogger templates by Thur

Ramani's New Blogger Neo template

New Blogger template by Final Sense

New Blogger templates by BloggerBuster

Monday, April 02, 2007

Migrating an old classic Blogger template to the New Blogger template

This post is in response to a blog reader comment that seem to indicate he is still using the old classic template in a New Blogger account, but want a Link List in the sidebar which is only available for blogs using the New Blogger template.

When you migrate your old classic Blogger account to the New Blogger account, your blogs will still be using the old classic template. To take advantages of the new features of a New Blogger template, you will have to upgrade your old classic template to the New Blogger template.

Sign into Dashboard. You will see a list of blogs. Blogs with old classic template will have a link "Template" (circled in red in screenshot below) while blogs with New Blogger template will have a link "Layout (circled in red also):

Old Classic template and New Blogger template in the Layout

To upgrade to a New Blogger template, click on "TEMPLATE" and then below the TEMPLATE tab, click on CUSTOMIZE DESIGN, then click "Upgrade your template". You will then be presented with a choice of templates. Select one and save.

New Blogger customize design

Don't worry too much about your choice of template. You can easily change later. And if Blogger standard templates are not good enough for you, there are now plenty of New Blogger templates to chose from. Here are some of them (click BACK button to get back to this page:
New Blogger 3 column templates modified by Stavanger

Dots 3 column template with Header modified by Stavanger

New Blogger 3 column templates modified by Ramani

New Blogger 3 column templates by Isnaini

3 column New Blogger templates by Thur

Ramani's New Blogger Neo template

New Blogger templates by Final Sense.

(Note: Blogger will backup your classic template when you migrate to New Blogger template so that you can revert to your former template if you want, but it is advisable to also copy the template from the template editor, paste it into Notepad and save it. Not only will it serve as an extra backup, some of the customization you may copy-paste into the New Blogger Page Element or direct into the template depending on the case, thus making your task of getting your previous customization easier.

Search Engine Marketing

Search Engine Marketing is the term used to describe the range of marketing techniques required to make a website visible on search engines and directories so that it will attract visits from its target audience. This includes the optimisation of a site, the submission to directories, the use of 'pay-per-click' search tools and keyword related advertising.

If you are into serious blogging, especially business blogging, and you want more traffic to your blog, you will take search engine marketing seriously. It will involve efforts in getting inbound links to increase link popularity, optimization, submission to directories, etc. All this involve time and effort.

evisibility search engine optimization campaign offers a free site analysis if you want to find out how your site is faring. I submitted my site for analysis, and got a blank page, with the word "done" in the task bar and the URL http://www.evisibility.com/mailer.php in the address bar. So I suppose this is human operated and I will have to wait for my report.

There is also a controversy over which is better - CPC (Cost per Click) or SEO (Search Engine Optimization). The first is fast, cost money and is only for a limited period of time, that is, it will bring traffic while the CPC campaign last. The second takes time to show results, is free if you do it yourself and is able to get free inbound links, but cost money if you let professionals like e:visibility do it for you, takes more effort but is beneficial over a longer term.

e:visibility also have a blog with a post comparing the two at CPC or SEO: Which is better.

Sunday, April 01, 2007

New Blogger (formerly beta) 3 column templates modified by Stavanger

NOTE: Before you edit or change template, make sure you backup your curremt template PLUS Page Elements. Refer to Backing up current template PLUS Page Elements before changing new template

Update 21 May 2007: Stavanger of Blogcrowd has made a couple of changes for access to his templates. Now you have to register, sign in, made at least 3 posts in his forum (shouldn't be too difficult, make some posts regarding your blogs, may even provide links to your blog to increase exposure).

Backing up and changing template

Before changing or editing a template, it is always good practice to backup the current template so that if there is anything you are not satisfied with or if anything goes wrong, you can always revert to the previous situation. To backup the template, sign into the Dashboard, and in the relevant section of the list of blogs, click "Layout", then click the "TEMPLATE" tab, then click the "EDIT HTML" sub-tab which will open the template editor window. At the top of the page, click "Download Full Template" and save the template with a suitable filename into a suitable folder which you can easily remember.

To change to a new template from the selection below, in the same template editor window, click inside the window, press "ctrl + A" to highlight all the template codes and press the "delete" key and the template editor window will be empty, ready for you to paste the new template that you obtained from any of the choices below. Then in the page where the new template is given, click inside the codes, press ctrl+A to highlight all the codes, right-click and select "copy" to copy the new template to the clipboard, go back to the template editor, click inside the template editor window, right-click and select "paste". Make sure the last 2 lines of the template is

</body>
</html>

All these is best done with a browser that has tabbed browing like FireFox which is one of two browsers recommended by Blogger. You can download and install FireFox with Google toolbar by clicking on "Browse the web better with Firefox with Google toolbar" at the top of the right sidebar of all my blogs. Then you can have the template editor window opened in one tab and Stavanger's template page opened in another tab.

Fixed and fluid width templates and screen resolution

Templates can have either fixed or fluid width. Blogs using a fluid template will have its main column width adjusted according to the screen width so that there is no need to scroll horizontally. The disadvantage of a template with a fluid template is that the appearance of the blog will change with the screen resolution, and a photo or table which may appear OK in a large screen may cause the sidebar to slide to the bottom of the page. Fixed width template however, will appear the same in all screen resolutions, but for a smaller screen, you may have to scroll horizontally to see the rest of the right sidebar. The template I am using is a center fixed width template. If you are using a larger screen to view this blog, you may see white spaces on both side of the content. If you want to observe how a visitor with a smaller screen (800x600 screen resolution) sees this blog type or copy-paste javascript:top.resizeTo(800,600) into the address bar and press the enter key. You can do the same thing with all the example blogs given below

Update 25 March 2007: In some of the Layout of the templates given below, you may have some Layout where the EDIT link of the right sidebar Page Elements are not visible. Scroll down the page, and you will see a horizontal scrollbar. Scroll to the right, and you will be able to see the EDIT link of the Page Elements.

New Blogger 3 column fixed and fluid templates

Here are some examples of blogs using the new 3 column Blogger (formerly beta) templates modified by Stavanger of Blogcrowd Forum. Note that the template you download will be slightly different from the ones I used for the examples. I have added 2 extra "Add a Page Element" in the Header and at the top of the main column which I have used to add AdSense Ad units, link units and Goggle sitesearch bars. If you want to know how it is done, refer to Adding graphic, advertisement, etc., to the blog New Blogger blog Header and New Blogger (formerly Blogger beta):How to add AdSense ads, search box, "sticky post", etc. to the top of the main column.

Thisaway Rose 3 column fixed New Blogger template

Here is an example of a blog using the Thisaway Rose template by Dan Rubin for the new Blogger (formerly beta) blogs modified to a 3 column fixed width template by Stavanger :Articles for Women

You can download the template from Thisaway Rose Fixed 3 Column template.

Thisaway Green fixed width 3 column new Blogger (formerly beta) template

Here is an example of a blog using Thisaway Green template by Dan Rubin for the new Blogger (formerly beta) modified by Stavanger to a 3 column fixed width template: Articles for Men

You can download the template from New Blogger 3 column Thisaway Green template

Thisaway Blue 3 column fixed width new Blogger template

Here is an example of a blog using the Thisaway Blue template by Dan Rubin for the New Blogger (formerly beta) modified to a 3 column fixed width template by Stavanger: Articles for Family.

The template can be downloaded here: [BLOGGER BETA] Thisaway Blue Fixed 3 Column template.

Thisaway New Blogger 3 column fixed width template

Here is an example of a blog using the Thisaway template for new Blogger (formerly beta) by Dan Rubin modified to a 3 column fixed width by Stavanger: Articles for Education

The template can be downloaded here: [BLOGGER BETA] Thisaway Fixed 3 Column template.

Minima 3 column fixed width New Blogger template

DIY (Do It Yourself) Articles is an example of a blog using the Minima 3 column fixed width New Blogger template modified by Stavanger. This 3 column minima template is different from Thurs Old Classic 3 column Minima template in that this one is an old classic template, and also the it has a fluid main column width wheras Stavanger's 3 column Minima template is for the New Blogger and has a fixed width. This was the template I used for the blog Blogger for Dummies which I may switch the template to Stavanger fixed width template in the near future. If you want to see the difference, surf over to both DIY (Do It Yourself) Articles and Blogger for Dummies and type or copy-paster

javascript:top.resizeTo(800,600)

into the address bar and press enter. You will see a difference.

The template for the Stavanger Minima 3 column fixed width New Blogger template can be obtained from Stavanger Minima template.

Update 15 April 2007: A blog reader complained that she had problem with the template given in the link above. I tested it and found that what she said was true. Although I had used it before without problem, for some unknown reason, the template cannot be previewed or saved now. I thus have uploaded the backup template of DIY Articles to the Google Photostore group and renamed it "Stavanger's 3 col Minima template.xml". Right click on the file and select "Copy link as.." and download it to your computer. Then go to your Dashboard, click LAYOUT, then EDIT HTML, then BROWSE to the file you downloaded and click UPLOAD. I have tested it on the blog Just for testing only and have confirmed that it worked.

Update 16 April 2007: Got an email from Stavanger who said he tested it and found it OK. I did a retest and found that to be true.

Minima Black 3 column fixed width New Blogger template

Guide to Thailand is an example of a blog using the Minima Black 3 column fixed width New Blogger template modified by Charlemagne Stavanger.

The template can be obtained from Minima Black template

Minima Blue 3 column fixed width New Blogger template

Guide to Singapore is an example of a blog using the Minima Blue 3 column fixed width New Blogger template modified by Charlemagne Stavanger.

The template can be obtained from Minima Blue template

Minima Ochre 3 column fixed width New Blogger template

Guide to Japan is an example of a blog using the Minima Ochre 3 column template modified by Charlemagne Stavanger.

The template can be obtained from Minima Ochre template

565 3 column fixed width New Blogger template

Guide to China is an example of a blog using the 565 3 column fixed width New Blogger template modified by Charlemagne Stavanger. Note that the blog has no footer.

The template can be obtained from 565 New Blogger template.

897 3 column fixed width New Blogger template

Guide to Australia is an example of a blog using the 897 3 column fixed width New Blogger template modified by Charlemagne Stavanger. Note that there is no footer.

The template can be obtained from 897 New Blogger template

Scribe 3 column fixed width New Blogger template

Guide to Hawaii is an example of a blog using the Scribe 3 column fixed width New Blogger template modified by Charlemagne Stavanger.

The template can be obtained from Scribe 3 column template.

Herbert 3 column fluid width New Blogger template

Computer, Internet and SEO (Search Engine Optimization) is a blog using the Herbert 3 column fluid width New Blogger template modified by Stavanger of Blogcrowd Forum. If you want to observe how a visitor with a small screen 800x600 screen resolution view the blog, type or copy-paste javascript:top.resizeTo(800,600) into the address bar at the top of the page of the above blog and press the enter key. The window will be resized to 800x600px.

The template can be obtained from Herbert, Blogcrowd Forum. To copy the template into the clipboard, click inside the codes and press ctrl+A to highlight all the codes, then right-click and select "copy".

Sand Dollar 3 Column fixed width New Blogger Template

Here is an example of a blog using the Sand Dollar New Blogger (formerly beta) template modified to a 3 column fixed width template: Food, Drinks and Recipe.

You can get the template from Blogcrowd forum here: [BLOGGER BETA] Sand Dollar Fixed 3 Column template.

Note that there is no footer. (With the help of Stavanger, a footer has been added to the template. If you want the modified template, email me).

Tic Tac 3 Column Fixed New Blogger Template

Here is an example of a blog using the new Blogger (formerly beta) template modified to 3 column fixed width by Stavanger of Blogcrowd Forum: Articles on Relationship.

The template can be obtained from here: [BLOGGER BETA] Tic Tac Fixed 3 Column template

Tic Tac Blue 3 column fixed New Blogger template

Good Gardening Articles is an example of a blog using the Tic Tac Blue 3 column fixed width New Blogger template modified by Stavanger.

The template can be obtained from Tic Tac Blue 3 column template

Ms Moto 3 column Fixed width New Blogger Template

Here is a blog using the new Blogger (formerly beta) Ms Moto template modified to 3 column fixed width: Pets and Animals

You can get the template from here: [BLOGGER BETA] Ms. Moto Fixed 3 Column template.

Mr Moto 3 column Fixed Width New Blogger Template

Here is a blog using the New Blogger (formerly beta) Mr Moto template (Ellington style) by Jeffrey Zeldman modified by Stavanger of Blogcrowd Forum: Good Education Article.

The template can be obtained from here: [BLOGGER BETA] Mr. Moto Fixed 3 Column template.

Son of Moto 3 column Fixed Width New Blogger Template

Here is a blog using the New Blogger (formerly beta) Son of Moto by Jeffrey Zeldman modified to a 3 column template: Good Business and Finance.

The template can be obtained from [BLOGGER BETA] Son Of Moto Fixed 3 Column template.

Rounders New Blogger 3 column fixed width template

Kids and Teens Articles is an example of a blog using the Rounders 3 column fixed width template modified by Charlemagne Stavanger.

You can get the template from Rounders. To copy the template, click inside the code, press ctrl+A keys to highlight all the codes, right-click and select copy to copy to clipboard.

Rooundes2 New Blogger 3 column fixed width template

Here is a blog using the New Blogger Rounders2 3 column fixed width template by Douglas Bowman modified by Charlemagne Stavanger: World Traveller Guide.

The template can be obtained from Blogcrowd Forum: Rounders2 3 column template

Rounders3 3 column New Blogger template

Here is a blog using the New Blogger Rounders3 3 column fixed template by Douglas Bowman modified by Stavanger: Good Music and Movies.

The template can be obtained from Blogcrowd From at [BLOGGER BETA] Rounders 3 Fixed 3 Column template.

Rounders4 3 column fixed template

Here is a blog using the said template: Site Promotion Tips. It also demonstrate the reversed chronology archive hack where archive is displayed from the oldest to the newest.

Here is where you can copy the template: [BLOGGER BETA] Rounders 4 Fixed 3 Column template

Jellyfish 3 column New Blogger fluid width template

Here is a blog using the Jellyfish 3 column template by Jason Sutter modified by Stavanger: Articles on Marketing.

The template can be obtained from here: [BLOGGER BETA] Jellyfish Fluid 3 Column template

Snapshot Tequila 3 column New Blogger template

Here is an example of a blog using this template modified by Stavanger of Blogcrowd Forum: Good Tips and Tricks.

The template can be obtained from here: New Blogger Snapshot Tequila 3 column template

Snapshot Madder Fixed 3 column New Blogger template

Here is an example of a blog using this template modified by Charlemagne Stavanger of Blogcrowd Forum: Good Legal Information.

The template can be obtained from here: [BLOGGER BETA] Snapshot: Madder Fixed 3 Column template.

Snapshot Sable 3 column fixed width New Blogger template

Recreation and Sport is an example of a blog using the Snapshot Sable 3 column fixed width New Blogger template modified by Stavanger of Blogcrowd forum.

The template can be obtained from Snapshot Sable 3 column New Blogger template

Tekka 3 column New Blogger template

Here is a blog using the Tekka 3 column New Blogger template modified by Stavanger: Cancer Survival Articles.

The template can be obtained from here: Tekka 3 column template.

Denim 3 column fixed width template

Here is a blog using the Denim 3 column fixed width template by Darren Delaye modified by Stavanger: Blogger Articles.

The template can be copied from here: Blogcrowd Templates. The widths of the content width, etc of this template is as follows:

#header {
width: 975px;

#content-wrapper {
width: 975px;

#main-wrapper {
width: 464px;

.sidebar-wrapper {
width: 240px;

There is another blog Enviroman Says which uses the same template, but with the widths modified to accomodate the environmental cartoon. The cartoon size is 622x250 pixels. The widths have been modified to:

#header {
width: 1134px;

#content-wrapper {
width: 1134px;

#main-wrapper {
width: 644px;

.sidebar-wrapper {
width: 180px;

If you want a template with which you don't want to worry about the width of the photos, tables, etc that you post, you should get a template with 2 sidebars on the left and the main content on the right, like this blog: Blogging Ideas. There is a large photo of size 1013x1024 in the blog, in particular, in this post: Dayak Cultural Dance, Malaysia

The 3 column Denim in Stavanger's Blogcrowd site has one sidebar on the left and the other sidebar on the right. If you want the template like the above blog, you will have to email me by clicking on the "Click here to eMail me" link near the bottom of the left sidebar.

Denim Light fluid width 3 column New Blogger template

Furniture Center is an example of a blog using the Denim Light fluid width 3 column New Blogger template modified by Charlemagne Stavanger.

The template can be obtained from Denim Light template

Denim Washed fixed width 3 column New Blogger template

All Wood is an example of a blog using this template.

The template can be obtained from Denim Washed 3 column template

Habor 3 column fixed width New Blogger template

Here is an example of a blog using the Habor 3 column fixed width New Blogger template: Home Business Articles.

The template can be obtain from Blogcrowd Forum.

Dots 3 column fixed width New Blogger template

Here is an example of a blog using the New Blogger Dots 3 column template modified by Charlemagne Stavanger: Good Advertising Articles. Please note that the "Page Elememts" of the right sidebar is partially hidden and the EDIT button is not visible. You can get a screenshot of the Layout from Dots 3 column template Layout. However, after some tinkering, I found that there is a horizontal scrollbar at the bottom of the layout. To get access to the EDIT link, scroll to the right.

The Dots 3 column template can be obtained from here

Also, note that the blog has no Header. For Dots 3 column with header template, refer to Dots 3 column with Header template for New Blogger (click "BACK" button to get back to this page).

Dots Dark 3 column fixed width New Blogger template

Here is an example of a blog using the New Blogger Dots Dark 3 column fixed width template modified by Charlemagne Stavanger: Technology Articles. The remarks for Dots template above also apply to this template.

The template can be obtained from here.

Update 25 March 2007: If you can't see the EDIT link in the right sidebar of the Layout, scroll down the Layout page, you will see a horizontal scrollbar. To get to the EDIT link of the right sidebar Page Elements, just scroll to the right.

More New Blogger templated

Dots New Blogger template with Header
New Blogger templates modified by Ramani
New Blogger templates by Isnaini
New Blogger templates by Thur
Ramani's New Blogger Neo template
New Blogger template by Final Sense
New Blogger templates by BloggerBuster

  NEWER POST    HOME  OLDER POST

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