Google Translate is a free multilingual machine translation service developed by Google, to translate text written in a website from one language into another. It offers a huge list of languages to translate and has a very efficient, reliable and easy way to translate the webpage in whatever language the user wants. Google Translate supports over 100 languages at various levels.
We will use a cdn path given by google to implement the google translator in our page. Just follow the whole tutorial and you would be able to add it in any page you want.
We will implement it in a simple web page but you can make a beautiful design and then place the translator button properly. Look below-
Step 1 : Add a
<div> element with the id
google_translate_element. No need to panic it is a predefined id in the google's script, we will add the script's CDN path in the next step.
Step 2 :Set the CDN path to the translate API at google.com. This CDN will only work if you have an active internet connection otherwise not. So, pay your bills at time.
And now you are ready to translate the content of the page. Go to the editor to see the effects of the Translator. Click on Try This Code
Click on the dropdown button to translate.
Translate this page:
You can translate the content of this page by selecting a language in the select box.
Suppose If you want to change only one paragraph and want others to remain in the default language then what would you do?
It is very easy, you just have to add a class in the paragraph which you don't want to translate. There are two classes "translate" and "notranslate" which will help you. If you use "translate" in any paragraph as a class then, it will allow the translation of the content in that paragraph but if you use "notranslate" then the translation will not occur.
Look at the example below to understand it easily. Try it in the Editor.
Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.