Do you use the Google Website Translator on your website, but hate the way it looks? Do you wish you had complete control over the style and formatting of the dropdown? Well now you can! Unlike other language managers, this plugin AUTOMATICALLY translates your webpage using Google Translate.
When I wake up in the morning And the alarm gives out a warning I don't think I'll ever make it on time By the time I grab my books And I give myself a look I'm at the corner just in time to see the bus fly by It's alright 'cause I'm saved by the bell If the teacher pops a test I know I'm in a mess And my dog ate all my homework last nite Riding low in my chair She won't know that I'm there If I can hand it in tomorrow, it'll be all right It's alright 'cause I'm saved by the bell (short instrumental part) It's alright 'cause I'm saved by the It's alright 'cause I'm saved by the It's alright 'cause I'm saved by the bell
The actual Google Website Translator gets embedded on your site using an iFrame which makes it difficult to style items. Using a small jQuery script, we generate that same list of languages using only HTML to give you complete control over how they are displayed on your website!
A "select language" button is positioned in the top right hand side of the screen. When clicked, the button reveals a menu on the left side that lists all 80 languages Google Translate currently supports!
If you wish to use the plugin out of the box, simply use the quick start files included with the download. After the code for the lanugages, there is a commented section that looks like this:
<!--put all your website content here!-->
<!--end content!-->
All of your website's content should go in that section!
By default, the quick start guide has all 80 languages enabled. To remove a language, locate in the code and remove the ENTIRE list-item from the opening <li> to ending </li>
Step 1: Add the Google Translate meta data to the header
<meta name="google-translate-customization" content="ed63b45a84fd002d-1a84c3b7b028a717-gadf24062a8f7fd39-20"></meta>
Step 2: Link the stylesheet
<link href="css/style.css" rel="stylesheet" type="text/css"
Step 3: Embed the required scripts in the header
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
<script type="text/javascript" src="js/translate.js"></script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Step 4: Embed the Google Translate script in the header
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', autoDisplay: false}, 'google_translate_element');
}
</script>
Step 5: Add the Google Translate and Select Language Button
<div id="google_translate_element"></div>
<div id="language-btn">Select Language</div>
Step 6: Adding languages
The languages are an ordered list nested within a container div
<div class="languages">
<ol class="translation-links"> Languages... </ol>
</div>
Each language item requires an anchor tag nested within a list-item.
<li><a href="#" >English</a></li>
In order for the script to determine which language you want to translate to, you need to set the data-lang property of the anchor tag. The property should MATCH the Google Language PREFIX. A few examples are given below and the complete list of prefixes is found above in the list of countries:
<li><a href="#" data-lang="ka">Georgian</a></li>
<li><a href="#" data-lang="de">German</a></li>
<li><a href="#" data-lang="el">Greek</a></li>
<li><a href="#" data-lang="gu">Gujarati</a></li>
Step 7: Adding flags (optional)
To add the flag icons before the language, you add a spantag with a class of the country whose flag you want to appear.
<li><a href="#" data-lang="de"><span class="germany"></span>German</a></li>
<li><a href="#" data-lang="el"><span class="greece"></span>Greek</a></li>
<li><a href="#" data-lang="gu"><span class="india"></span>Gujarati</a></li>
A list of included countries can be found in the images folder of the plugin!
Just because we have a popout list of all 80 languages doesn't mean you have to! The whole point of this plugin is to allow you to have complete control over the style! Simply edit or create any CSS that you wish!