Add translator to your blog

Got a question from a reader who is now doing her blog twice, once in English and once in her language. She asked if it is possible to do it only once, and have something to click on to read the site in another language. I know of 2 reputable possibility – AltaVista Babelfish and Google Translator widget. You can see example of implementation of this at the bottom of the left sidebar of these two blogs:

Natural Remedies

Good Health Information

It is not difficult to do.

Google Site Translator widget
Google Translator widget was added to the first blog above. To get the widget, first make sure you are signed into your Blogger account (it may be possible to do it while not signed in, and then sign in when getting the widget. I haven’t tested this as I am always signed into my Blogger account when I am online and don’t want to waste time to sign out and test this possibility). Then go to Google Site Translator widget. You will see the following:

Google site translator widget

The “Name” (Title) is already added as “Google Site Translator” for you. You can change this to whatever you want or even make it blank. It does not do anything. There is also a drop down menu to select the language of your blog. There are only 5 choices, English, French, German, Spanish and Italian. You can also change the text color. The default is #000000 which is the hexadecimal color code for black. If you want, you can change it to other colors to blend with the colors of your site. For this purpose, I find ColorPic to be an indispensable tool (and it is free). If you want the tool, just type or copy-paste “ColorPic” into the searchbox above and tick the radio button beside WEB and search. The site to get ColorPic should be the first result in the SERP (search engine result page).

When you are ready, click “Get widget” and you will get a “pop-up” where you can select what application to add the widget:

In our case, we should click on “Add to Blogger” and the “pop-up” change where you will see a button “Install Panel”. Click on that and you will get a new window “Add Page Element” with a “Select a blog” drop down menu, and when you click the down arrow, you will see all your blogs in that Blogger account. Select the one you want to install the widget in. There will be a box for you to enter the Title. You can make this blank if you want. In my case, I change the default title to “Translate this page”. On second thought I think leaving it blank or making it “Translate this site would have been better. Then just click “Add widget”

Google site translator add widget button

The Google site translator widget will be added to the top of your sidebar. If you don’t want it it that location, hover your mouse over the first Page Element in the sidebar (the cursor will change to a cross) and drag it to wherever you want. In my case, I dragged it to the bottom of the left sidebar. Click “Save” at the top right of the LAYOUT and when saving is complete, you can click “View Blog” to see the result.

Update 15 September 2007: A reader asked about the possibility of changing the dimensions of the Google Site Translator widget. Unfortunately, this widget in not given in the usual way, that is, a script is generated for you to paste into your Page Element. If it is done this way, you can try to alter the dimensions before you paste it into a HTML/Javascript Page Element.

However, not all is lost. I tried to look for a blog which has sidebar width different from Natural Remedies and found one at World Traveller Guide. This blog uses the Rounders3 New Blogger template modified to 3 column by Blogcrowd

By opening the template editor window of this blog, I found this block of code

.sidebar-wrap {
margin:15px 0 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

which tells me that the width of the sidebar 1s 240 pixels.

I first installed the Google Site Translator widget into this blog. While logged into Blogger account, I went to the blog World Traveller Guide and clicked on the screwdriver & wrench quick edition icon (highlighted with red circle) for the Google Site Translator Page Element (it is at the bottom of the left sidebar).

Google site translator with quick editing icon

This opened the HTML/Javascript Page Element containing the script for the Google Site Translator widget. The script is shown in the scroll box below:

This looks like a problem to me because the dimensions are specified as width=”0″ which is strange. Just as a test, I tried to change the width by replacing “0” with width=”230″ (slightly less than 240 pixels) and ended up with the script:

This made no difference to the dimension of the Google Site Translator. I tried once more time by changing the height from height=”0″ to height=”500″ as well, but this still didn’t change the dimension of the Google site translator. So I am afraid I have to disappoint that blog reader and admit I don’t know how Google Site Translator controls its dimensions. I believe it will be a different story with AltaVista Babel Fish Translation which give you the script to paste into a HTML/Javascript yourself rather than adding it direct into Blogger.

AltaVista Babel Fish Translation
The blog, Good Health Information demonstrate this. To add this translation, go to Babel Fish Translation. You can translate a block of text or translate a site by typing in the URL of the site. However, if you want visitors to your blog to be able to just click and translate your blog, you will have to click the “Babel Fish Translation” link in AltaVista Babel Fish Translation link.

In the resulting page, there were 2 choices – “Translate any text or pages” and “Translate your page”. I know what the second one will do, so I tried clicking button in that section. Nothing happened. In the second section, you will first have to select the language of your site from the drop down menu. I click the same button as above in this section. Got a pop-up with the script to add to the blog. Copied the script. Actually, this script can be used in any blogs. So if you have multiple blogs where you want this translation feature, you can paste the script into Notepad file, get the script whenever you want, click ADD A PAGE ELEMENT, select HTML/Javascript Page Element and click “Add to blog”, paste the script into the box and click “Save changes”. The Babel Fish Translation tool will be added to the top of the section where you click ADD A PAGE ELEMENT, normally the sidebar. Again, if you want it elsewhere, hover your mouse over the top Page Element. Cursor will change to a cross. Drag the new Page Element to wherever you want. Click “Save” at the top of the LAYOUT. When saving is done, click VIEW BLOG to make sure everything is as you want it.

Leave a Comment

Your email address will not be published.