A few days ago, I got a project from my client. A project CMS Website which is has to feature multilanguage. Long story short when I developed this module. I’m having problems. Namely how to hide Google translate elements that are on top of the page. Alhamdulillah, thank God, finally I found his enlightenment through this blog and some discussions on Stackoverflow.
As a thank you for successfully completing this project. I will share a simple way how to implement the google translate feature into the CMS Website.
You can create a new file named style.css
body{
margin: 0 auto;
padding: 0px 10px;
top: 0px !important;
}
ul.translation-icons{
margin: 0px;
padding: 0px;
}
ul.translation-icons li.translate{
display: inline-block;
padding: 5px 10px;
}
.goog-te-gadget-icon {
display:none;
}
.goog-te-gadget-simple a {
text-decoration: none !important;
}
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
#goog-gt-tt{
display: none !important;
}
#google_translate_element{
display: none;
}
You can create a new file named index.html
<!DOCTYPE html>
<html>
<head>
<title>.: Google Translate Integration :.</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="translation-icons">
<li class="translate">
<a href="#googtrans(en|id)" class="indonesian" data-lang="Indonesian">
<img src="in.gif"/> IND
</a>
</li>
<li class="translate">
<a href="#googtrans(id|en)" class="english" data-lang="English">
<img src="en.gif"/> EN
</a>
</li>
</ul>
<hr>
<p>Halo Dunia, Saya mau memperkenalkan diri. Nama saya Bramanto.</p>
<div id="google_translate_element"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,id',
defaultLanguage: 'en',
multilanguagePage: true,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
}, 'google_translate_element');
}
(function() {
var googleTranslateScript = document.createElement('script');
googleTranslateScript.type = 'text/javascript';
googleTranslateScript.async = true;
googleTranslateScript.src = '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( googleTranslateScript );
})();
// CLICK DESKTOP OR TAB DEVICE
$(document).on("click", "ul.translation-icons li.translate a",function() {
var lang = $(this).data('lang');
var $frame = $('.goog-te-menu-frame:first');
if (!$frame.length) {
alert("Error: Could not find Google translate frame.");
return false;
}
$('.goog-te-menu-frame:first').contents().find('.goog-te-menu2-item span.text').each(function(){
if($(this).html() == lang){
$(this).click();
}
});
return false;
});
// CLICK MOBILE DEVICE
$(document).on("touchstart", "ul.translation-icons li.translate a",function() {
var theLang = jQuery(this).attr('data-lang');
jQuery('.goog-te-combo').val(theLang);
window.location = jQuery(this).attr('href');
location.reload();
});
</script>
</body>
</html>
By the way, don’t forget to turn on your internet connection to try this feature.
If you have another code reference and of course it has run perfectly. Please comment on this post. I am also always open to criticism and suggestions and discussions related to technology.
Thank you for reading this post.
Bramanto's Blog 