Southern Listeners

Thanks to Greenlava for this cool gadget. Get yours here

Sunday, December 12, 2010

Google Translator Blogger Widget

You might have noticed the drop-down menu at the top-left section of my page. With this widget, I let my readers translate this site to over 50 languages without sending them to other websites, thanks to Google Translator. The Official Google Translator widget allows your reader to quickly and automatically view your page in a different language. In this quick tutorial, I'm gonna show you how you can add this Official Google Translator widget to your blog.

Step 1:

Make sure you're logged in your Blogger account first. Then, go to the following website:
Google Translate Tool
In Step 1, choose Add translation to the entire webpage.

Step 2:

Select the original language (the language that you use to write your posts) of your blog.

Step 3:

Click on Show Optional Settings, and you'll be able to see additional settings. You'll be able to choose which language you want your blog to be translated to (or all languages), the widget's display and some other settings. They are self-explanatory. The following is the settings that I have used for my widget.

Step 4:

Don't bother the codes. Click on the Add to Blogger logo.

Step 5:

If you have more than one blog, choose which blog you want to add this widget to. You can customize the title now, if you choose not to do it later.

Once you're done, click on 'Add Widget'. And that will be all. Have fun!


  1. i cant follow the instructions..huhu.
    Everytime i click the link u goes to my blog home(dashboard)
    It is must be like that?

  2. Cutie Kitty Hakmilik Mr.Myz: Thanks for heads up. I must have accidentally copied Dashboard's link. The link has been fixed now. Thanks again.

  3. its works! tyvm ;D
    i like ur blog ♥♥♥
    **thumb up**

  4. Cutie Kitty Hakmilik Mr.Myz: Glad it worked, thanks for stopping by.

  5. Hello enjoying the benefits of your expertise. Question re: the google translate gadget...I'v installed twice now as per your instructions but when I click on the dropdown arrow, the language list page flashes only momentarily, then a blank page opens in another tab. I'm using an awesome inc template. Thanks for any help.

  6. @Jim: Glad you're enjoying your stay here. I've checked your blog and it seems like something is wrong with the code that was generated to you. Here', try my code instead. Use the HTML/Javascript gadget for this purpose:

    <div id="google_translate_element" style='text-align:center;'></div><script>
    function googleTranslateElementInit() {
    new google.translate.TranslateElement({
    pageLanguage: 'en',
    autoDisplay: false,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
    }, 'google_translate_element');
    </script><script src="//"></script>


  7. Yoboy,
    Still the same. FYI, I recently modified the main page code to add dates to the top of each post. Maybe I did something wrong there? Or this possibly conflicts with "opening blog links in a seperate tab" modifications I also recently made. Your thoughts? And thank you for your patience. I realize you don't HAVE to do this! but I'm most appreciative that you do.

  8. Glad that you mentioned this. This is definitely due to the tweak (open blogger links in new tabs)

    You have two options now. You can either undo the tutorial and make your links to open in new tabs specifically (see the second part of the tab tutorial) or you can change the display of the translate gadget. In step 3 of the tutorial in this page, choose 'Automatic' as your display mode.

    I can't think of any other method, though I am very sure that you can modify the javascript of the translator gadget to force it open in the same tab. But Java isn't my cup of 'coffee'.


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

  10. @Hanna: It is not perfect, but it is the best free service around. If you really need a professional translation service for your website, you shouldn't probably be using Blogger or a blog in the first place. You should be getting a paid domain and hosting for your website. Blogging is supposed to be free and fun.

    Cheers and God bless.

  11. yeh - thank you so much for this simple explanation! cheers!

  12. Teşekkürler.Uygulamasını yapıcam


Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.