Google Translate Widget

Add a Google Translate widget to your blog or website. This widget is powered by Google Translate, and gives your visitors the ability to view your pages translated in their own native languages with just a click. I wrote about the importance of such a widget in an earlier post, called Translate Your Websites Or Blog For Money. This post will assume you want this function or ability for your own site or blog and will give you the code to make it possible. Just find the style you wish to apply and then highlight and copy the code below the image for that style. Further instructions will follow the codes on how to install the code. This code should work for Blogger (Blogspot), Joomla, Wordpress, Drupal, and pretty much any other application, including its use in standard HTML static webpages.

Vertical (single column)

Code:

<!—GOOGLE TRANSLATE—>
<div align="left">

<!– Add English to Chinese (Simplified) BETA –>

<strong> GOOGLE TRANSLATE</strong><br/>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Czh-CN&hl=en&ie=UTF8'); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_chinese_s-1.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a>

<!– END English to Chinese (Simplified) BETA–>

<br/>

<!– Add English to French –>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cfr&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_french_s-1.png" height="24" title="Google-Translate-English to French "/> French</a>

<!– END English to French –>

<br/>

<!– Add English to German –>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cde&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_german_s-1.png" height="24" title="Google-Translate-English to German"/> German</a>

<!– END English to German –>

<br/>

<!– Add English to Italian –>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cit&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_italian_s-1.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>

<!– END English to Italian –>

<BR/>

<!– Add English to Japanese BETA –>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cja&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_japanese_s-1.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>

<!– END English to Japanese BETA –>

<br/>

<!– Add English to Korean BETA –>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cko&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_korean_s-1.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>

<!– END English to Korean BETA –>

<br/>

<!– Add English to Russian BETA –>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cru&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_russian_s-1.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>

<!– END English to Russian BETA –>

<br/>

<!– Add English to Spanish –>

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Ces&hl=en&ie=UTF8'); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://i305.photobucket.com/albums/nn236/blogmethemoney/_spanish_s-1.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>

<!– END English to Spanish –>

</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://www.blogmethemoney.com" target="_blank">+</a> <a href="http://www.blogmethemoney.com/2009/01/google-translate-widget.html" target="_blank">Grab this widget</a></small><br/>

</div>

Horizontal (single row)

Code:

<!–GOOGLE TRANSLATE–>
<div align="center">

<!– Add English to Chinese (Simplified) BETA –>

<!– END English to Chinese (Simplified) BETA–>

<!– Add English to French –>

<!– END English to French –>

<!– Add English to German –>

<!– END English to German –>

<!– Add English to Italian –>

<!– END English to Italian –>

<!– Add English to Japanese BETA –>

<!– END English to Japanese BETA –>

<!– Add English to Korean BETA –>

<!– END English to Korean BETA –>

<!– Add English to Russian BETA –>

<!– END English to Russian BETA –>

<!– Add English to Spanish –>

<!– END English to Spanish –>

</div>

Horizontal (2 row)

Code:

<!–GOOGLE TRANSLATE–>
<div align="center">

<!– Add English to Chinese (Simplified) BETA –>

<!– END English to Chinese (Simplified) BETA–>

<!– Add English to French –>

<!– END English to French –>

<!– Add English to German –>

<!– END English to German –>

<!– Add English to Italian –>

<!– END English to Japanese BETA –>

<!– Add English to Korean BETA –>

<!– END English to Korean BETA –>

<!– Add English to Russian BETA –>

<!– END English to Russian BETA –>

<!– Add English to Spanish –>

<!– END English to Spanish –>

</div>

Horizontal (2 row, 6 x 2)

Google Translate Horizontal 2 Row 6 by 2

Code:

<!–GOOGLE TRANSLATE–>
<div align="center">

<!– Add English to Chinese (Simplified) BETA –>

<!– END English to Chinese (Simplified) BETA–>

<!– Add English to French –>

<!– END English to French –>

<!– Add English to German –>

<!– END English to German –>

<!– Add English to Italian –>

<!– END English to Italian –>

<!– Add English to Japanese BETA –>

<!– END English to Japanese BETA –>

<!– Add English to Korean BETA –>

<!– Add English to Russian BETA –>

<!– END English to Russian BETA –>

<!– Add English to Spanish –>

<!– END English to Spanish –>

</div>

How to add the Google Translate Widget to your blog or website:
Blogger (Blogspot)
1. Go to your Dashboard > Layout > Add a Page Element > HTML/JavaScript 2. Paste the code into the new element box 3. Add a title. (Ex: Translate, Translate this page, Google Translate ) *This is optional* 4. Save (or Save Changes). 5. Move the new element to the desired spot by drgging it with your mouse and again save.
Wordpress
1. Login to your Admin panel > Presentation tab > Widgets tab 2. Paste the code into the Text Widget. If there’s no Text Widget available, add one. 3. Add a title. (Ex: Translate, Translate this page, Google Translate) *This Is Optional* 4. Save.
Joomla site (CMS)
1. Login to your Admin panel > Modules - Site Modules > click New 2. Paste the code into the Custom Output content box 3. Adjust module details and menu item links if necessary 4. Click Apply or Save.
Drupal Site
unfortunately I have not used Drupal but I assume it is similar to Joomla.
Static Webpage
1. Open the page you wish the widget to show on in your editing software (Dreamweaver, MS, Amya, NVU, Notepad etc.) 2. Paste the code where you desire it to be (depending on software you may or may not have to play with the styling sheets or not to perfect the location) 3. Save the .html or .htm file

It should be noted that Google Translate is still in its beta phase. Some translations will return somewhat odd or funny at times as this service is not perfected but it is often translated quite well and your visitors will get the idea of what you were writing. Which is much better than being at a complete loss. If you are blogging or running a website with the goal to make money online, I suggest reading the article I just linked to in this sentence on why you should translate your site or blog.