Google Translate Plug-in For Your Project

howto

(Akza) #1

Asalamualaikum,

hello guys, here i’ll give you’ll tutorial “How To Add Google Translate Plug-in On Your Project”. Before It, reason why i make this tutorial, maybe 'cause This One

and I really apologize for the messy writing on the post, so that someone doesn’t understand it. okay so the problem is how to add Google Translate Pugin on our android project. Actually in that post I mentioned that “it’s just an html document”, and because of that this tutorial will help you if you use an html document on your android project. okey lets start,

1. How to Get Google Translate Pulg-in
Actually you just need to add google Translate Javascript into your HTML Document, but How to get this code? Visit this site, follow step given and you’ll get It,
https://translate.google.com/manager/website/?hl=yi

Here you’ll get 3 style; Vertiacal, Horizontal, and dropdown only. I recomended you to choose "dropdown only, why? i’ll explain it on next

before it, if you wont visit this site and you want use my recomendation option style of This Plug-in you can use this code

<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, },
'google_translate_element');
}
</script>
<script
 src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Look at this code " pageLanguage: ‘id’ ", its your default page language. So change it with your language code (given below)

2. How To Custom It
why i customize it? Look at this Pict,
first Image

Second Image

Which looks better? Second image? Why? this is my reason, if you don’t customize it you will get an unresponsive design, top iframe or Google translate container (look at picture given). so if you want to do the same thing, you can follow this step or else you can directly add the Google Translate Javascript code that I gave you earlier (in the first step).

2.A. Add custom Jquery
Add this code after Head Tag and before skin tag on your html document:

<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Then after it, add this code after Google translate javasript code:

<script>
$('document').ready(function () {
$('#google_translate_element').on("click", function () {
// Change font family and color
$("iframe").contents().find(".goog-te-menu2-item div, .goog-te-menu2-item:link div, .goog-te-menu2-item:visited div, .goog-te-menu2-item:active div") //, .goog-te-menu2 *
.css({'color': '#000000', 'background-color': '#ffebee', 'font-family': '"Open Sans",Helvetica,Arial,sans-serif'});
// Change hover effects #d50000 = red
$("iframe").contents().find(".goog-te-menu2-item div").hover(function () {
$(this).css('background-color', '#d50000').find('span.text').css('color', '#ffffff');
}, function () {
$(this).css('background-color', '#ffebee').find('span.text').css('color', '#000000');
});
// Change Google's default blue border
$("iframe").contents().find('.goog-te-menu2').css('border', '1px solid #d50000');
$("iframe").contents().find('.goog-te-menu2').css('background-color', '#ffebee');
// Change the iframe's box shadow
$(".goog-te-menu-frame").css({
'-moz-box-shadow': '0 3px 8px 2px #666666',
'-webkit-box-shadow': '0 3px 8px 2px #666',
'box-shadow': '0 3px 8px 2px #666'
});
});
});
</script>

Actually not all of the code works depending on the browser being used, so you can remove code that doesn’t work

2.B. Add Custom Css
Add this css on your HTML skin or style Tag
#google_translate_element{position: realitve; top: 9px; right: 5px;}
.goog-te-gadget{font-size: 12px !important; font-color: white !important;}
.goog-te-gadget-simple{background-color: white !important; border-color: #d50000 !important;}
//Remove Google Logo//
.goog-te-gadget-icon{display:none !important;}
.goog-te-gadget-icon_inline{padding-top: 8px; max-height: 0; overflow: hidden; position: absolute; top: 110%; left: 0px; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; width: 135px; text-align: right; padding-top: 0; z-index:500;}
#google_translate_element img {display: transparent !important;}
//change color hover//
#google_translate_element span:hover {background: #d50000 !important; color: #ffffff !important;}
//remove to frame//
.goog-te-banner-frame.skiptranslate {display: none !important;}
body {top: 0px !important;}
/background: url(“url for the icon”) 0 0 no-repeat !important;/
}
/* Remove the down arrow /
/
when dropdown open /
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style=“color: rgb(0, 0, 0);”] {
display: transparent;
}
/
after clicked/touched /
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style=“color: rgb(0, 0, 0);”] {
display: transparent;
}
/
on page load (not yet touched or clicked) /
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style=“color: rgb(0, 0, 0);”] {
display: transparent;
}
/
Remove span with left border line | (next to the arrow) in Chrome & Firefox /
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style=“border-left: 1px solid rgb(213, 0, 0);”] {
display: transparent;
}
/
Remove span with left border line | (next to the arrow) in Edge & IE11 */
div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style=“border-left-color: rgb(213, 0, 0); border-left-width: 1px; border-left-style: solid;”] {
display: transparent;

2.C. Add Some Language
Look at the picture, what’s different? Yep, the language displayed. In the first picture more languages are displayed, but the problem is that the design is not responsive. So here I only display a few choices of languages that I consider important.

actually we can add a javasript code so that in the google translate container a scroll bar will appear which can help all languages appear. But still it doesn’t make the design responsive, it just adds a scroll bar. And here I want to look attractive so that’s the reason why I only display a few language options so that the design looks responsive.

Add this code in the google translate plugin:
includedLanguages: ‘ar, bn, de, en, eo, es, et, fr, hi, id, ja, ko, nl, pt, ru, sv, tr, zh-CN, zh-TW’

So your google translate plugin will be looks like this:

<div id="google_translate_element"></div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id', **includedLanguages: 'ar,bn,de,en,eo,es,et,fr,hi,id,ja,ko,nl,pt,ru,sv,tr,zh-CN,zh-TW',** layout: google.translate.TranslateElement.InlineLayout.SIMPLE, },
'google_translate_element');
}
</script>
<script
 src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

How about if we want to add another language? and how about the language codes? Look below

Language Name Code Language Name Language Code
Afrikaans af Irish ga
Albanian sq Italian it
Arabic ar Japanese ja
Azerbaijani az Kannada kn
Basque eu Korean ko
Bengali bn Latin la
Belarusian be Latvian lv
Bulgarian bg Lithuanian lt
Catalan ca Macedonian mk
Chinese Simplified zh-CN Malay ms
Chinese Traditional zh-TW Maltese mt
Croatian hr Norwegian no
Czech cs Persian fa
Danish da Polish pl
Dutch nl Portuguese pt
English en Romanian ro
Esperanto eo Russian ru
Estonian et Serbian sr
Filipino tl Slovak sk
Finnish fi Slovenian sl
French fr Spanish es
Galician gl Swahili sw
Georgian ka Swedish sv
German de Tamil ta
Greek el Telugu te
Gujarati gu Thai th
Haitian Creole ht Turkish tr
Hebrew iw Ukrainian uk
Hindi hi Urdu ur
Hungarian hu Vietnamese vi
Icelandic is Welsh cy
Indonesian id Yiddish yi

3. Finish, save your HTML Document and upload it as your asset.

actually I don’t want to remove the google logo on the plugin because this isn’t a commendable act, but I’m just a human who wants to look cool so I do it.

and lastly, I hope this tutorial is useful for you and DWYOR.

happy coding…