Search This Blog

Wednesday, September 12, 2007

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:

<script src="" type="text/javascript"></script><noscript>Get great free widgets at <a href="">Widgetbox</a>!</noscript><img border="0" style="visibility:hidden;width:0px;height:0px;" width="0" src="" height="0"/>

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:

<script src="" type="text/javascript"></script><noscript>Get great free widgets at <a href="">Widgetbox</a>!</noscript><img border="0" style="visibility:hidden;width:230px;height:0px;" width="0" src="" height="0"/>

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.


  1. It's another very useful post :)
    By the way, for my no-blog translations I always go to Altavista to.
    However this subject gives me another question:
    Let's say that there is a blog about earning money online in English. Everything on it is in English and we add the site translation.
    What is the possibility that the blog will attire attention of those no-English speakers?
    If we want to address ourself to i.e. French net surfers, shouldn't we create another blog in French language directly?
    I hope that I was clear, especially with those site translations I've found how much work I need to put in my English texts, meaning mostly grammar and style.. :(
    Best regards Peter,
    hope that I don't bother you to much.

  2. Thank you for this post. I have always wanted to share my blog with my in-laws but they don't speak English. This will help bridge the language gap that we have. I really appreciate you sharing.

  3. I had tried adding the google trnaslator in my blog and it works well the problem is, it's too big, is there anyway of making it a little smaller? thnx.

  4. Hi Kylyne,

    I tried. See updated post. I am afraid I have to disappoint you as I see no way of changing the dimension of the Google Site Translator. I am sorry.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

  5. Too bad that nothing can be done about it, thank's for trying though, it is very much appreciated.

  6. Hi Peter,

    Thanks for the informative site. My question is specifically about using the Babel Fish translator. For one choice, it gives you the dimensions. I'd prefer to use this one, but it won't translate the items in boxes (I'm using iWeb), so I'm trying the drag & paste translator, but it doesn't give me the dimensions. I tried the same as the other one, but it's not working. If you have any suggestions, I'd be so appreciative.

  7. Hi Signe,

    I am afraid I am not familiar with iWeb. Sorry.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

  8. Which translator do you have on your blogger? It doesn't look like the one on widget box.

  9. This post is a year old and within that year I must have changed template at least twice. The translation widget is from Google Translator.

  10. Anonymous5:12 AM

    I have my own translate widget which can be resized you can find it at
    The Article Store Translation Tool

    Hope you find it useful

  11. there is also ultimate translator in over 30 languages on

  12. Anonymous10:51 PM

    I am trying to put a calendar on my blog and it is not working. I want to put it at the top of the blog under the name of the blog so everytime people open it they will see it. It will be an interactive calendar to provide rides for my friend Randi. Can you help?

  13. I can't do anything without information on what calendar which is not working. And when you say "below the header, can I assume with a gadget below the Header like the custom search box cum information at the top of the main column in this blog.

  14. actually google machine translation is not perfect. there are lots of
    funny examples. Just see how it translates into Russian the famous city
    "Moscow"!!! I think if you are serious about your blog or web-site,
    you should use professional translation services.

  15. Thanks for share easy way of add translator.

  16. Thanks for share easy way of add translator in a blog/site.



Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by

Disclaimer: This blog has no relation with Wiley Publications