<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'zh-TW', includedLanguages: 'en,ja,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
想拿掉小icon可以增加css
<style type="text/css">
#google_translate_element img {
display: none;
}
</style>
如果想客製化自己的外觀 可參考
<div id="google_translate_element"> </div>
<div class="menu-traslate-header">
<ul>
<li><a href="#googtrans/en">English</a></li>
<li><a href="#googtrans/zh-TW">繁體中文</a></li>
<li><a href="#googtrans/zh-CN">簡體中文</a></li>
<li><a href="#googtrans/es">Español</a></li>
<li><a href="#googtrans/vi">Việt</a></li>
<li><a href="#googtrans/ru">Русский</a></li>
<li><a href="#googtrans/sq">SHQIP</a></li>
<li><a href="#googtrans/km">ខ្មែរ</a></li>
<li><a href="#googtrans/fr">Français</a></li>
<li><a href="#googtrans/ar">عربي</a></li>
</ul>
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'ar,en,es,fr,km,ru,sq,vi,zh-CN',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
multilanguagePage: true,
gaTrack: true,
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.menu-traslate-header ul li a').click(function(event) {
window.location = $(this).attr('href');
location.reload();
});
});
</script>
資料來源: https://neohsuxoops.blogspot.com/2018/12/googlejs.html
資料來源: https://stackoverflow.com/questions/10486833/implementing-google-translate-with-custom-flag-icons/12999313#12999313